/* ========================================
       DESIGN TOKENS
       ======================================== */
    :root {
      /* ── Core palette: #33be97 / #66d2ce / #1b6d5e / #ffffff ── */
      --c-primary: #33be97;
      --c-primary-light: #66d2ce;
      --c-primary-dark: #1e8a6a;
      --c-primary-muted: #239e7a;
      --c-accent: #66d2ce;
      --c-accent-dark: #1b6d5e;
      --c-bg: #ffffff;
      --c-bg-alt: #f5f7fa;
      --c-surface: #ffffff;
      --c-text: #263330;
      --c-text-secondary: #4a5c55;
      --c-text-muted: #718078;
      --c-border: #e0e5ea;
      /* ── Light tinted section backgrounds ── */
      --c-section-tinted: #eaf6f1;
      --c-section-tinted-alt: #f0f8f5;
      --c-section-tinted-surface: #ffffff;
      --c-section-tinted-border: #d4e6de;
      /* ── Hero light gradient ── */
      --c-hero-bg-start: #d4efe4;
      --c-hero-bg-end: #f5fcf9;
      /* ── Legacy (kept for internal ref compatibility, now light) ── */
      --c-dark-bg: #eaf6f1;
      --c-dark-surface: #ffffff;
      --c-dark-text: #263330;
      --c-dark-text-muted: #4a5c55;
      --c-dark-border: #d4e6de;
      /* ── Tinted backgrounds ── */
      --c-bg-tint-green: rgba(51,190,151,0.06);
      --c-bg-tint-teal: rgba(102,210,206,0.06);
      --c-bg-tint-blue: rgba(27,109,94,0.05);
      /* ── Gradients ── */
      --c-gradient-hero: linear-gradient(170deg, #d4efe4 0%, #eaf6f1 40%, #f8fdfa 100%);
      --c-gradient-tinted: linear-gradient(170deg, #eaf6f1, #f5fbf8);
      --c-gradient-accent: linear-gradient(135deg, rgba(51,190,151,0.08), rgba(102,210,206,0.05));
      /* ── Semantic ── */
      --c-danger: #e05555;
      --c-danger-bg: #fef5f4;
      --c-success: #33be97;
      --c-success-bg: rgba(51,190,151,0.08);
      --sp-2: 0.5rem;
      --sp-3: 0.75rem;
      --sp-4: 1rem;
      --sp-5: 1.25rem;
      --sp-6: 1.5rem;
      --sp-8: 2rem;
      --sp-10: 2.5rem;
      --sp-12: 3rem;
      --sp-16: 4rem;
      --sp-20: 5rem;
      --sp-24: 6rem;
      --sp-32: 8rem;
      --font-display: 'Noto Serif SC', 'SimSun', 'STSong', serif;
      --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
      --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --dur-fast: 150ms;
      --dur-med: 300ms;
      --dur-slow: 500ms;
      --dur-reveal: 700ms;
    }

    /* ========================================
       RESET & BASE
       ======================================== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
    body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--c-text); background: var(--c-bg); overflow-x: hidden; max-width: 100vw; }

    /* ========================================
       UTILITY
       ======================================== */
    .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-8); }
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 100ms; }
    .reveal-delay-2 { transition-delay: 200ms; }
    .reveal-delay-3 { transition-delay: 300ms; }
    .reveal-delay-4 { transition-delay: 400ms; }
    .reveal-delay-5 { transition-delay: 500ms; }
    .reveal-delay-6 { transition-delay: 600ms; }
    .reveal-delay-7 { transition-delay: 700ms; }

    .section-dark { background: var(--c-section-tinted); /* now light */ }
    .section-dark .section-label { color: var(--c-primary); }
    .section-dark .section-heading { color: var(--c-text); }
    .section-dark .section-desc { color: var(--c-text-secondary); }

    /* Section-specific backgrounds — all light now */
    .section-capabilities,
    .section-advantages,
    .section-pricing,
    .section-cases { /* dark vars removed, inherit light */ }

    /* Section separator */
    .section-sep { position: relative; }
    .section-sep::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-border), transparent); }
    .section-dark.section-sep::before { background: linear-gradient(90deg, transparent, #d4e6de, transparent); }

    /* ========================================
       NAVIGATION
       ======================================== */
    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: var(--sp-5) 0; transition: background var(--dur-med) var(--ease-out-quart), padding var(--dur-med) var(--ease-out-quart), backdrop-filter var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med); background: rgba(255,255,255,0.88); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 rgba(0,0,0,0.06); padding-top: calc(var(--sp-5) + env(safe-area-inset-top)); }
    .nav.scrolled { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px) saturate(1.2); padding: var(--sp-3) 0; padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); box-shadow: 0 1px 8px rgba(0,0,0,0.08); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #263330; text-decoration: none; letter-spacing: -0.02em; }
    .nav-logo span { color: var(--c-primary); }
    .nav-links { display: flex; align-items: center; gap: var(--sp-6); list-style: none; }
    .nav-links a { font-size: 0.85rem; color: #4a5c55; text-decoration: none; transition: color var(--dur-fast); font-weight: 500; }
    .nav-links a:hover { color: var(--c-primary); }
    .nav-cta { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.55rem 1.5rem; background: var(--c-primary); color: #ffffff; font-size: 0.85rem; font-weight: 600; border: none; border-radius: 100px; cursor: pointer; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart); }
    .nav-cta:hover { transform: translateY(-1px); background: var(--c-primary-dark); box-shadow: 0 8px 24px rgba(51,190,151,0.35); }

    /* ---- Hamburger / Mobile Menu ---- */
    .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 8px; transition: background var(--dur-fast); z-index: 1001; }
    .nav-hamburger:hover { background: rgba(51,190,151,0.08); }
    .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform var(--dur-med) var(--ease-out-quart), opacity var(--dur-fast), background var(--dur-fast); transform-origin: center; }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); z-index: 999; padding: calc(80px + env(safe-area-inset-top) + var(--sp-6)) var(--sp-8) var(--sp-8); flex-direction: column; gap: var(--sp-2); overflow-y: auto; }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-menu a { font-size: 1.25rem; font-weight: 600; color: var(--c-text); text-decoration: none; padding: var(--sp-4) var(--sp-3); border-radius: 12px; transition: background var(--dur-fast), color var(--dur-fast); display: block; border-bottom: 1px solid var(--c-border); }
    .nav-mobile-menu a:last-child { border-bottom: none; }
    .nav-mobile-menu a:hover, .nav-mobile-menu a:active { background: var(--c-bg-tint-green); color: var(--c-primary); }
    .nav-mobile-menu .nav-mobile-cta { margin-top: var(--sp-5); background: var(--c-primary); color: #ffffff; text-align: center; border-radius: 14px; padding: var(--sp-5); font-size: 1.05rem; border-bottom: none; }

    /* ========================================
       HERO SECTION
       ======================================== */
    .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--c-gradient-hero); overflow: hidden; padding: var(--sp-32) 0 var(--sp-20); --c-text: #263330; --c-text-secondary: #4a5c55; --c-text-muted: #718078; }
    .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(51,190,151,0.08), transparent), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(102,210,206,0.05), transparent), radial-gradient(ellipse 40% 40% at 90% 10%, rgba(27,109,94,0.04), transparent); z-index: 0; }
    .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(51,190,151,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(51,190,151,0.04) 1px, transparent 1px); background-size: 60px 60px; z-index: 0; }
    .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
    .hero-content { position: relative; z-index: 1; }
    .hero-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.4rem 1rem; background: rgba(51,190,151,0.1); border: 1px solid rgba(51,190,151,0.2); border-radius: 100px; color: var(--c-primary-dark); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: var(--sp-8); }
    .hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); animation: pulse-dot 2s ease-in-out infinite; }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }
    .hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 6.5vw, 5.2rem); font-weight: 900; line-height: 1.15; color: #1a2e28; letter-spacing: -0.03em; margin-bottom: var(--sp-4); max-width: 14ch; }
    .hero h1 .brand { color: var(--c-primary-light); }
    .hero h1 .geo { background: linear-gradient(135deg, #1e8a6a, #33be97); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero-subtitle { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 400; color: #4a5c55; line-height: 1.5; margin-bottom: var(--sp-10); max-width: 36ch; }
    .hero-desc { font-size: 0.95rem; line-height: 1.85; color: #4a5c55; max-width: 60ch; margin-bottom: var(--sp-12); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
    .btn-primary { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.85rem 2rem; background: var(--c-accent); color: #ffffff; font-size: 1rem; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart); }
    .btn-primary:hover { transform: translateY(-2px); background: var(--c-accent-dark); box-shadow: 0 12px 32px rgba(27,109,94,0.35); }
    .btn-primary:active { transform: translateY(0); }
    .btn-secondary { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.85rem 2rem; background: transparent; color: #263330; font-size: 1rem; font-weight: 500; border: 1.5px solid #d4e6de; border-radius: 12px; cursor: pointer; text-decoration: none; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
    .btn-secondary:hover { border-color: var(--c-primary); background: rgba(51,190,151,0.06); transform: translateY(-1px); }
    .hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; }
    .hero-visual-inner { position: relative; width: min(420px, 80vw); height: min(420px, 80vw); }
    .orbit-ring { position: absolute; border-radius: 50%; border: 1px solid #d4e6de; }
    .orbit-ring-1 { inset: 0; animation: spin-slow 40s linear infinite; }
    .orbit-ring-2 { inset: 15%; border-color: rgba(51,190,151,0.08); animation: spin-slow 30s linear infinite reverse; }
    .orbit-ring-3 { inset: 30%; border-color: rgba(51,190,151,0.12); animation: spin-slow 20s linear infinite; }
    @keyframes spin-slow { to { transform: rotate(360deg); } }
    .orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, var(--c-primary), var(--c-primary-dark)); box-shadow: 0 0 40px rgba(51,190,151,0.3), 0 0 80px rgba(51,190,151,0.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; color: white; }
    .satellite { position: absolute; width: 44px; height: 44px; border-radius: 12px; background: #ffffff; border: 1px solid #d4e6de; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
    .satellite-1 { top: 5%; left: 50%; transform: translateX(-50%); }
    .satellite-2 { top: 50%; right: 0%; transform: translateY(-50%); }
    .satellite-3 { bottom: 10%; left: 15%; }
    .satellite-4 { top: 25%; left: 5%; }
    .satellite-5 { bottom: 5%; right: 20%; }
    .hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); padding-top: var(--sp-16); border-top: 1px solid #d4e6de; }
    .stat-item { text-align: center; }
    .stat-number { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 900; color: var(--c-primary); line-height: 1.2; letter-spacing: -0.02em; }
    .stat-label { font-size: 0.8rem; color: var(--c-text-secondary); margin-top: var(--sp-1); }

    /* ========================================
       SECTION HEADERS (shared)
       ======================================== */
    .section-label { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-primary); margin-bottom: var(--sp-6);  }
    .section-label::before { content: ''; width: 24px; height: 2px; background: var(--c-primary); border-radius: 1px; }
    .section-heading { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; line-height: 1.3; color: var(--c-text); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
    .section-desc { font-size: 1rem; color: var(--c-text-secondary); line-height: 1.8; }
    .section-header { margin-bottom: var(--sp-20); }
    .section-header-center { text-align: center; margin-bottom: var(--sp-20); }
    .section-header-center .section-label { justify-content: center; }
    .section-header-center .section-heading { margin-left: auto; margin-right: auto; }
    .section-header-center .section-desc { margin-left: auto; margin-right: auto; }

    /* ========================================
       STRATEGY SECTION — Three Steps
       ======================================== */
    .section-strategy { padding: var(--sp-32) 0; background: var(--c-bg); }
    .strategy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
    .strategy-card { position: relative; padding: var(--sp-10) var(--sp-8); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med) var(--ease-out-quart); overflow: hidden; }
    .strategy-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(23,42,38,0.1); }
    .strategy-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light)); border-radius: 20px 20px 0 0; }
    .strategy-step { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(51,190,151,0.12); font-family: var(--font-display); font-size: 0.9rem; font-weight: 900; color: var(--c-primary); margin-bottom: var(--sp-6); }
    .strategy-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-3); }
    .strategy-card .strategy-subtitle { font-size: 0.85rem; font-weight: 600; color: var(--c-primary); margin-bottom: var(--sp-5); }
    .strategy-card p { font-size: 0.875rem; color: var(--c-text-secondary); line-height: 1.7; margin-bottom: var(--sp-5); }
    .strategy-card ul { list-style: none; }
    .strategy-card ul li { font-size: 0.85rem; color: var(--c-text-secondary); line-height: 1.7; padding-left: var(--sp-5); position: relative; margin-bottom: var(--sp-2); }
    .strategy-card ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary-light); }

    /* ========================================
       CORE CAPABILITIES — Five Cards
       ======================================== */
    .section-capabilities { padding: var(--sp-32) 0; background: var(--c-section-tinted); }
    .capability-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); }
    .capability-card { text-align: center; padding: var(--sp-10) var(--sp-6); background: #ffffff; border: 1px solid #d4e6de; border-radius: 20px; transition: transform var(--dur-med) var(--ease-out-quart), border-color var(--dur-med), box-shadow var(--dur-med); }
    .capability-card:hover { transform: translateY(-4px); border-color: var(--c-primary); box-shadow: 0 12px 32px rgba(51,190,151,0.1); }
    .capability-icon { width: 56px; height: 56px; margin: 0 auto var(--sp-5); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
    .capability-icon-1 { background: rgba(51,190,151,0.08); }
    .capability-icon-2 { background: rgba(102,210,206,0.08); }
    .capability-icon-3 { background: rgba(27,109,94,0.07); }
    .capability-icon-4 { background: rgba(102,210,206,0.08); }
    .capability-icon-5 { background: rgba(27,109,94,0.07); }
    .capability-num { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 900; color: var(--c-primary); line-height: 1.2; margin-bottom: var(--sp-2); }
    .capability-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-3); }
    .capability-desc { font-size: 0.8rem; color: var(--c-text-secondary); line-height: 1.6; }

    /* ========================================
       AI INCLUSION RATE CHART
       ======================================== */
    .section-ai-rate { padding: var(--sp-32) 0; background: var(--c-bg); }
    .ai-rate-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-16); align-items: center; }
    .ai-rate-highlight { padding: var(--sp-10); background: linear-gradient(135deg, rgba(51,190,151,0.08), rgba(51,190,151,0.02)); border: 1px solid rgba(51,190,151,0.15); border-radius: 20px; text-align: center; }
    .ai-rate-big { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 900; color: var(--c-primary); line-height: 1; margin-bottom: var(--sp-4); }
    .ai-rate-label { font-size: 1rem; color: var(--c-text); font-weight: 600; margin-bottom: var(--sp-3); }
    .ai-rate-vs { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }
    .ai-rate-vs-item { text-align: center; padding: var(--sp-4) var(--sp-6); border-radius: 12px; }
    .ai-rate-vs-item.ours { background: rgba(51,190,151,0.08); }
    .ai-rate-vs-item.industry { background: rgba(224,85,85,0.08); }
    .ai-rate-vs-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; line-height: 1; }
    .ai-rate-vs-num.green { color: var(--c-primary); }
    .ai-rate-vs-num.red { color: var(--c-danger); }
    .ai-rate-vs-label { font-size: 0.75rem; color: var(--c-text-muted); margin-top: var(--sp-1); }
    /* Bar chart */
    .ai-chart { display: flex; flex-direction: column; gap: var(--sp-6); }
    .ai-chart-row { display: flex; align-items: center; gap: var(--sp-5); }
    .ai-chart-platform { width: 80px; font-size: 0.85rem; font-weight: 600; color: var(--c-text); flex-shrink: 0; }
    .ai-chart-bars { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
    .ai-chart-bar-wrap { display: flex; align-items: center; gap: var(--sp-3); }
    .ai-chart-bar-label { font-size: 0.7rem; color: var(--c-text-muted); width: 50px; flex-shrink: 0; }
    .ai-chart-bar { height: 28px; border-radius: 8px; transition: width 1.2s var(--ease-out-expo); min-width: 4px; }
    .ai-chart-bar.ours { background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light)); }
    .ai-chart-bar.industry { background: #c97070; }
    .ai-chart-bar-pct { font-size: 0.8rem; font-weight: 700; min-width: 36px; }
    .ai-chart-bar-pct.green { color: var(--c-primary); }
    .ai-chart-bar-pct.red { color: var(--c-danger); }
    .ai-rate-badges { display: flex; gap: var(--sp-4); margin-top: var(--sp-6); }
    .ai-rate-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.4rem 0.8rem; background: rgba(51,190,151,0.08); border-radius: 8px; font-size: 0.8rem; color: var(--c-primary); font-weight: 600; }

    /* ========================================
       CORE STRENGTH SECTION
       ======================================== */
    .section-strength { padding: var(--sp-32) 0; background: var(--c-bg-alt); }
    .strength-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start; }
    .strength-statement { position: relative; padding: var(--sp-10); background: var(--c-gradient-tinted); border: 1px solid #d4e6de; border-radius: 20px; color: var(--c-text); overflow: hidden; }
    .strength-statement::before { content: ''; position: absolute; top: -40%; right: -20%; width: min(300px, 80vw); height: min(300px, 80vw); background: radial-gradient(circle, rgba(51,190,151,0.06), transparent); border-radius: 50%; pointer-events: none; }
    .strength-statement .quote-mark { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--c-primary); opacity: 0.12; position: absolute; top: var(--sp-4); left: var(--sp-6); }
    .strength-statement p { position: relative; font-size: 1.05rem; line-height: 1.85; color: var(--c-text-secondary); margin-bottom: var(--sp-6); }
    .strength-statement p strong { color: var(--c-text); font-weight: 600; }
    .strength-highlight { position: relative; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); background: rgba(51,190,151,0.06); border-radius: 12px; border-left: 3px solid var(--c-primary); }
    .strength-highlight .num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; color: var(--c-primary); line-height: 1; white-space: nowrap; }
    .strength-highlight .desc { font-size: 0.9rem; line-height: 1.6; color: var(--c-text-secondary); }
    .strength-left { display: flex; flex-direction: column; gap: var(--sp-6); }
    .strength-compliance { position: relative; padding: var(--sp-8) var(--sp-10); background: linear-gradient(135deg, #fffdf5, #fff9ea); border: 1px solid #ecdcaa; border-left: 4px solid #d9a93e; border-radius: 16px; overflow: hidden; }
    .strength-compliance::before { content: ''; position: absolute; bottom: -30%; right: -10%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(217,169,62,0.06), transparent); border-radius: 50%; pointer-events: none; }
    .strength-compliance .compliance-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
    .strength-compliance .compliance-icon { font-size: 1.4rem; line-height: 1; }
    .strength-compliance .compliance-header h3 { font-size: 1.1rem; font-weight: 700; color: #8a6a1a; margin: 0; letter-spacing: 0.02em; }
    .strength-compliance .compliance-subtitle { font-size: 0.9rem; font-weight: 600; color: #b08a30; margin-bottom: var(--sp-3); letter-spacing: 0.08em; }
    .strength-compliance p { position: relative; font-size: 1rem; line-height: 1.85; color: var(--c-text-secondary); margin: 0; }
    .strength-features { display: flex; flex-direction: column; gap: var(--sp-5); }
    .feature-card { display: flex; gap: var(--sp-5); padding: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med) var(--ease-out-quart), border-color var(--dur-med); }
    .feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(23,42,38,0.08); border-color: rgba(51,190,151,0.2); }
    .feature-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: rgba(51,190,151,0.22); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
    .feature-card h3 { font-size: 1rem; font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-1); }
    .feature-card p { font-size: 0.875rem; color: var(--c-text-secondary); line-height: 1.7; }

    /* ========================================
       PAIN POINTS SECTION
       ======================================== */
    .section-pain { padding: var(--sp-32) 0; background: var(--c-bg); }
    .pain-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
    .pain-block { padding: var(--sp-8); border-radius: 20px; transition: transform var(--dur-med) var(--ease-out-quart); }
    .pain-block:hover { transform: translateY(-2px); }
    .pain-block-problem { background: #fef5f4; border: 1px solid #fcd9d9; position: relative; overflow: hidden; }
    .pain-block-problem::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 80% 20%, rgba(224,85,85,0.04), transparent); }
    .pain-block-problem .block-tag { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.3rem 0.8rem; background: rgba(224,85,85,0.1); color: #d43838; border-radius: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: var(--sp-6); }
    .pain-block-problem h3 { position: relative; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #263330; line-height: 1.4; margin-bottom: var(--sp-6); }
    .pain-items { position: relative; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
    .pain-items li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 0.9rem; line-height: 1.7; color: #4a5c55; }
    .pain-items li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(224,85,85,0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d95555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; margin-top: 2px; }
    .pain-block-solution { background: var(--c-surface); border: 1px solid var(--c-border); position: relative; }
    .pain-block-solution::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 20% 80%, rgba(51,190,151,0.06), transparent); border-radius: 20px; }
    .pain-block-solution .block-tag { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.3rem 0.8rem; background: rgba(51,190,151,0.1); color: var(--c-primary); border-radius: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: var(--sp-6); }
    .pain-block-solution h3 { position: relative; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--c-text); line-height: 1.4; margin-bottom: var(--sp-6); }
    .solution-items { position: relative; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
    .solution-items li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 0.9rem; line-height: 1.7; color: var(--c-text-secondary); }
    .solution-items li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(51,190,151,0.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2333be97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; margin-top: 2px; }
    .pain-closing { margin-top: var(--sp-16); padding: var(--sp-10) var(--sp-12); background: linear-gradient(135deg, rgba(51,190,151,0.06), rgba(51,190,151,0.02)); border: 1px solid rgba(51,190,151,0.12); border-radius: 20px; text-align: center; }
    .pain-closing p { font-size: 1.1rem; line-height: 1.8; color: var(--c-text); max-width: 56ch; margin: 0 auto; }
    .pain-closing strong { color: var(--c-primary); font-weight: 600; }

    /* ========================================
       EIGHT CORE ADVANTAGES
       ======================================== */
    .section-advantages { padding: var(--sp-32) 0; background: var(--c-section-tinted-alt); }
    .advantages-vs { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); margin-bottom: var(--sp-16); }
    .advantages-vs-tag { padding: var(--sp-3) var(--sp-6); border-radius: 100px; font-size: 0.85rem; font-weight: 600; }
    .advantages-vs-tag.bad { background: rgba(224,85,85,0.12); color: #f27070; }
    .advantages-vs-tag.good { background: rgba(51,190,151,0.1); color: var(--c-primary); }
    .advantages-vs-divider { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--c-text-muted); }
    .advantages-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
    .advantage-card { padding: var(--sp-8); background: #ffffff; border: 1px solid #d4e6de; border-radius: 16px; transition: transform var(--dur-med) var(--ease-out-quart), border-color var(--dur-med), box-shadow var(--dur-med); }
    .advantage-card:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: 0 8px 24px rgba(51,190,151,0.08); }
    .advantage-num { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; color: var(--c-primary); letter-spacing: 0.08em; margin-bottom: var(--sp-3); }
    .advantage-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-2); }
    .advantage-card .adv-subtitle { font-size: 0.85rem; color: var(--c-primary); margin-bottom: var(--sp-4); font-weight: 500; }
    .advantage-card p { font-size: 0.88rem; color: var(--c-text-secondary); line-height: 1.75; margin-bottom: var(--sp-3); }
    .advantage-card p:last-child { margin-bottom: 0; }
    .advantage-highlight { color: var(--c-accent); font-weight: 600; }

    /* ========================================
       CONTENT FUNNEL
       ======================================== */
    .section-funnel { padding: var(--sp-32) 0; background: var(--c-bg-alt); }
    .funnel-visual { display: flex; align-items: center; justify-content: center; gap: 0; margin: var(--sp-16) 0 var(--sp-8); }
    .funnel-stage { text-align: center; flex: 1; max-width: 280px; }
    .funnel-stage-inner { padding: var(--sp-6); border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-border); }
    .funnel-stage-icon { font-size: 2rem; margin-bottom: var(--sp-3); }
    .funnel-stage-num { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: var(--c-primary); line-height: 1.2; }
    .funnel-stage-label { font-size: 0.9rem; font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-1); }
    .funnel-stage-desc { font-size: 0.8rem; color: var(--c-text-muted); line-height: 1.5; }
    .funnel-stage-pct { display: inline-block; padding: 0.15rem 0.5rem; background: rgba(51,190,151,0.1); border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: var(--c-primary); margin-top: var(--sp-2); }
    .funnel-arrow { font-size: 1.5rem; color: var(--c-text-muted); padding: 0 var(--sp-4); flex-shrink: 0; }
    .funnel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
    .funnel-stat { text-align: center; padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; }
    .funnel-stat-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--c-primary); }
    .funnel-stat-label { font-size: 0.8rem; color: var(--c-text-muted); margin-top: var(--sp-1); }
    .funnel-note { text-align: center; font-size: 0.8rem; color: var(--c-text-muted); margin-top: var(--sp-6); }

    /* ========================================
       SITE MATRIX
       ======================================== */
    .section-matrix { padding: var(--sp-32) 0; background: var(--c-bg); }
    .matrix-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); margin-bottom: var(--sp-16); }
    .matrix-stat-card { text-align: center; padding: var(--sp-8); background: linear-gradient(135deg, rgba(51,190,151,0.06), rgba(51,190,151,0.02)); border: 1px solid rgba(51,190,151,0.12); border-radius: 16px; }
    .matrix-stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--c-primary); }
    .matrix-stat-label { font-size: 0.85rem; color: var(--c-text-secondary); margin-top: var(--sp-2); }
    .matrix-table { width: 100%; border-collapse: collapse; background: var(--c-surface); border-radius: 16px; overflow: hidden; border: 1px solid var(--c-border); }
    .matrix-table thead { background: var(--c-bg-tint-green); }
    .matrix-table th { padding: var(--sp-4) var(--sp-5); font-size: 0.85rem; font-weight: 600; color: var(--c-text); text-align: left; }
    .matrix-table td { padding: var(--sp-4) var(--sp-5); font-size: 0.875rem; color: var(--c-text-secondary); border-top: 1px solid var(--c-border); }
    .matrix-table tbody tr { transition: background var(--dur-fast); }
    .matrix-table tbody tr:hover { background: rgba(51,190,151,0.04); }
    .matrix-table .highlight { color: var(--c-primary); font-weight: 600; }

    /* ========================================
       COMPARISON SECTIONS (Response / Data / Cost)
       ======================================== */
    .section-comparison { padding: var(--sp-32) 0; }
    .comparison-header-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-radius: 12px 12px 0 0; background: var(--c-bg-tint-green); font-size: 0.85rem; font-weight: 600; }
    .comparison-header-row > div:first-child { color: var(--c-text-secondary); }
    .comparison-header-row > div:nth-child(2) { color: var(--c-primary); }
    .comparison-header-row > div:nth-child(3) { color: #f27070; }
    .comparison-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); border-bottom: 1px solid var(--c-border); transition: background var(--dur-fast); align-items: center; }
    .comparison-row:last-child { border-radius: 0 0 12px 12px; }
    .comparison-row:hover { background: rgba(51,190,151,0.03); }
    .comparison-dim { font-size: 0.875rem; font-weight: 600; color: var(--c-text); }
    .comparison-cell { font-size: 0.88rem; color: var(--c-text-secondary); line-height: 1.75; width: 100%;}
    .comparison-cell.good { color: var(--c-primary); }
    .comparison-cell.bad { color: #d43838; }
    .comparison-wrap { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; }

    /* Response section specific */
    .section-response { background: var(--c-bg-alt); }
    .response-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-12); }
    .response-card { padding: var(--sp-8); border-radius: 16px; text-align: center; }
    .response-card.ours { background: linear-gradient(135deg, rgba(51,190,151,0.1), rgba(51,190,151,0.03)); border: 1px solid rgba(51,190,151,0.15); }
    .response-card.theirs { background: var(--c-surface); border: 1px solid var(--c-border); }
    .response-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; line-height: 1; }
    .response-num.green { color: var(--c-primary); }
    .response-num.red { color: var(--c-danger); }
    .response-unit { font-size: 0.9rem; font-weight: 600; margin-top: var(--sp-1); }
    .response-card.ours .response-unit { color: var(--c-primary); }
    .response-card.theirs .response-unit { color: var(--c-text-secondary); }
    .response-label { font-size: 0.85rem; color: var(--c-text-muted); margin-top: var(--sp-2); }

    /* ========================================
       PRICING SECTION
       ======================================== */
    .section-pricing { padding: var(--sp-32) 0; background: var(--c-section-tinted); position: relative; overflow: hidden; }
    .section-pricing::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(800px, 100vw); height: min(800px, 100vw); background: radial-gradient(circle, rgba(51,190,151,0.07) 0%, transparent 65%); pointer-events: none; animation: orbFloat 8s ease-in-out infinite; }
    @keyframes orbFloat {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -52%) scale(1.05); }
    }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: stretch; position: relative; z-index: 1; }
    .pricing-grid:has(.pricing-card:hover) .pricing-card:not(:hover) { opacity: 0.65; filter: saturate(0.7); }
    .pricing-grid:has(.pricing-card:hover) .pricing-card { transition: opacity 0.4s var(--ease-out-quart), filter 0.4s var(--ease-out-quart), transform 0.5s var(--ease-out-quart), border-color 0.5s var(--ease-out-quart), box-shadow 0.5s var(--ease-out-quart); }
    .pricing-card {
      position: relative; padding: var(--sp-8);
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: 20px;
      display: flex; flex-direction: column;
      /* Override section-level dark text remap */
      --c-text: #263330; --c-text-secondary: #4a5c55; --c-text-muted: #718078;
      transition: transform 0.5s var(--ease-out-quart), border-color 0.5s var(--ease-out-quart), box-shadow 0.5s var(--ease-out-quart);
    }
    .pricing-card-num { position: absolute; top: var(--sp-6); right: var(--sp-6); font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; color: rgba(51,190,151,0.08); letter-spacing: 0.08em; }
    .pricing-card.featured .pricing-card-num { color: rgba(51,190,151,0.1); }
    .pricing-card:hover { transform: translateY(-6px); border-color: var(--c-primary); box-shadow: 0 12px 40px rgba(23,42,38,0.1); }
    .pricing-card:nth-child(1) { background: #f5f7fa; }
    .pricing-card:nth-child(3) { background: #f7f9fb; }

    /* ---- Featured card ---- */
    .pricing-card.featured {
      border: 2px solid var(--c-primary);
      background: #f5f8fb;
      box-shadow: 0 0 0 4px rgba(51,190,151,0.08), 0 8px 32px rgba(23,42,38,0.06);
      transform: scale(1.02);
      z-index: 2;
    }
    .pricing-card.featured:hover {
      transform: scale(1.02) translateY(-6px);
      border-color: var(--c-primary);
      box-shadow: 0 0 0 4px rgba(51,190,151,0.15), 0 16px 48px rgba(23,42,38,0.1), 0 0 40px rgba(51,190,151,0.06);
    }
    .pricing-card.featured::before {
      content: '';
      position: absolute;
      top: -1px; left: 30px; right: 30px;
      height: 3px;
      background: linear-gradient(90deg, transparent 0%, #33be97 20%, #66d2ce 50%, #33be97 80%, transparent 100%);
      border-radius: 3px;
      filter: blur(1px);
      animation: shimmer 3s ease-in-out infinite;
    }
    @keyframes shimmer {
      0% { opacity: 0.6; }
      50% { opacity: 1; }
      100% { opacity: 0.6; }
    }
    .pricing-card.featured::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 1.5px;
      background: linear-gradient(160deg, rgba(51,190,151,0.4), rgba(51,190,151,0.1) 50%, transparent 70%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0.6;
      transition: opacity 0.5s var(--ease-out-quart);
    }
    .pricing-card.featured:hover::after { opacity: 1; }
    .pricing-card.featured .pricing-tier { margin-top: var(--sp-1); }
    .pricing-particles { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; pointer-events: none; }
    .pricing-particles span { position: absolute; width: 3px; height: 3px; background: rgba(51,190,151,0.35); border-radius: 50%; animation: particleFloat 6s ease-in-out infinite; }
    .pricing-particles span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
    .pricing-particles span:nth-child(2) { top: 60%; left: 80%; animation-delay: 1.5s; }
    .pricing-particles span:nth-child(3) { top: 40%; left: 70%; animation-delay: 3s; }
    .pricing-particles span:nth-child(4) { top: 75%; left: 25%; animation-delay: 2s; }
    .pricing-particles span:nth-child(5) { top: 10%; left: 60%; animation-delay: 4.5s; }
    @keyframes particleFloat {
      0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
      50% { transform: translateY(-12px) scale(1.3); opacity: 0.7; }
    }

    /* ---- Badge ---- */
    .pricing-badge {
      position: absolute;
      top: -12px; right: 20px;
      display: inline-flex; align-items: center; gap: 4px;
      padding: 0.35rem 0.9rem;
      background: linear-gradient(135deg, #33be97, #5fd9b5);
      color: #ffffff;
      font-size: 0.72rem; font-weight: 800;
      border-radius: 100px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(51,190,151,0.4), 0 0 16px rgba(51,190,151,0.18);
      animation: badgePulse 3s ease-in-out infinite;
      z-index: 100;
    }
    .pricing-badge::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 6px rgba(255,255,255,0.6);
      animation: badgeDot 2s ease-in-out infinite;
    }
    @keyframes badgePulse {
      0%, 100% { box-shadow: 0 2px 8px rgba(51,190,151,0.4), 0 0 16px rgba(51,190,151,0.18); }
      50% { box-shadow: 0 2px 12px rgba(51,190,151,0.55), 0 0 24px rgba(51,190,151,0.3); }
    }
    @keyframes badgeDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* ---- Tier name ---- */
    .pricing-tier { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-2); }
    .pricing-card.featured .pricing-tier {
      background: linear-gradient(135deg, #1e8a6a, #33be97);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .pricing-audience { font-size: 0.8rem; color: var(--c-text-muted); margin-bottom: var(--sp-6); }

    /* ---- Price ---- */
    .pricing-price { display: flex; align-items: baseline; gap: var(--sp-1); margin-bottom: var(--sp-6); }
    .pricing-amount { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 900; color: var(--c-primary); letter-spacing: -0.02em; }
    .pricing-card.featured .pricing-amount {
      background: linear-gradient(135deg, #33be97, #1e8a6a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 40px rgba(51,190,151,0.15);
    }
    .pricing-currency { font-size: 1.1rem; font-weight: 700; color: var(--c-primary); }
    .pricing-period { font-size: 0.85rem; color: var(--c-text-muted); font-weight: 500; }
    .pricing-daily { font-size: 0.78rem; color: var(--c-text-muted); margin-top: calc(var(--sp-2) * -1); margin-bottom: var(--sp-1); font-weight: 500; }
    .pricing-card.featured .pricing-daily { color: var(--c-primary-dark); }
    .pricing-tagline { font-size: 0.82rem; color: var(--c-primary); font-weight: 600; margin-bottom: var(--sp-4); line-height: 1.6; }
    .pricing-card.featured .pricing-tagline { color: var(--c-primary-dark); }
    .pricing-value { font-size: 0.72rem; color: var(--c-text-muted); text-decoration: line-through; text-decoration-color: rgba(94,128,119,0.4); margin-bottom: var(--sp-2); }
    .pricing-card.featured .pricing-value { color: var(--c-primary); }
    .pricing-includes { font-size: 0.72rem; color: var(--c-text-muted); font-weight: 600; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px dashed rgba(51,190,151,0.15); }
    .pricing-card.featured .pricing-includes { color: var(--c-primary-dark); border-bottom-color: rgba(51,190,151,0.2); }

    /* ---- Features ---- */
    .pricing-features { list-style: none; flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
    .pricing-features li { font-size: 0.82rem; color: var(--c-text-muted); line-height: 1.6; display: flex; align-items: flex-start; gap: var(--sp-2); padding: 0.15rem 0; border-radius: 6px; transition: background 0.25s var(--ease-out-quart); }
    .pricing-features li:hover { background: rgba(51,190,151,0.04); }
    .pricing-features li::before {
      content: '';
      flex-shrink: 0;
      width: 18px; height: 18px;
      margin-top: 1px;
      border-radius: 50%;
      background: rgba(51,190,151,0.22);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236EE7B7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px;
    }
    .pricing-card.featured .pricing-features li { color: #3a6e5a; }
    .pricing-card.featured .pricing-features li::before {
      background: rgba(51,190,151,0.25);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236EE7B7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px;
      box-shadow: 0 0 8px rgba(51,190,151,0.1);
    }

    /* ---- Tags ---- */
    .pricing-tag { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
    .pricing-tag span { font-size: 0.7rem; padding: 0.25rem 0.6rem; background: rgba(51,190,151,0.05); border: 1px solid var(--c-border); border-radius: 6px; color: var(--c-text-muted); transition: all 0.3s var(--ease-out-quart); }
    .pricing-card:hover .pricing-tag span { border-color: rgba(51,190,151,0.25); background: rgba(51,190,151,0.06); }
    .pricing-card.featured .pricing-tag span { background: rgba(51,190,151,0.08); border-color: rgba(51,190,151,0.25); color: var(--c-primary-dark); }

    /* ---- Feature emphasis ---- */
    .pricing-features li strong { color: var(--c-text); font-weight: 600; }
    .pricing-card.featured .pricing-features li strong { color: var(--c-primary-dark); }

    /* ---- CPS line ---- */
    .pricing-cps { display: flex; align-items: center; gap: var(--sp-2); margin-top: calc(var(--sp-5) * -1); margin-bottom: var(--sp-6); flex-wrap: wrap; }
    .pricing-cps-tag { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.45rem; background: rgba(51,190,151,0.18); color: #33be97; border-radius: 4px; letter-spacing: 0.03em; }
    .pricing-cps-text { font-size: 0.82rem; color: var(--c-text-muted); }
    .pricing-cps-text strong { color: #33be97; font-weight: 700; }

    /* ---- CTA buttons ---- */
    .pricing-cta {
      display: inline-flex; align-items: center; justify-content: center;
      width: 100%; padding: 0.75rem 1.5rem;
      background: transparent; color: var(--c-text);
      border: 1.5px solid var(--c-border); border-radius: 12px;
      font-size: 0.85rem; font-weight: 600; text-decoration: none;
      transition: all 0.35s var(--ease-out-quart);
      margin-top: var(--sp-2);
    }
    .pricing-cta:hover { background: rgba(51,190,151,0.06); border-color: rgba(51,190,151,0.3); color: var(--c-primary); }
    .pricing-cta-primary {
      background: linear-gradient(135deg, #0e8a5c, #0a6a44);
      border-color: transparent; color: #ffffff;
      box-shadow: 0 4px 16px rgba(51,190,151,0.2);
    }
    .pricing-cta-primary:hover {
      background: linear-gradient(135deg, #33be97, #1e8a6a);
      box-shadow: 0 6px 24px rgba(51,190,151,0.35);
      color: #ffffff;
      transform: translateY(-1px);
    }

    /* ---- QR Code Modal ---- */
    .qr-modal-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9999;
      justify-content: center;
      align-items: center;
      padding: var(--sp-4);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .qr-modal-overlay.active {
      display: flex;
      opacity: 1;
    }
    .qr-modal {
      background: #ffffff;
      border-radius: 20px;
      padding: var(--sp-10) var(--sp-8) var(--sp-8);
      text-align: center;
      max-width: 340px;
      width: 100%;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      transform: scale(0.92);
      transition: transform 0.3s ease;
      position: relative;
    }
    .qr-modal-overlay.active .qr-modal {
      transform: scale(1);
    }
    .qr-modal-close {
      position: absolute;
      top: var(--sp-3); right: var(--sp-4);
      width: 32px; height: 32px;
      border: none; background: var(--c-bg-alt);
      border-radius: 50%;
      font-size: 1.1rem;
      cursor: pointer;
      color: var(--c-text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s;
    }
    .qr-modal-close:hover { background: var(--c-border); color: var(--c-text); }
    .qr-modal-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: var(--sp-2);
    }
    .qr-modal-desc {
      font-size: 0.82rem;
      color: var(--c-text-muted);
      margin-bottom: var(--sp-6);
      line-height: 1.6;
    }
    .qr-modal-img {
      width: 200px;
      height: 200px;
      border-radius: 12px;
      border: 2px solid var(--c-border);
      margin: 0 auto var(--sp-5);
      display: block;
      object-fit: cover;
    }
    .qr-modal-hint {
      font-size: 0.72rem;
      color: var(--c-text-muted);
      letter-spacing: 0.03em;
    }
    @media (max-width: 600px) {
      .qr-modal { padding: var(--sp-8) var(--sp-6) var(--sp-6); border-radius: 16px; }
      .qr-modal-img { width: 180px; height: 180px; }
    }

    /* ========================================
       ADD-ON SERVICES
       ======================================== */
    .section-addons { padding: var(--sp-32) 0; background: var(--c-bg); }
    .addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
    .addon-card { padding: var(--sp-8); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med) var(--ease-out-quart); position: relative; overflow: hidden; }
    .addon-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(23,42,38,0.08); }
    .addon-card:last-child::after { content: '全案优化版专属'; position: absolute; top: 1.75rem; right: calc(-1 * 1.75rem); background: var(--c-accent); color: #ffffff; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 2rem; transform: rotate(45deg); letter-spacing: 0.04em; }
    .addon-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(51,190,151,0.22); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: var(--sp-5); }
    .addon-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-2); }
    .addon-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: var(--c-primary); margin-bottom: var(--sp-1); }
    .addon-price-unit { font-size: 0.8rem; font-weight: 400; color: var(--c-text-muted); }
    .addon-card p { font-size: 0.85rem; color: var(--c-text-secondary); line-height: 1.7; margin-bottom: var(--sp-4); }
    .addon-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    .addon-tags span { font-size: 0.72rem; padding: 0.2rem 0.5rem; background: rgba(51,190,151,0.06); border-radius: 6px; color: var(--c-primary); }
    .addon-result { margin-top: var(--sp-4); padding: var(--sp-3); background: rgba(51,190,151,0.05); border-radius: 8px; font-size: 0.8rem; color: var(--c-primary); font-weight: 500; }

    /* ========================================
       CASE STUDIES
       ======================================== */
    .section-cases { padding: var(--sp-32) 0; background: var(--c-bg-alt); }
    .cases-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-16); }
    .case-hero-stat { text-align: center; padding: var(--sp-5); background: #ffffff; border: 1px solid #d4e6de; border-radius: 14px; }
    .case-hero-num { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; color: var(--c-primary); }
    .case-hero-label { font-size: 0.78rem; color: var(--c-text-secondary); margin-top: var(--sp-1); }
    .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
    .case-card { padding: var(--sp-10); background: #ffffff; border: 1px solid #d4e6de; border-radius: 20px; transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med); }
    .case-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
    .case-card-tag { display: inline-flex; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; margin-bottom: var(--sp-4); }
    .case-card-tag.t1 { background: rgba(51,190,151,0.08); color: var(--c-primary); }
    .case-card-tag.t2 { background: rgba(102,210,206,0.08); color: var(--c-primary-dark); }
    .case-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-3); }
    .case-card p { font-size: 0.85rem; color: var(--c-text-secondary); line-height: 1.75; margin-bottom: var(--sp-5); }
    .case-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
    .case-metric { padding: var(--sp-4); background: rgba(51,190,151,0.04); border-radius: 10px; text-align: center; }
    .case-metric-num { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; color: var(--c-primary); }
    .case-metric-label { font-size: 0.72rem; color: var(--c-text-muted); margin-top: var(--sp-1); }

    /* ========================================
       ARTICLE RECOMMENDATIONS (Insights)
       ======================================== */
    .section-articles { padding: var(--sp-32) 0; background: var(--c-bg); }
    .section-articles .section-label { color: var(--c-primary); }
    .section-articles .section-heading { color: var(--c-text); }
    .section-articles .section-desc { color: var(--c-text-secondary); }
    .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-8); }
    .article-card {
      background: #ffffff;
      border: 1px solid #d4e6de;
      border-radius: 20px;
      overflow: hidden;
      transition: transform var(--dur-med) var(--ease-out-quart), border-color var(--dur-med), box-shadow var(--dur-med);
      cursor: pointer;
      text-decoration: none;
      display: block;
      color: inherit;
    }
    .article-card:hover {
      transform: translateY(-6px);
      border-color: var(--c-primary);
      box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(51,190,151,0.08);
    }
    .article-cover {
      height: 200px;
      position: relative;
      overflow: hidden;
    }
    .article-cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .article-cover-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
    }
    .article-cover-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .article-cover-tag {
      position: absolute;
      top: var(--sp-4);
      left: var(--sp-4);
      font-size: 0.68rem;
      font-weight: 700;
      padding: 0.25rem 0.65rem;
      border-radius: 100px;
      backdrop-filter: blur(12px);
      letter-spacing: 0.04em;
    }
    .article-cover-tag.trend { background: rgba(224,85,85,0.85); color: #ffffff; }
    .article-cover-tag.practice { background: rgba(224,85,85,0.85); color: #ffffff; }
    .article-cover-tag.data { background: rgba(200,40,40,0.85); color: #ffffff; }
    .article-body { padding: var(--sp-6); }
    .article-meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
    .article-date { font-size: 0.75rem; color: var(--c-text-muted); }
    .article-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-text-muted); }
    .article-read { font-size: 0.75rem; color: var(--c-text-muted); }
    .article-card h3 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: var(--sp-3);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .article-excerpt {
      font-size: 0.83rem;
      color: var(--c-text-secondary);
      line-height: 1.75;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ========================================
       THREE CLOSED LOOPS (funnel diagrams)
       ======================================== */
    .section-loops { padding: var(--sp-32) 0; background: var(--c-bg); }
    .loops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
    .loop-card { padding: var(--sp-8); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; }
    .loop-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-5); text-align: center; }
    .loop-flow { display: flex; flex-direction: column; gap: var(--sp-3); }
    .loop-node { padding: var(--sp-4) var(--sp-5); background: rgba(51,190,151,0.06); border: 1px solid rgba(51,190,151,0.12); border-radius: 12px; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--c-text); }
    .loop-node strong { color: var(--c-primary); }
    .loop-arrow-down { text-align: center; font-size: 1.2rem; color: var(--c-text-muted); line-height: 1; }
    .loop-labels { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); justify-content: center; }
    .loop-label { font-size: 0.72rem; padding: 0.2rem 0.5rem; background: var(--c-bg-alt); border-radius: 6px; color: var(--c-text-muted); }

    /* ========================================
       COMPANY INTRO + TIMELINE
       ======================================== */
    .section-company { padding: var(--sp-32) 0 var(--sp-24); background: var(--c-bg-alt); }
    .company-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; margin-bottom: var(--sp-20); }
    .company-brand { padding: var(--sp-10); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; }
    .company-brand h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-3); }
    .company-brand .brand-sub { font-size: 0.9rem; color: var(--c-primary); font-weight: 500; margin-bottom: var(--sp-5); }
    .company-brand p { font-size: 0.9rem; color: var(--c-text-secondary); line-height: 1.8; margin-bottom: var(--sp-5); }
    .company-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
    .company-stat { text-align: center; padding: var(--sp-4); background: rgba(51,190,151,0.05); border-radius: 12px; }
    .company-stat-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: var(--c-primary); }
    .company-stat-label { font-size: 0.75rem; color: var(--c-text-muted); margin-top: var(--sp-1); }
    .company-value { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
    .company-value-item { padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; }
    .company-value-item h4 { font-size: 0.95rem; font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-2); }
    .company-value-item p { font-size: 0.82rem; color: var(--c-text-secondary); line-height: 1.6; }

    /* Timeline */
    .timeline { position: relative; max-width: 800px; margin: 0 auto; }
    .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--c-border); transform: translateX(-50%); }
    .timeline-item { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); position: relative; margin-bottom: var(--sp-8); }
    .timeline-item:last-child { margin-bottom: 0; }
    .timeline-dot { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--c-primary); border: 3px solid var(--c-bg-alt); z-index: 1; }
    .timeline-year { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--c-primary); }
    .timeline-title { font-size: 1rem; font-weight: 600; color: var(--c-text); margin-top: var(--sp-2); }
    .timeline-desc { font-size: 0.85rem; color: var(--c-text-secondary); line-height: 1.7; margin-top: var(--sp-2); }
    .timeline-item:nth-child(odd) .timeline-year { text-align: right; }
    .timeline-item:nth-child(odd) .timeline-title { text-align: right; }
    .timeline-item:nth-child(odd) .timeline-desc { text-align: right; }
    .timeline-item:nth-child(even) .timeline-content { grid-column: 2; }

    /* 2026 Milestone Highlight */
    .milestone-highlight {
      max-width: 900px;
      margin: var(--sp-16) auto 0;
      padding: var(--sp-12) var(--sp-10);
      background: var(--c-gradient-accent);
      border-radius: 24px;
      border: 1px solid rgba(51,190,151,0.15);
      position: relative;
      overflow: hidden;
    }
    .milestone-highlight::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: min(400px, 80vw);
      height: min(400px, 80vw);
      background: radial-gradient(circle, rgba(51,190,151,0.04) 0%, transparent 70%);
      pointer-events: none;
    }
    .milestone-highlight::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: min(300px, 70vw);
      height: min(300px, 70vw);
      background: radial-gradient(circle, rgba(51,190,151,0.03) 0%, transparent 70%);
      pointer-events: none;
    }
    .milestone-header {
      text-align: center;
      margin-bottom: var(--sp-10);
      position: relative;
      z-index: 1;
    }
    .milestone-year {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      font-weight: 900;
      color: var(--c-accent);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .milestone-title {
      font-size: clamp(1.2rem, 2.5vw, 1.6rem);
      font-weight: 700;
      color: var(--c-text);
      margin-top: var(--sp-3);
    }
    .milestone-subtitle {
      font-size: 0.95rem;
      color: var(--c-text-secondary);
      margin-top: var(--sp-4);
      max-width: 52ch;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.8;
    }
    .milestone-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-5);
      margin-top: var(--sp-10);
      position: relative;
      z-index: 1;
    }
    .milestone-stat {
      text-align: center;
      padding: var(--sp-6) var(--sp-4);
      background: #ffffff;
      border: 1px solid #d4e6de;
      border-radius: 16px;
      transition: transform var(--dur-med) var(--ease-out-expo), border-color var(--dur-med), background var(--dur-med), box-shadow var(--dur-med);
    }
    .milestone-stat:hover {
      transform: translateY(-4px);
      border-color: var(--c-primary);
      background: #ffffff;
      box-shadow: 0 8px 24px rgba(51,190,151,0.08);
    }
    .milestone-stat-num {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 900;
      color: var(--c-primary-light);
      line-height: 1.2;
    }
    .milestone-stat-label {
      font-size: 0.78rem;
      color: var(--c-text-secondary);
      margin-top: var(--sp-2);
      line-height: 1.5;
    }
    .milestone-footer {
      text-align: center;
      margin-top: var(--sp-10);
      padding-top: var(--sp-8);
      border-top: 1px solid #d4e6de;
      position: relative;
      z-index: 1;
    }
    .milestone-footer p {
      font-size: 0.95rem;
      color: var(--c-text-secondary);
      line-height: 1.8;
      max-width: 56ch;
      margin: 0 auto;
    }
    .milestone-footer strong {
      color: var(--c-primary-light);
      font-weight: 700;
    }
    .milestone-connector {
      display: flex;
      justify-content: center;
      margin: 0;
      position: relative;
    }
    .milestone-connector::before {
      content: '';
      width: 2px;
      height: var(--sp-10);
      background: linear-gradient(to bottom, var(--c-border), var(--c-accent));
      margin: 0 auto;
    }

    /* ========================================
       COVERAGE MATRIX — 全科矩阵覆盖 (PPT p6)
       ======================================== */
    .section-coverage-matrix { padding: var(--sp-32) 0; background: var(--c-bg); }
    .matrix-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
    .matrix-card { position: relative; padding: var(--sp-10); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden; transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med) var(--ease-out-quart); }
    .matrix-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(23,42,38,0.1); }
    .matrix-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 20px 20px 0 0; }
    .matrix-card:nth-child(1)::before { background: linear-gradient(90deg, #1b6d5e, #66d2ce); }
    .matrix-card:nth-child(2)::before { background: linear-gradient(90deg, #33be97, #5fd9b5); }
    .matrix-card:nth-child(3)::before { background: linear-gradient(90deg, #33be97, #5cc8c0); }
    .matrix-card:nth-child(4)::before { background: linear-gradient(90deg, #66d2ce, #17705f); }
    .matrix-card-header { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
    .matrix-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
    .matrix-card:nth-child(1) .matrix-card-icon { background: rgba(27,109,94,0.1); }
    .matrix-card:nth-child(2) .matrix-card-icon { background: rgba(51,190,151,0.1); }
    .matrix-card:nth-child(3) .matrix-card-icon { background: rgba(51,190,151,0.1); }
    .matrix-card:nth-child(4) .matrix-card-icon { background: rgba(102,210,206,0.1); }
    .matrix-card-header h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--c-text); }
    .matrix-card-subtitle { font-size: 0.8rem; color: var(--c-text-muted); font-weight: 500; }
    .matrix-card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
    .matrix-card-meta span { font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: 600; }
    .matrix-card-meta span.tag-primary { background: rgba(51,190,151,0.08); color: var(--c-primary); }
    .matrix-card-meta span.tag-accent { background: rgba(102,210,206,0.08); color: var(--c-accent); }
    .matrix-card-meta span.tag-info { background: rgba(27,109,94,0.08); color: #17705f; }
    .matrix-card-meta span.tag-warm { background: rgba(102,210,206,0.08); color: #5cc8c0; }
    .matrix-card-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .matrix-card-detail-item { padding: var(--sp-3); background: #f5fcfb; border-radius: 10px; }
    .matrix-card-detail-item .item-label { font-size: 0.75rem; color: var(--c-text-muted); margin-bottom: 2px; }
    .matrix-card-detail-item .item-value { font-size: 0.85rem; font-weight: 600; color: var(--c-text); }
    .matrix-card-sites { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
    .matrix-card-sites-label { font-size: 0.72rem; color: var(--c-text-muted); margin-bottom: var(--sp-2); }
    .matrix-card-sites-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    .matrix-card-sites-tags span { font-size: 0.7rem; padding: 0.18rem 0.5rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 5px; color: var(--c-text-secondary); }
    .matrix-card-footer-text { font-size: 0.8rem; color: var(--c-text-secondary); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); line-height: 1.6; }

    /* ========================================
       FIELD COVERAGE — 全领域覆盖 (PPT p7)
       ======================================== */
    .section-field-coverage { padding: var(--sp-32) 0; background: var(--c-section-tinted-alt); }
    .field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
    .field-card { padding: var(--sp-8); background: #ffffff; border: 1px solid #d4e6de; border-radius: 20px; text-align: center; transition: transform var(--dur-med) var(--ease-out-quart), border-color var(--dur-med), box-shadow var(--dur-med); }
    .field-card:hover { transform: translateY(-4px); border-color: var(--c-primary); box-shadow: 0 12px 32px rgba(51,190,151,0.08); }
    .field-card-num { font-family: var(--font-display); font-size: 0.65rem; font-weight: 800; color: rgba(51,190,151,0.08); letter-spacing: 0.1em; margin-bottom: var(--sp-2); }
    .field-card-icon { width: 56px; height: 56px; margin: 0 auto var(--sp-5); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
    .field-card:nth-child(1) .field-card-icon { background: rgba(27,109,94,0.06); }
    .field-card:nth-child(2) .field-card-icon { background: rgba(51,190,151,0.08); }
    .field-card:nth-child(3) .field-card-icon { background: rgba(51,190,151,0.08); }
    .field-card:nth-child(4) .field-card-icon { background: rgba(102,210,206,0.08); }
    .field-card:nth-child(5) .field-card-icon { background: rgba(27,109,94,0.06); }
    .field-card:nth-child(6) .field-card-icon { background: rgba(102,210,206,0.08); }
    .field-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-3); }
    .field-card .field-eng { font-size: 0.7rem; color: var(--c-text-muted); letter-spacing: 0.08em; margin-bottom: var(--sp-4); opacity: 0.6; }
    .field-card-services { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
    .field-card-services li { font-size: 0.8rem; color: var(--c-text-secondary); line-height: 1.6; padding: var(--sp-2) 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .field-card-services li:last-child { border-bottom: none; }

    /* ========================================
       LIFECYCLE COVERAGE — 全生命周期覆盖 (PPT p8)
       ======================================== */
    .section-lifecycle { padding: var(--sp-32) 0; background: var(--c-bg-alt); }
    .lifecycle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
    .lifecycle-card { padding: var(--sp-8); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med) var(--ease-out-quart); }
    .lifecycle-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(23,42,38,0.08); }
    .lifecycle-card-header { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
    .lifecycle-card-num { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: rgba(51,190,151,0.2); line-height: 1; flex-shrink: 0; }
    .lifecycle-card-header h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
    .lifecycle-card-audience { display: inline-block; padding: 0.15rem 0.6rem; background: rgba(51,190,151,0.08); color: var(--c-primary); border-radius: 6px; font-size: 0.72rem; font-weight: 600; margin-bottom: var(--sp-4); }
    .lifecycle-card-services { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
    .lifecycle-card-services li { font-size: 0.82rem; color: var(--c-text-secondary); line-height: 1.6; padding-left: var(--sp-4); position: relative; }
    .lifecycle-card-services li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary-light); }
    .lifecycle-card-stats { display: flex; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
    .lifecycle-card-stat { text-align: center; flex: 1; }
    .lifecycle-card-stat-num { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--c-primary); line-height: 1.2; }
    .lifecycle-card-stat-label { font-size: 0.7rem; color: var(--c-text-muted); margin-top: 2px; }

    /* ========================================
       FOOTER
       ======================================== */
    .footer { padding: var(--sp-16) 0; background: #1a2e28; border-top: 1px solid rgba(255,255,255,0.08); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-12); margin-bottom: var(--sp-12); }
    .footer-brand h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #ffffff; margin-bottom: var(--sp-3); }
    .footer-brand h4 span { color: #5fd9b5; }
    .footer-brand p { font-size: 0.82rem; color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 28ch; }
    .footer-col h5 { font-size: 0.8rem; font-weight: 600; color: #ffffff; margin-bottom: var(--sp-4); letter-spacing: 0.04em; }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: var(--sp-2); }
    .footer-col ul li a { font-size: 0.8rem; color: rgba(255,255,255,0.65); text-decoration: none; transition: color var(--dur-fast); }
    .footer-col ul li a:hover { color: #5fd9b5; }
    .footer-bottom { padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; }
    .footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
    .footer-links { display: flex; gap: var(--sp-6); }
    .footer-links a { font-size: 0.75rem; color: rgba(255,255,255,0.5); text-decoration: none; transition: color var(--dur-fast); }
    .footer-links a:hover { color: #5fd9b5; }

    /* ========================================
       RESPONSIVE
       ======================================== */
    @media (max-width: 1024px) {
      .capability-grid { grid-template-columns: repeat(3, 1fr); }
      .advantages-grid { grid-template-columns: repeat(2, 1fr); }
      .ai-rate-layout { grid-template-columns: 1fr; }
      .company-intro { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .milestone-stats { grid-template-columns: repeat(2, 1fr); }
      /* .article-grid 走 auto-fill+minmax 自然响应，无需固定 2 列 */
      .matrix-card-grid { grid-template-columns: 1fr; }
      .field-grid { grid-template-columns: repeat(2, 1fr); }
      .lifecycle-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .nav-hamburger { display: flex; }
      /* hero padding-top 需覆盖固定导航栏高度（约64px）+ 安全区域 */
      .hero { padding-top: max(calc(var(--sp-32) + var(--sp-8)), calc(64px + env(safe-area-inset-top) + 2rem)); }
      .hero-inner { grid-template-columns: 1fr; }
      .hero-visual { display: none; }
      .hero-stats { grid-template-columns: repeat(2, 1fr); }
      .strategy-grid { grid-template-columns: 1fr; }
      .capability-grid { grid-template-columns: repeat(2, 1fr); }
      .strength-grid { grid-template-columns: 1fr; }
      .pain-blocks { grid-template-columns: 1fr; }
      .advantages-grid { grid-template-columns: repeat(2, 1fr); }
      .funnel-visual { flex-direction: column; }
      .funnel-arrow { transform: rotate(90deg); }
      .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: var(--sp-8); }
      .pricing-card.featured { transform: scale(1); }
      .pricing-card.featured:hover { transform: translateY(-6px); }
      .pricing-amount { font-size: 2.6rem; }
      .pricing-badge { right: 16px; padding: 0.3rem 0.7rem; font-size: 0.68rem; }
      .pricing-trust > div { flex-direction: column; gap: var(--sp-3) !important; align-items: flex-start; }
      .addon-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
      .cases-hero-stats { grid-template-columns: repeat(2, 1fr); }
      .case-grid { grid-template-columns: 1fr; }
      .loops-grid { grid-template-columns: 1fr; }
      .response-visual { grid-template-columns: 1fr; }
      .timeline::before { left: 20px; }
      .timeline-dot { left: 20px; }
      .timeline-item { grid-template-columns: 40px 1fr; }
      /* 移动端：所有条目内容统一放第2列，左对齐 */
      .timeline-item .timeline-content { grid-column: 2; }
      .timeline-item:nth-child(even) .timeline-content { grid-column: 2; }
      .timeline-item:nth-child(odd) .timeline-year,
      .timeline-item:nth-child(odd) .timeline-title,
      .timeline-item:nth-child(odd) .timeline-desc { text-align: left; }
      .timeline-year, .timeline-title, .timeline-desc { grid-column: unset; text-align: left; }
      .milestone-stats { grid-template-columns: repeat(2, 1fr); }
      .field-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      /* Container */
      .container { padding: 0 var(--sp-5); }
      /* 防止所有 section 的绝对定位装饰元素溢出造成横向滚动条 */
      .section-strategy, .section-capabilities, .section-ai-rate,
      .section-strength, .section-pain, .section-advantages,
      .section-funnel, .section-matrix, .section-comparison,
      .section-pricing, .section-addons, .section-cases,
      .section-articles, .section-loops, .section-company,
      .section-coverage-matrix, .section-field-coverage,
      .section-lifecycle, .section-partners { padding: var(--sp-16) 0; overflow: hidden; }
      /* Section headings */
      .section-heading { font-size: clamp(1.5rem, 5vw, 2.2rem); }
      .section-label { font-size: 1.1rem; }
      .section-header, .section-header-center { margin-bottom: var(--sp-10); }
      /* Hero */
      .hero { padding-top: 88px; padding-bottom: var(--sp-12); }
      .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
      .stat-item { text-align: center; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
      /* Grids */
      .capability-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
      .capability-card { padding: var(--sp-6) var(--sp-4); }
      .matrix-stats { grid-template-columns: 1fr 1fr; }
      .funnel-stats { grid-template-columns: 1fr; }
      .cases-hero-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
      .company-stats { grid-template-columns: 1fr 1fr; }
      .company-value { grid-template-columns: 1fr; }
      /* Comparison table — card stack layout on mobile (no horizontal scroll) */
      .comparison-wrap { overflow: visible; background: transparent; border: none; border-radius: 0; box-shadow: none; }
      .comparison-header-row { display: none; }
      .comparison-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        border-bottom: none;
        margin-bottom: var(--sp-5);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.07);
        border: 1px solid var(--c-border);
        background: var(--c-surface);
      }
      .comparison-row:last-child { margin-bottom: 0; border-radius: 14px; }
      .comparison-row:hover { background: var(--c-surface); transform: none; }
      /* Dimension label — card header */
      .comparison-dim {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--c-text-secondary);
        background: var(--c-bg-tint-green);
        padding: var(--sp-2) var(--sp-4);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--c-border);
        width: 100%;
      }
      /* Good cell — our advantage */
      .comparison-cell {
        padding: var(--sp-3) var(--sp-4);
        font-size: 0.875rem;
        line-height: 1.65;
        position: relative;
        border-bottom: 1px solid var(--c-border);
      }
      .comparison-cell:last-child { border-bottom: none; }
      .comparison-cell.good {
        color: var(--c-primary);
        background: rgba(51,190,151,0.04);
      }
      .comparison-cell.good::before {
        content: '✓ 我方优势';
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--c-primary);
        letter-spacing: 0.05em;
        margin-bottom: var(--sp-1);
        opacity: 0.7;
      }
      .comparison-cell.bad {
        color: #c84444;
        background: rgba(224,85,85,0.03);
      }
      .comparison-cell.bad::before {
        content: '✗ 对方劣势';
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        color: #c84444;
        letter-spacing: 0.05em;
        margin-bottom: var(--sp-1);
        opacity: 0.7;
      }
      /* For cells without good/bad class (neutral) */
      .comparison-cell:not(.good):not(.bad)::before {
        content: '行业基准';
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--c-text-muted);
        letter-spacing: 0.05em;
        margin-bottom: var(--sp-1);
        opacity: 0.7;
      }
      /* Milestone */
      .milestone-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
      .milestone-highlight { padding: var(--sp-8) var(--sp-5); overflow: hidden; }
      .milestone-stat { padding: var(--sp-4) var(--sp-3); }
      /* Articles */
      .article-grid { grid-template-columns: 1fr; }
      /* Matrix */
      .matrix-card-grid { grid-template-columns: 1fr; }
      .field-grid { grid-template-columns: 1fr; }
      .lifecycle-grid { grid-template-columns: 1fr; }
      /* Footer */
      .footer-bottom { flex-direction: column; gap: var(--sp-4); text-align: center; }
      .footer-links { flex-wrap: wrap; justify-content: center; }
      .footer-col {text-align: center;}
      /* Pain */
      .pain-closing { padding: var(--sp-8) var(--sp-6); }
      /* Case metrics */
      .case-metrics { grid-template-columns: 1fr 1fr; }
      /* strength-statement 装饰 overflow 修复 */
      .strength-statement { overflow: hidden; }
      /* AI图表区域防溢出 */
      .ai-rate-chart { overflow: hidden; }
    }
    @media (max-width: 400px) {
      .hero-stats { grid-template-columns: 1fr; }
      .cases-hero-stats { grid-template-columns: 1fr; }
      .company-stats { grid-template-columns: 1fr; }
      .capability-grid { grid-template-columns: 1fr; }
      .milestone-stats { grid-template-columns: 1fr; }
      .matrix-stats { grid-template-columns: 1fr; }
    }

    /* ========================================
       REDUCED MOTION
       ======================================== */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }
    /* ========================================
       PARTNERSHIP TIMELINE (PPT p5)
       ======================================== */
    .section-partners { padding: var(--sp-32) 0; background: var(--c-bg-alt); }
    .section-partners .section-header-center { margin-bottom: var(--sp-8); }
    .section-partners .section-label { color: var(--c-primary); }
    .section-partners .section-heading { color: var(--c-text); }
    .section-partners .section-desc { max-width: 60ch; margin: 0 auto var(--sp-12); color: var(--c-text-secondary); font-size: 0.95rem; line-height: 1.85; }
    .partners-timeline { display: flex; gap: var(--sp-4); position: relative; margin-bottom: var(--sp-12); }
    .partners-timeline::before {
      content: '';
      position: absolute;
      top: 28px; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--c-primary), var(--c-accent), var(--c-accent-dark));
    }
    .partner-card {
      flex: 1;
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: 16px;
      padding: var(--sp-8) var(--sp-5);
      text-align: center;
      transition: transform var(--dur-med) var(--ease-out-quart), border-color var(--dur-med), box-shadow var(--dur-med);
      z-index: 1;
    }
    .partner-card:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: 0 12px 32px rgba(51,190,151,0.12); }
    .partner-logo {
      width: 72px; height: 72px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto var(--sp-4);
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
      padding: 8px;
      box-sizing: border-box;
    }
    .partner-logo img {
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
    }
    .partner-card:hover .partner-logo {
      border-color: var(--c-primary);
      box-shadow: 0 4px 16px rgba(51,190,151,0.15);
    }
    .partner-year {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 700;
      color: #ffffff;
      background: var(--c-accent-dark);
      padding: 0.2rem 0.75rem;
      border-radius: 100px;
      margin-bottom: var(--sp-3);
      letter-spacing: 0.04em;
    }
    .partner-card:nth-child(odd) .partner-year { background: var(--c-primary); color: #1a2a26; }
    .partner-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-1); }
    .partner-subtitle { font-size: 0.72rem; color: var(--c-accent); font-weight: 500; margin-bottom: var(--sp-3); letter-spacing: 0.02em; }
    .partner-desc { font-size: 0.82rem; color: var(--c-text-secondary); line-height: 1.7; }
    .partners-quote {
      text-align: center;
      padding: var(--sp-6) var(--sp-10);
      background: linear-gradient(135deg, rgba(51,190,151,0.06), rgba(27,109,94,0.06));
      border-radius: 12px;
      border: 1px solid var(--c-border);
      font-size: 0.9rem;
      color: var(--c-text-secondary);
      font-style: italic;
      line-height: 1.8;
    }
    .partners-quote strong { color: var(--c-primary); font-style: normal; }

    /* ---- Responsive ---- */
    @media (max-width: 1024px) {
      .partners-timeline { display: grid; grid-template-columns: repeat(3, 1fr); }
      .partners-timeline::before { display: none; }
    }
    @media (max-width: 768px) {
      .partners-timeline { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .partners-timeline { grid-template-columns: 1fr; }
      .partners-quote { padding: var(--sp-5) var(--sp-6); font-size: 0.85rem; }
    }