/* ===== Hengyun Pages - Shared Styles ===== */

/* Brand Design Tokens */
:root {
  --brand-primary: #4F46E5;
  --brand-primary-foreground: #FFFFFF;
  --brand-primary-50: #EEF0FF;
  --brand-primary-100: #E0E3FF;
  --brand-primary-200: #C7CCFE;
  --brand-primary-600: #4338CA;
  --brand-primary-700: #3730A3;
  --brand-secondary: #06B6D4;
  --brand-secondary-foreground: #FFFFFF;
  --brand-secondary-50: #ECFEFF;
  --brand-secondary-100: #CFFAFE;
  --brand-secondary-600: #0891B2;
  --brand-secondary-700: #0E7490;
  --brand-tertiary: #8B5CF6;
  --brand-tertiary-foreground: #FFFFFF;
  --brand-tertiary-50: #F5F3FF;
  --brand-tertiary-100: #EDE9FE;
  --brand-tertiary-600: #7C3AED;
  --brand-tertiary-700: #6D28D9;
  --brand-success: #10B981;
  --brand-success-foreground: #FFFFFF;
  --brand-success-50: #ECFDF5;
  --brand-warning: #F59E0B;
  --brand-warning-50: #FFFBEB;
  --brand-danger: #EF4444;
  --brand-danger-50: #FEF2F2;
  --brand-gradient-hero: linear-gradient(135deg, #4F46E5 0%, #06B6D4 50%, #8B5CF6 100%);
  --brand-gradient-cta: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 100%);
  --brand-gradient-text: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  --brand-gradient-card: linear-gradient(135deg, #EEF0FF 0%, #ECFEFF 100%);
  --brand-gradient-surface: linear-gradient(180deg, #FAFAFB 0%, #F5F3FF 100%);
  --brand-background: #FAFAFB;
  --brand-foreground: #18181B;
  --brand-card: #FFFFFF;
  --brand-card-foreground: #18181B;
  --brand-popover: #FFFFFF;
  --brand-popover-foreground: #18181B;
  --brand-muted: #F4F4F5;
  --brand-muted-foreground: #71717A;
  --brand-border: #E4E4E7;
  --brand-input: #E4E4E7;
  --brand-ring: #4F46E5;
  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 16px;
  --brand-radius-xl: 24px;
  --brand-font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --brand-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --brand-shadow-2: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  --brand-shadow-3: 0 16px 48px -12px rgba(79, 70, 229, 0.18);
  --brand-shadow-glow: 0 0 40px -8px rgba(79, 70, 229, 0.25);
}

.hyun-page * { margin: 0; padding: 0; box-sizing: border-box; }
.hyun-page { font-family: var(--brand-font-sans); color: var(--brand-foreground); background: var(--brand-background); }
.hyun-page img { max-width: 100%; height: auto; display: block; }
.hyun-page .cn-heading { text-wrap: balance; word-break: keep-all; }
.hyun-page .tabular-nums { font-variant-numeric: tabular-nums; }
.hyun-page .gradient-text { background: var(--brand-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Buttons */
.hyun-page .btn, .hyun-home .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: var(--brand-radius-md); font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.15s ease; border: 1px solid transparent; white-space: nowrap; }
.hyun-page .btn-primary, .hyun-home .btn-primary { background: var(--brand-gradient-cta); color: var(--brand-primary-foreground); box-shadow: var(--brand-shadow-glow); }
.hyun-page .btn-primary:hover, .hyun-home .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; }
.hyun-page .btn-outline, .hyun-home .btn-outline { background-color: transparent; color: var(--brand-foreground); border-color: var(--brand-border); }
.hyun-page .btn-outline:hover, .hyun-home .btn-outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* Breadcrumb */
.hyun-breadcrumb { max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem 0; font-size: 0.8125rem; color: var(--brand-muted-foreground); }
.hyun-breadcrumb a { color: var(--brand-muted-foreground); text-decoration: none; transition: color 0.15s ease; }
.hyun-breadcrumb a:hover { color: var(--brand-primary); }
.hyun-breadcrumb .sep { margin: 0 0.5rem; color: var(--brand-border); }
.hyun-breadcrumb .current { color: var(--brand-foreground); font-weight: 500; }

/* Page Hero */
.hyun-page-hero { position: relative; max-width: 1280px; margin: 0 auto; padding: 3rem 2rem 4rem; text-align: center; overflow: hidden; }
.hyun-page-hero::before { content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse at center, rgba(79,70,229,0.08) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.hyun-page-hero::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.hyun-page-hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hyun-page-hero-title { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.hyun-page-hero-subtitle { font-size: 1.125rem; color: var(--brand-muted-foreground); margin-bottom: 1rem; line-height: 1.7; }
.hyun-page-hero-desc { font-size: 0.9375rem; color: var(--brand-muted-foreground); line-height: 1.8; max-width: 600px; margin: 0 auto; }

/* Section */
.hyun-section { max-width: 1280px; margin: 0 auto; padding: 4rem 2rem; }
.hyun-section-alt { background: var(--brand-gradient-surface); border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border); }
.hyun-section-header { text-align: center; margin-bottom: 3rem; }
.hyun-section-heading { font-size: 2rem; font-weight: 700; color: var(--brand-foreground); margin-bottom: 0.75rem; position: relative; display: inline-block; }
.hyun-section-heading::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 40px; height: 3px; background: var(--brand-gradient-text); border-radius: 2px; }
.hyun-section-heading-left::after { left: 0; transform: none; }
.hyun-section-description { font-size: 1rem; color: var(--brand-muted-foreground); margin-top: 1.25rem; }
.hyun-section-subtitle { font-size: 0.875rem; font-weight: 600; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }

/* CTA Section */
.hyun-cta { background: var(--brand-gradient-cta); text-align: center; padding: 4rem 2rem; position: relative; overflow: hidden; }
.hyun-cta::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%); pointer-events: none; }
.hyun-cta-heading { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; position: relative; z-index: 1; }
.hyun-cta-subtitle { font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 2rem; position: relative; z-index: 1; }
.hyun-cta-buttons { display: flex; justify-content: center; gap: 1rem; position: relative; z-index: 1; flex-wrap: wrap; }
.hyun-cta .cta-btn-primary { background: #fff; color: var(--brand-primary); }
.hyun-cta .cta-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); color: var(--brand-primary); }
.hyun-cta .cta-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.hyun-cta .cta-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }

/* Stats Cards */
.hyun-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2rem; }
.hyun-stat-card { background: var(--brand-card); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-lg); padding: 1.75rem 1.25rem; text-align: center; transition: all 0.3s ease; }
.hyun-stat-card:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-2); border-color: var(--brand-primary-200); }
.hyun-stat-number { font-size: 2rem; font-weight: 800; background: var(--brand-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.2; margin-bottom: 0.375rem; }
.hyun-stat-label { font-size: 0.8125rem; color: var(--brand-muted-foreground); }

/* Card Hover */
.hyun-card-hover { transition: all 0.3s ease; }
.hyun-card-hover:hover { transform: translateY(-4px); box-shadow: var(--brand-shadow-3); }

/* Cover Gradients */
.cover-grad-1 { background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%); }
.cover-grad-2 { background: linear-gradient(135deg, #06B6D4 0%, #67E8F9 100%); }
.cover-grad-3 { background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%); }
.cover-grad-4 { background: linear-gradient(135deg, #10B981 0%, #34D399 100%); }
.cover-grad-5 { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); }
.cover-grad-6 { background: linear-gradient(135deg, #EF4444 0%, #F87171 100%); }
.cover-grad-7 { background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%); }
.cover-grad-8 { background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%); }
.cover-grad-9 { background: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%); }

/* Badge colors */
.badge-finance { color: var(--brand-primary); }
.badge-manufacturing { color: var(--brand-secondary-600); }
.badge-retail { color: var(--brand-tertiary); }
.badge-education { color: var(--brand-success); }
.badge-medical { color: var(--brand-danger); }
.badge-government { color: #F59E0B; }
.badge-energy { color: #3B82F6; }

/* Pagination */
.hyun-pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.hyun-page-btn { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.75rem; border-radius: var(--brand-radius-md); font-size: 0.875rem; font-weight: 500; color: var(--brand-muted-foreground); background: var(--brand-card); border: 1px solid var(--brand-border); text-decoration: none; transition: all 0.15s ease; cursor: pointer; }
.hyun-page-btn:hover:not(.active):not(.disabled) { color: var(--brand-primary); border-color: var(--brand-primary); }
.hyun-page-btn.active { background: var(--brand-gradient-cta); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(79,70,229,0.2); }
.hyun-page-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.hyun-page-btn svg { width: 16px; height: 16px; }

/* ===== Responsive ===== */
@media (max-width: 1279px) {
  .hyun-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .hyun-section { padding: 3rem 1.5rem; }
}
@media (max-width: 768px) {
  .hyun-breadcrumb { padding: 1rem 1rem 0; }
  .hyun-page-hero { padding: 2rem 1rem 3rem; }
  .hyun-section { padding: 3rem 1rem; }
  .hyun-stats-row { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
  .hyun-stat-card { padding: 1.25rem 0.75rem; }
  .hyun-stat-number { font-size: 1.5rem; }
  .hyun-cta { padding: 3rem 1rem; }
  .hyun-cta-heading { font-size: 1.5rem; }
  .hyun-cta-buttons { flex-direction: column; }
  .hyun-cta-buttons .btn { width: 100%; justify-content: center; }
  .hyun-pagination { gap: 0.25rem; }
  .hyun-page-btn { min-width: 36px; height: 36px; font-size: 0.8125rem; padding: 0 0.5rem; }
}

/* ===== Product Pages ===== */
.product-hero { max-width: 1280px; margin: 0 auto; padding: 3rem 2rem 4rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.product-hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; border-radius: var(--brand-radius-sm); font-size: 0.8125rem; font-weight: 600; color: var(--brand-primary); background: var(--brand-primary-50); margin-bottom: 1rem; }
.product-hero-badge svg { width: 16px; height: 16px; }
.product-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.product-hero-subtitle { font-size: 1.0625rem; line-height: 1.7; color: var(--brand-muted-foreground); margin-bottom: 1.5rem; }
.product-hero-ctas { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.product-highlights { display: flex; flex-direction: column; gap: 0.625rem; }
.product-highlight-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--brand-foreground); }
.product-highlight-item svg { width: 18px; height: 18px; color: var(--brand-success); flex-shrink: 0; }
.product-hero-visual { display: flex; justify-content: center; }
.visual-card { width: 100%; min-height: 360px; background: var(--brand-gradient-card); border-radius: var(--brand-radius-xl); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.visual-card::before { content: ''; position: absolute; top: -50%; right: -30%; width: 300px; height: 300px; background: rgba(79,70,229,0.1); border-radius: 50%; }
.product-icon-large { width: 160px; height: 160px; border-radius: var(--brand-radius-lg); background: var(--brand-gradient-cta); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--brand-shadow-3); position: relative; z-index: 1; }
.product-icon-large svg { width: 80px; height: 80px; }
.visual-card--image { background: #fff; padding: 0; }
.visual-card--image::before { display: none; }
.product-hero-img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; border-radius: var(--brand-radius-xl); }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.feature-card { background: var(--brand-card); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-lg); padding: 2rem; transition: all 0.3s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--brand-shadow-3); border-color: transparent; }
.feature-icon { width: 52px; height: 52px; border-radius: var(--brand-radius-md); background: var(--brand-primary-50); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.feature-icon svg { width: 26px; height: 26px; }
.feature-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.feature-desc { font-size: 0.875rem; line-height: 1.7; color: var(--brand-muted-foreground); }

.specs-container { margin-top: 2.5rem; max-width: 800px; }
.specs-table { width: 100%; border-collapse: collapse; background: var(--brand-card); border-radius: var(--brand-radius-lg); overflow: hidden; box-shadow: var(--brand-shadow-1); }
.specs-table th { width: 160px; padding: 1rem 1.25rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--brand-foreground); background: var(--brand-muted); border-bottom: 1px solid var(--brand-border); }
.specs-table td { padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--brand-muted-foreground); border-bottom: 1px solid var(--brand-border); line-height: 1.6; }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }

.scenarios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.scenario-card { background: var(--brand-card); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-lg); padding: 2rem 1.5rem; text-align: center; transition: all 0.3s ease; }
.scenario-card:hover { transform: translateY(-4px); box-shadow: var(--brand-shadow-2); border-color: var(--brand-primary-200); }
.scenario-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: var(--brand-radius-md); background: var(--brand-gradient-card); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; }
.scenario-icon svg { width: 28px; height: 28px; }
.scenario-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.375rem; }
.scenario-desc { font-size: 0.8125rem; line-height: 1.6; color: var(--brand-muted-foreground); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.pricing-card { background: var(--brand-card); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-lg); padding: 2rem; transition: all 0.3s ease; display: flex; flex-direction: column; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--brand-shadow-2); }
.pricing-card.featured { border: 2px solid var(--brand-primary); position: relative; box-shadow: var(--brand-shadow-3); }
.pricing-card.featured::before { content: '推荐'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand-gradient-cta); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 1rem; border-radius: 999px; }
.pricing-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.375rem; }
.pricing-desc { font-size: 0.8125rem; color: var(--brand-muted-foreground); margin-bottom: 1rem; }
.pricing-price { font-size: 2rem; font-weight: 800; color: var(--brand-primary); margin-bottom: 0.375rem; }
.pricing-price span { font-size: 0.875rem; font-weight: 500; color: var(--brand-muted-foreground); }
.pricing-unit { font-size: 0.75rem; color: var(--brand-muted-foreground); margin-bottom: 1.5rem; }
.pricing-features { list-style: none; margin-bottom: 1.5rem; flex: 1; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--brand-foreground); margin-bottom: 0.625rem; line-height: 1.5; }
.pricing-features li svg { width: 18px; height: 18px; color: var(--brand-success); flex-shrink: 0; margin-top: 2px; }
.pricing-card .btn { width: 100%; justify-content: center; }

@media (max-width: 1024px) {
  .product-hero { grid-template-columns: 1fr; gap: 2rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .scenarios-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  .product-hero { padding: 2rem 1rem 3rem; }
  .product-hero h1 { font-size: 1.875rem; }
  .product-hero-ctas { flex-direction: column; }
  .product-hero-ctas .btn { width: 100%; justify-content: center; }
  .visual-card { min-height: 280px; }
  .product-hero-img { min-height: 280px; }
  .product-icon-large { width: 120px; height: 120px; }
  .product-icon-large svg { width: 60px; height: 60px; }
  .features-grid { grid-template-columns: 1fr; }
  .scenarios-grid { grid-template-columns: repeat(2, 1fr); }
  .specs-table th { width: 120px; padding: 0.75rem; font-size: 0.8125rem; }
  .specs-table td { padding: 0.75rem; font-size: 0.8125rem; }
}