/* ============================================
   Shared Design System - Pantone Inspired
   Digital Transformation Landing Pages
   ============================================ */

/* === CSS Variables (Default: IT Blue) === */
:root {
    --primary: #3B5998;
    --primary-rgb: 59, 89, 152;
    --primary-dark: #2E457A;
    --primary-light: rgba(59, 89, 152, 0.12);
    --primary-glow: rgba(59, 89, 152, 0.25);

    --text: #1E1B18;
    --text-secondary: #5C5650;
    --text-muted: #8C867D;
    --text-inverse: #FDFBF7;

    --bg: #FAF8F5;
    --bg-alt: #F0EBE3;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FDFBF7;

    --border: rgba(60, 40, 20, 0.08);
    --border-glow: rgba(60, 40, 20, 0.14);

    --success: #2D8B57;
    --warning: #D4952A;
    --danger: #C44536;
    --info: #4A90B8;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --shadow-sm: 0 2px 8px rgba(60, 40, 20, 0.04);
    --shadow: 0 4px 20px rgba(60, 40, 20, 0.06);
    --shadow-hover: 0 12px 40px rgba(60, 40, 20, 0.10);
    --shadow-glow: 0 0 32px var(--primary-glow);

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-sans: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

/* === Industry Color Themes === */
:root[data-industry="it"] {
    --primary: #3B5998; --primary-dark: #2E457A; --primary-rgb: 59,89,152;
}
:root[data-industry="ai"] {
    --primary: #7C4DB8; --primary-dark: #623A96; --primary-rgb: 124,77,184;
}
:root[data-industry="enterprise"] {
    --primary: #1D7B6A; --primary-dark: #156255; --primary-rgb: 29,123,106;
}
:root[data-industry="manufacturing"] {
    --primary: #C44536; --primary-dark: #A0352A; --primary-rgb: 196,69,54;
}
:root[data-industry="healthcare"] {
    --primary: #2D8B7E; --primary-dark: #226F65; --primary-rgb: 45,139,126;
}
:root[data-industry="realestate"] {
    --primary: #D4952A; --primary-dark: #B07A1E; --primary-rgb: 212,149,42;
}
:root[data-industry="government"] {
    --primary: #4A5FB8; --primary-dark: #3A4C96; --primary-rgb: 74,95,184;
}
:root[data-industry="education"] {
    --primary: #E87A4A; --primary-dark: #C4623A; --primary-rgb: 232,122,74;
}
:root[data-industry="digital"] {
    --primary: #1D8B8B; --primary-dark: #156F6F; --primary-rgb: 29,139,139;
}
:root[data-industry="culture"] {
    --primary: #D4538B; --primary-dark: #B03F72; --primary-rgb: 212,83,139;
}
:root[data-industry="energy"] {
    --primary: #3D8B3D; --primary-dark: #2E6F2E; --primary-rgb: 61,139,61;
}
:root[data-industry="logistics"] {
    --primary: #2D7BB8; --primary-dark: #226296; --primary-rgb: 45,123,184;
}
:root[data-industry="ecommerce"] {
    --primary: #E8933A; --primary-dark: #C4782A; --primary-rgb: 232,147,58;
}
:root[data-industry="finance"] {
    --primary: #C4A02A; --primary-dark: #A0841E; --primary-rgb: 196,160,42;
}
:root[data-industry="catering"] {
    --primary: #D94A3A; --primary-dark: #B03A2C; --primary-rgb: 217,74,58;
}
:root[data-industry="agriculture"] {
    --primary: #4A8B3F; --primary-dark: #3A6F32; --primary-rgb: 74,139,63;
}
:root[data-industry="service"] {
    --primary: #D4607A; --primary-dark: #B04A62; --primary-rgb: 212,96,122;
}
:root[data-industry="tourism"] {
    --primary: #E8805A; --primary-dark: #C06840; --primary-rgb: 232,128,90;
}
:root[data-industry="legal"] {
    --primary: #2C4A7C; --primary-dark: #1E3560; --primary-rgb: 44,74,124;
}
:root[data-industry="marketing"] {
    --primary: #D4205A; --primary-dark: #B01848; --primary-rgb: 212,32,90;
}
:root[data-industry="construction"] {
    --primary: #5A7A8C; --primary-dark: #446070; --primary-rgb: 90,122,140;
}
:root[data-industry="environment"] {
    --primary: #2D8B6B; --primary-dark: #226F55; --primary-rgb: 45,139,107;
}
:root[data-industry="hr"] {
    --primary: #8B5A9E; --primary-dark: #704480; --primary-rgb: 139,90,158;
}
:root[data-industry="transportation"] {
    --primary: #1A8BA8; --primary-dark: #147088; --primary-rgb: 26,139,168;
}
:root[data-industry="sports"] {
    --primary: #E85D3A; --primary-dark: #C0482A; --primary-rgb: 232,93,58;
}
:root[data-industry="pet"] {
    --primary: #D4955A; --primary-dark: #B07840; --primary-rgb: 212,149,90;
}
:root[data-industry="elderly_care"] {
    --primary: #D4903A; --primary-dark: #B0752A; --primary-rgb: 212,144,58;
}
:root[data-industry="beauty"] {
    --primary: #C4607A; --primary-dark: #A04862; --primary-rgb: 196,96,122;
}
:root[data-industry="fashion"] {
    --primary: #6B4E9E; --primary-dark: #523A80; --primary-rgb: 107,78,158;
}
:root[data-industry="security"] {
    --primary: #3A5A8C; --primary-dark: #2C4570; --primary-rgb: 58,90,140;
}
:root[data-industry="pharma"] {
    --primary: #1A8B7A; --primary-dark: #146F62; --primary-rgb: 26,139,122;
}
:root[data-industry="smarthome"] {
    --primary: #D4882A; --primary-dark: #B07020; --primary-rgb: 212,136,42;
}
:root[data-industry="crosstrade"] {
    --primary: #2A6B9E; --primary-dark: #1E5280; --primary-rgb: 42,107,158;
}
:root[data-industry="gaming"] {
    --primary: #7B2DBE; --primary-dark: #622098; --primary-rgb: 123,45,190;
}
:root[data-industry="printing"] {
    --primary: #345080; --primary-dark: #263E64; --primary-rgb: 52,80,128;
}
:root[data-industry="food"] {
    --primary: #E87830; --primary-dark: #C05E20; --primary-rgb: 232,120,48;
}
:root[data-industry="telecom"] {
    --primary: #3A6BC5; --primary-dark: #2A5098; --primary-rgb: 58,107,197;
}
:root[data-industry="steel"] {
    --primary: #6B5B4F; --primary-dark: #524438; --primary-rgb: 107,91,79;
}
:root[data-industry="chemical"] {
    --primary: #1A7A8B; --primary-dark: #145E6B; --primary-rgb: 26,122,139;
}
:root[data-industry="furniture"] {
    --primary: #B8783A; --primary-dark: #945E2A; --primary-rgb: 184,120,58;
}
:root[data-industry="aerospace"] {
    --primary: #2E5A88; --primary-dark: #1E4060; --primary-rgb: 46,90,136;
}
:root[data-industry] {
    --primary-light: rgba(var(--primary-rgb), 0.12);
    --primary-glow: rgba(var(--primary-rgb), 0.25);
}

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* === Industry Background Texture === */
.page-bg-pattern {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    filter: brightness(0.6) contrast(1.1);
    background-image: url('../../images/bg_it.jpg');
}
html[data-industry="ai"] .page-bg-pattern { background-image: url('../../images/bg_ai.jpg'); }
html[data-industry="enterprise"] .page-bg-pattern { background-image: url('../../images/bg_enterprise.jpg'); }
html[data-industry="manufacturing"] .page-bg-pattern { background-image: url('../../images/bg_manufacturing.jpg'); }
html[data-industry="healthcare"] .page-bg-pattern { background-image: url('../../images/bg_healthcare.jpg'); }
html[data-industry="realestate"] .page-bg-pattern { background-image: url('../../images/bg_realestate.jpg'); }
html[data-industry="government"] .page-bg-pattern { background-image: url('../../images/bg_government.jpg'); }
html[data-industry="education"] .page-bg-pattern { background-image: url('../../images/bg_education.jpg'); }
html[data-industry="digital"] .page-bg-pattern { background-image: url('../../images/bg_digital.jpg'); }
html[data-industry="culture"] .page-bg-pattern { background-image: url('../../images/bg_culture.jpg'); }
html[data-industry="energy"] .page-bg-pattern { background-image: url('../../images/bg_energy.jpg'); }
html[data-industry="logistics"] .page-bg-pattern { background-image: url('../../images/bg_logistics.jpg'); }
html[data-industry="ecommerce"] .page-bg-pattern { background-image: url('../../images/bg_ecommerce.jpg'); }
html[data-industry="finance"] .page-bg-pattern { background-image: url('../../images/bg_finance.jpg'); }
html[data-industry="catering"] .page-bg-pattern { background-image: url('../../images/bg_catering.jpg'); }
html[data-industry="agriculture"] .page-bg-pattern { background-image: url('../../images/bg_agriculture.jpg'); }
html[data-industry="service"] .page-bg-pattern { background-image: url('../../images/bg_service.jpg'); }
html[data-industry="tourism"] .page-bg-pattern { background-image: url('../../images/bg_tourism.jpg'); }
html[data-industry="legal"] .page-bg-pattern { background-image: url('../../images/bg_legal.jpg'); }
html[data-industry="marketing"] .page-bg-pattern { background-image: url('../../images/bg_marketing.jpg'); }
html[data-industry="construction"] .page-bg-pattern { background-image: url('../../images/bg_construction.jpg'); }
html[data-industry="environment"] .page-bg-pattern { background-image: url('../../images/bg_environment.jpg'); }
html[data-industry="hr"] .page-bg-pattern { background-image: url('../../images/bg_hr.jpg'); }
html[data-industry="transportation"] .page-bg-pattern { background-image: url('../../images/bg_transportation.jpg'); }
html[data-industry="sports"] .page-bg-pattern { background-image: url('../../images/bg_sports.jpg'); }
html[data-industry="pet"] .page-bg-pattern { background-image: url('../../images/bg_pet.jpg'); }
html[data-industry="elderly_care"] .page-bg-pattern { background-image: url('../../images/bg_elderly_care.jpg'); }
html[data-industry="beauty"] .page-bg-pattern { background-image: url('../../images/bg_beauty.jpg'); }
html[data-industry="fashion"] .page-bg-pattern { background-image: url('../../images/bg_fashion.jpg'); }
html[data-industry="security"] .page-bg-pattern { background-image: url('../../images/bg_security.jpg'); }
html[data-industry="pharma"] .page-bg-pattern { background-image: url('../../images/bg_pharma.jpg'); }
html[data-industry="smarthome"] .page-bg-pattern { background-image: url('../../images/bg_smarthome.jpg'); }
html[data-industry="crosstrade"] .page-bg-pattern { background-image: url('../../images/bg_crosstrade.jpg'); }
html[data-industry="gaming"] .page-bg-pattern { background-image: url('../../images/bg_gaming.jpg'); }
html[data-industry="printing"] .page-bg-pattern { background-image: url('../../images/bg_printing.jpg'); }
html[data-industry="food"] .page-bg-pattern { background-image: url('../../images/bg_food.jpg'); }
html[data-industry="telecom"] .page-bg-pattern { background-image: url('../../images/bg_telecom.jpg'); }
html[data-industry="steel"] .page-bg-pattern { background-image: url('../../images/bg_steel.jpg'); }
html[data-industry="chemical"] .page-bg-pattern { background-image: url('../../images/bg_chemical.jpg'); }
html[data-industry="furniture"] .page-bg-pattern { background-image: url('../../images/bg_furniture.jpg'); }
html[data-industry="aerospace"] .page-bg-pattern { background-image: url('../../images/bg_aerospace.jpg'); }
.page-bg-glow {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 600px 400px at 20% 20%, var(--primary-glow) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 80% 60%, var(--primary-light) 0%, transparent 70%);
    opacity: 0.6;
}

/* === Particle Canvas === */
.particle-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}

/* === Container === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
body > *:not(.page-bg-pattern):not(.page-bg-glow):not(.particle-canvas) {
    position: relative; z-index: 1;
}

/* === Navigation === */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 14px 0;
    transition: var(--transition);
    background: rgba(250, 248, 245, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
}
nav.scrolled {
    padding: 10px 0;
    background: rgba(250, 248, 245, 0.95);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(60, 40, 20, 0.08);
}
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.nav-logo {
    font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
}
.nav-logo .logo-emoji { font-size: 26px; }
.nav-left { display: flex; align-items: center; gap: 12px; }
.nav-back {
    text-decoration: none; color: var(--text-secondary); font-size: 14px; font-weight: 500;
    padding: 8px 16px; border-radius: 8px; transition: var(--transition);
    display: inline-flex; align-items: center; gap: 4px;
}
.nav-back:hover { color: var(--primary); background: var(--primary-light); }
.nav-title {
    font-size: 15px; font-weight: 600; color: var(--text);
    padding: 6px 14px; border-radius: 8px; background: var(--primary-light);
}
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
    text-decoration: none; color: var(--text-secondary); font-size: 14px; font-weight: 500;
    padding: 8px 16px; border-radius: 8px; transition: var(--transition);
}
.nav-links a:hover { color: var(--primary); background: var(--primary-light); }
.nav-cta {
    background: var(--primary) !important; color: #fff !important;
    padding: 10px 24px !important; border-radius: 10px !important; font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
    transition: var(--transition) !important;
}
.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.4) !important;
    background: var(--primary-dark) !important;
}

/* === Sub-page Nav === */
.sub-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 14px 0; transition: var(--transition);
    background: rgba(250, 248, 245, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
}
.sub-nav.scrolled {
    background: rgba(250, 248, 245, 0.95);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(60, 40, 20, 0.08);
}
.sub-nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.sub-nav-left { display: flex; align-items: center; gap: 12px; }
.sub-nav-back {
    color: var(--text-secondary); text-decoration: none; font-size: 14px;
    display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px;
    transition: var(--transition);
}
.sub-nav-back:hover { background: var(--primary-light); color: var(--primary); }
.sub-nav-title { font-size: 16px; font-weight: 600; color: var(--text); }
.sub-nav-cta {
    background: var(--primary); color: #fff; padding: 10px 24px; border-radius: 10px;
    text-decoration: none; font-size: 14px; font-weight: 600;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
    transition: var(--transition);
}
.sub-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.4); }

/* === Hero Section === */
.hero {
    padding: 160px 0 100px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #000 100%),
                url('../../images/hero_it.jpg') center / cover no-repeat;
}
.hero::before {
    content: ''; position: absolute; top: -40%; right: -15%; width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%; z-index: 0;
}
.hero::after {
    content: ''; position: absolute; bottom: -20%; left: -10%; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%; z-index: 0;
}
/* Per-industry hero images */
html[data-industry="ai"] .hero { background: linear-gradient(135deg, #7C4DB8 0%, #623A96 50%, #50347E 100%), url('../../images/hero_ai.jpg') center/cover no-repeat; }
html[data-industry="enterprise"] .hero { background: linear-gradient(135deg, #1D7B6A 0%, #156255 50%, #0F4A40 100%), url('../../images/hero_enterprise.jpg') center/cover no-repeat; }
html[data-industry="manufacturing"] .hero { background: linear-gradient(135deg, #C44536 0%, #A0352A 50%, #802A20 100%), url('../../images/hero_manufacturing.jpg') center/cover no-repeat; }
html[data-industry="healthcare"] .hero { background: linear-gradient(135deg, #2D8B7E 0%, #226F65 50%, #1A554D 100%), url('../../images/hero_healthcare.jpg') center/cover no-repeat; }
html[data-industry="realestate"] .hero { background: linear-gradient(135deg, #D4952A 0%, #B07A1E 50%, #8A6315 100%), url('../../images/hero_realestate.jpg') center/cover no-repeat; }
html[data-industry="government"] .hero { background: linear-gradient(135deg, #4A5FB8 0%, #3A4C96 50%, #2C3A75 100%), url('../../images/hero_government.jpg') center/cover no-repeat; }
html[data-industry="education"] .hero { background: linear-gradient(135deg, #E87A4A 0%, #C4623A 50%, #9A4D2C 100%), url('../../images/hero_education.jpg') center/cover no-repeat; }
html[data-industry="digital"] .hero { background: linear-gradient(135deg, #1D8B8B 0%, #156F6F 50%, #0F5555 100%), url('../../images/hero_digital.jpg') center/cover no-repeat; }
html[data-industry="culture"] .hero { background: linear-gradient(135deg, #D4538B 0%, #B03F72 50%, #8A2F5A 100%), url('../../images/hero_culture.jpg') center/cover no-repeat; }
html[data-industry="energy"] .hero { background: linear-gradient(135deg, #3D8B3D 0%, #2E6F2E 50%, #235523 100%), url('../../images/hero_energy.jpg') center/cover no-repeat; }
html[data-industry="logistics"] .hero { background: linear-gradient(135deg, #2D7BB8 0%, #226296 50%, #194A75 100%), url('../../images/hero_logistics.jpg') center/cover no-repeat; }
html[data-industry="ecommerce"] .hero { background: linear-gradient(135deg, #E8933A 0%, #C4782A 50%, #9A5E20 100%), url('../../images/hero_ecommerce.jpg') center/cover no-repeat; }
html[data-industry="finance"] .hero { background: linear-gradient(135deg, #C4A02A 0%, #A0841E 50%, #7D6515 100%), url('../../images/hero_finance.jpg') center/cover no-repeat; }
html[data-industry="catering"] .hero { background: linear-gradient(135deg, #D94A3A 0%, #B03A2C 50%, #8A2820 100%), url('../../images/hero_catering.jpg') center/cover no-repeat; }
html[data-industry="agriculture"] .hero { background: linear-gradient(135deg, #4A8B3F 0%, #3A6F32 50%, #2C5425 100%), url('../../images/hero_agriculture.jpg') center/cover no-repeat; }
html[data-industry="service"] .hero { background: linear-gradient(135deg, #D4607A 0%, #B04A62 50%, #8A3A4C 100%), url('../../images/hero_service.jpg') center/cover no-repeat; }
html[data-industry="tourism"] .hero { background: linear-gradient(135deg, #E8805A 0%, #C06840 50%, #965030 100%), url('../../images/hero_tourism.jpg') center/cover no-repeat; }
html[data-industry="legal"] .hero { background: linear-gradient(135deg, #2C4A7C 0%, #1E3560 50%, #152548 100%), url('../../images/hero_legal.jpg') center/cover no-repeat; }
html[data-industry="marketing"] .hero { background: linear-gradient(135deg, #D4205A 0%, #B01848 50%, #8A1236 100%), url('../../images/hero_marketing.jpg') center/cover no-repeat; }
html[data-industry="construction"] .hero { background: linear-gradient(135deg, #5A7A8C 0%, #446070 50%, #324A58 100%), url('../../images/hero_construction.jpg') center/cover no-repeat; }
html[data-industry="environment"] .hero { background: linear-gradient(135deg, #2D8B6B 0%, #226F55 50%, #195540 100%), url('../../images/hero_environment.jpg') center/cover no-repeat; }
html[data-industry="hr"] .hero { background: linear-gradient(135deg, #8B5A9E 0%, #704480 50%, #563264 100%), url('../../images/hero_hr.jpg') center/cover no-repeat; }
html[data-industry="transportation"] .hero { background: linear-gradient(135deg, #1A8BA8 0%, #147088 50%, #0E5870 100%), url('../../images/hero_transportation.jpg') center/cover no-repeat; }
html[data-industry="sports"] .hero { background: linear-gradient(135deg, #E85D3A 0%, #C0482A 50%, #963820 100%), url('../../images/hero_sports.jpg') center/cover no-repeat; }
html[data-industry="pet"] .hero { background: linear-gradient(135deg, #D4955A 0%, #B07840 50%, #8A5E30 100%), url('../../images/hero_pet.jpg') center/cover no-repeat; }
html[data-industry="elderly_care"] .hero { background: linear-gradient(135deg, #D4903A 0%, #B0752A 50%, #8A5A20 100%), url('../../images/hero_elderly_care.jpg') center/cover no-repeat; }
html[data-industry="beauty"] .hero { background: linear-gradient(135deg, #C4607A 0%, #A04862 50%, #7A3648 100%), url('../../images/hero_beauty.jpg') center/cover no-repeat; }
html[data-industry="fashion"] .hero { background: linear-gradient(135deg, #6B4E9E 0%, #523A80 50%, #3E2C62 100%), url('../../images/hero_fashion.jpg') center/cover no-repeat; }
html[data-industry="security"] .hero { background: linear-gradient(135deg, #3A5A8C 0%, #2C4570 50%, #1E3258 100%), url('../../images/hero_security.jpg') center/cover no-repeat; }
html[data-industry="pharma"] .hero { background: linear-gradient(135deg, #1A8B7A 0%, #146F62 50%, #0E5548 100%), url('../../images/hero_pharma.jpg') center/cover no-repeat; }
html[data-industry="smarthome"] .hero { background: linear-gradient(135deg, #D4882A 0%, #B07020 50%, #8A5618 100%), url('../../images/hero_smarthome.jpg') center/cover no-repeat; }
html[data-industry="crosstrade"] .hero { background: linear-gradient(135deg, #2A6B9E 0%, #1E5280 50%, #163E62 100%), url('../../images/hero_crosstrade.jpg') center/cover no-repeat; }
html[data-industry="gaming"] .hero { background: linear-gradient(135deg, #7B2DBE 0%, #622098 50%, #4A1678 100%), url('../../images/hero_gaming.jpg') center/cover no-repeat; }
html[data-industry="printing"] .hero { background: linear-gradient(135deg, #345080 0%, #263E64 50%, #1A2C4A 100%), url('../../images/hero_printing.jpg') center/cover no-repeat; }
html[data-industry="food"] .hero { background: linear-gradient(135deg, #E87830 0%, #C05E20 50%, #984818 100%), url('../../images/hero_food.jpg') center/cover no-repeat; }
html[data-industry="telecom"] .hero { background: linear-gradient(135deg, #3A6BC5 0%, #2A5098 50%, #1E3C70 100%), url('../../images/hero_telecom.jpg') center/cover no-repeat; }
html[data-industry="steel"] .hero { background: linear-gradient(135deg, #6B5B4F 0%, #524438 50%, #3D3028 100%), url('../../images/hero_steel.jpg') center/cover no-repeat; }
html[data-industry="chemical"] .hero { background: linear-gradient(135deg, #1A7A8B 0%, #145E6B 50%, #0E4650 100%), url('../../images/hero_chemical.jpg') center/cover no-repeat; }
html[data-industry="furniture"] .hero { background: linear-gradient(135deg, #B8783A 0%, #945E2A 50%, #704520 100%), url('../../images/hero_furniture.jpg') center/cover no-repeat; }
html[data-industry="aerospace"] .hero { background: linear-gradient(135deg, #2E5A88 0%, #1E4060 50%, #142E48 100%), url('../../images/hero_aerospace.jpg') center/cover no-repeat; }
.hero-badge {
    display: inline-block; background: rgba(255,255,255,0.18); color: #fff;
    padding: 6px 18px; border-radius: 20px; font-size: 14px; font-weight: 500;
    backdrop-filter: blur(10px); margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.15);
}
.hero h1 {
    font-size: clamp(32px, 5vw, 56px); font-weight: 800; color: #fff;
    line-height: 1.15; margin-bottom: 20px; max-width: 800px; letter-spacing: -1px;
}
.hero-subtitle {
    font-size: 18px; color: rgba(255,255,255,0.85); margin-bottom: 40px;
    max-width: 600px; line-height: 1.6;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-emoji { font-size: 56px; margin-bottom: 16px; }
.breadcrumb { color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 16px; }
.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }

/* === Buttons === */
.btn-primary {
    display: inline-block; padding: 16px 36px; background: #fff; color: var(--primary);
    border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none;
    transition: var(--transition); border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.btn-secondary {
    display: inline-block; padding: 16px 36px; background: rgba(255,255,255,0.15); color: #fff;
    border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none;
    backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);
    transition: var(--transition);
}
.btn-secondary:hover { background: rgba(255,255,255,0.25); transform: translateY(-3px); }

/* === Stats Row === */
.stats-row { display: flex; gap: 24px; margin-top: 60px; flex-wrap: wrap; }
.stat-card {
    flex: 1; min-width: 180px; background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px); border-radius: var(--radius); padding: 28px 24px;
    text-align: center; border: 1px solid rgba(255,255,255,0.15);
    transition: var(--transition);
}
.stat-card:hover { background: rgba(255,255,255,0.18); transform: translateY(-4px); }
.stat-number { font-size: 40px; font-weight: 800; color: #fff; font-family: var(--font-mono); }
.stat-unit { font-size: 16px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.stat-label { font-size: 14px; color: rgba(253, 251, 247, 0.85); }

/* === Sections === */
.section { padding: 100px 0; }
.section-alt { background: var(--bg-alt); }
.section-label {
    display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary);
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
    background: var(--primary-light); padding: 4px 14px; border-radius: 6px;
}
.section-title {
    font-size: clamp(26px, 4vw, 36px); font-weight: 700;
    margin-bottom: 48px; color: var(--text);
}
.section-desc {
    font-size: 17px; color: var(--text-secondary); white-space: nowrap; margin: 0 auto 40px;
    text-align: center;
}

/* === Story Section === */
.story-section { display: flex; gap: 48px; align-items: center; margin-bottom: 48px; }
.story-section.reverse { flex-direction: row-reverse; }
.story-image {
    flex: 1; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); min-height: 280px;
}
.story-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s ease;
}
.story-image:hover img { transform: scale(1.03); }
.story-content { flex: 1; }
.story-quote {
    position: relative; background: var(--bg-card); border-radius: var(--radius);
    padding: 32px; box-shadow: var(--shadow);
    border-left: 4px solid var(--primary); margin-bottom: 24px;
}
.quote-mark {
    font-size: 64px; color: var(--primary); opacity: 0.12;
    position: absolute; top: 8px; left: 16px;
    font-family: Georgia, serif; line-height: 1;
}
.story-quote p {
    font-size: 16px; color: var(--text); line-height: 1.8;
    position: relative; z-index: 1;
}

/* === Data Card === */
.data-card {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, #FFF8E7, #F5E6C8);
    border-radius: var(--radius); padding: 20px 24px;
}
.data-card.full-width { margin-top: 32px; }
.data-card-icon { font-size: 32px; flex-shrink: 0; }
.data-card-text { font-size: 15px; color: #8B6914; line-height: 1.6; font-weight: 500; }

/* === Problems List === */
.problems-list { margin-top: 32px; }
.problems-list h3, .problems-grid h3 {
    font-size: 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.problems-list ul {
    list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.problems-list li, .problems-grid li {
    background: var(--bg-card); border-radius: 10px; padding: 16px 20px;
    font-size: 15px; box-shadow: var(--shadow);
    border-left: 3px solid var(--primary); transition: var(--transition);
}
.problems-list li:hover { transform: translateX(4px); box-shadow: var(--shadow-hover); }
.problems-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.problems-grid ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.problems-grid li {
    padding: 16px 20px; font-size: 15px; border-left: 3px solid var(--primary);
    background: var(--bg-card); border-radius: 10px; box-shadow: var(--shadow);
}
.icon-problem { color: var(--primary); font-size: 24px; }
.icon-impact { color: var(--danger); font-size: 24px; }
.impacts-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.impact-item {
    flex: 1; min-width: 160px; background: var(--bg-card);
    border: 2px solid #F5D5C8; border-radius: 10px; padding: 16px 20px;
    font-size: 14px; font-weight: 500; color: var(--danger);
    text-align: center; box-shadow: var(--shadow);
}

/* === Features Grid === */
.features-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px;
}
.feature-item {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--bg-card); border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow); transition: var(--transition);
}
.feature-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.feature-icon {
    width: 40px; height: 40px; background: var(--primary); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.feature-text { font-size: 15px; line-height: 1.6; color: var(--text); }
.effects-row { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.effect-tag {
    padding: 12px 28px; background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    color: #2E7D32; border-radius: 10px; font-weight: 700; font-size: 15px;
    border: 1px solid #A5D6A7;
}

/* === Sub Industry Grid === */
.sub-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.sub-card {
    display: block; background: var(--bg-card); border-radius: var(--radius);
    padding: 32px 28px; box-shadow: var(--shadow); text-decoration: none;
    color: inherit; transition: var(--transition); border: 1px solid var(--border);
    position: relative; overflow: hidden;
}
.sub-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
}
.sub-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.sub-card:hover::before { transform: scaleX(1); }
.sub-emoji { font-size: 48px; margin-bottom: 16px; }
.sub-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.sub-pain { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.6; }
.sub-pain::before { content: '痛点�?; color: var(--danger); font-weight: 600; }
.sub-solution { font-size: 14px; color: var(--text); margin-bottom: 16px; line-height: 1.6; }
.sub-solution::before { content: '方案�?; color: var(--primary); font-weight: 600; }
.sub-cta {
    font-size: 14px; font-weight: 600; color: var(--primary);
    transition: var(--transition); display: inline-block;
}
.sub-card:hover .sub-cta { transform: translateX(8px); }

/* === Pain Cards (Sub-page) === */
.pain-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pain-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 32px 28px;
    box-shadow: var(--shadow); transition: var(--transition); border: 1px solid var(--border);
}
.pain-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.pain-card-icon { font-size: 36px; margin-bottom: 16px; }
.pain-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.pain-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* === Solution Grid (Sub-page) === */
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sol-item {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--bg-card); border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow); transition: var(--transition);
}
.sol-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.sol-icon {
    width: 44px; height: 44px; background: var(--primary); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; flex-shrink: 0;
}
.sol-text h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.sol-text p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* === Advantage Grid (Sub-page) === */
.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.adv-card {
    text-align: center; background: var(--bg-card); border-radius: var(--radius);
    padding: 36px 28px; box-shadow: var(--shadow); transition: var(--transition);
    border: 1px solid var(--border);
}
.adv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.adv-icon { font-size: 48px; margin-bottom: 16px; }
.adv-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.adv-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* === CTA Section === */
.cta-section {
    padding: 100px 0; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #000 100%),
                url('../../images/hero_it.jpg') center / cover no-repeat;
}
.cta-section::before {
    content: ''; position: absolute; bottom: -30%; left: -20%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%; z-index: 0;
}
.cta-section::after {
    content: ''; position: absolute; top: -20%; right: -10%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%; z-index: 0;
}
/* Per-industry CTA images */
html[data-industry="ai"] .cta-section { background: linear-gradient(135deg, #7C4DB8 0%, #623A96 50%, #50347E 100%), url('../../images/hero_ai.jpg') center/cover no-repeat; }
html[data-industry="enterprise"] .cta-section { background: linear-gradient(135deg, #1D7B6A 0%, #156255 50%, #0F4A40 100%), url('../../images/hero_enterprise.jpg') center/cover no-repeat; }
html[data-industry="manufacturing"] .cta-section { background: linear-gradient(135deg, #C44536 0%, #A0352A 50%, #802A20 100%), url('../../images/hero_manufacturing.jpg') center/cover no-repeat; }
html[data-industry="healthcare"] .cta-section { background: linear-gradient(135deg, #2D8B7E 0%, #226F65 50%, #1A554D 100%), url('../../images/hero_healthcare.jpg') center/cover no-repeat; }
html[data-industry="realestate"] .cta-section { background: linear-gradient(135deg, #D4952A 0%, #B07A1E 50%, #8A6315 100%), url('../../images/hero_realestate.jpg') center/cover no-repeat; }
html[data-industry="government"] .cta-section { background: linear-gradient(135deg, #4A5FB8 0%, #3A4C96 50%, #2C3A75 100%), url('../../images/hero_government.jpg') center/cover no-repeat; }
html[data-industry="education"] .cta-section { background: linear-gradient(135deg, #E87A4A 0%, #C4623A 50%, #9A4D2C 100%), url('../../images/hero_education.jpg') center/cover no-repeat; }
html[data-industry="digital"] .cta-section { background: linear-gradient(135deg, #1D8B8B 0%, #156F6F 50%, #0F5555 100%), url('../../images/hero_digital.jpg') center/cover no-repeat; }
html[data-industry="culture"] .cta-section { background: linear-gradient(135deg, #D4538B 0%, #B03F72 50%, #8A2F5A 100%), url('../../images/hero_culture.jpg') center/cover no-repeat; }
html[data-industry="energy"] .cta-section { background: linear-gradient(135deg, #3D8B3D 0%, #2E6F2E 50%, #235523 100%), url('../../images/hero_energy.jpg') center/cover no-repeat; }
html[data-industry="logistics"] .cta-section { background: linear-gradient(135deg, #2D7BB8 0%, #226296 50%, #194A75 100%), url('../../images/hero_logistics.jpg') center/cover no-repeat; }
html[data-industry="ecommerce"] .cta-section { background: linear-gradient(135deg, #E8933A 0%, #C4782A 50%, #9A5E20 100%), url('../../images/hero_ecommerce.jpg') center/cover no-repeat; }
html[data-industry="finance"] .cta-section { background: linear-gradient(135deg, #C4A02A 0%, #A0841E 50%, #7D6515 100%), url('../../images/hero_finance.jpg') center/cover no-repeat; }
html[data-industry="catering"] .cta-section { background: linear-gradient(135deg, #D94A3A 0%, #B03A2C 50%, #8A2820 100%), url('../../images/hero_catering.jpg') center/cover no-repeat; }
html[data-industry="agriculture"] .cta-section { background: linear-gradient(135deg, #4A8B3F 0%, #3A6F32 50%, #2C5425 100%), url('../../images/hero_agriculture.jpg') center/cover no-repeat; }
html[data-industry="service"] .cta-section { background: linear-gradient(135deg, #D4607A 0%, #B04A62 50%, #8A3A4C 100%), url('../../images/hero_service.jpg') center/cover no-repeat; }
html[data-industry="tourism"] .cta-section { background: linear-gradient(135deg, #E8805A 0%, #C06840 50%, #965030 100%), url('../../images/hero_tourism.jpg') center/cover no-repeat; }
html[data-industry="legal"] .cta-section { background: linear-gradient(135deg, #2C4A7C 0%, #1E3560 50%, #152548 100%), url('../../images/hero_legal.jpg') center/cover no-repeat; }
html[data-industry="marketing"] .cta-section { background: linear-gradient(135deg, #D4205A 0%, #B01848 50%, #8A1236 100%), url('../../images/hero_marketing.jpg') center/cover no-repeat; }
html[data-industry="construction"] .cta-section { background: linear-gradient(135deg, #5A7A8C 0%, #446070 50%, #324A58 100%), url('../../images/hero_construction.jpg') center/cover no-repeat; }
html[data-industry="environment"] .cta-section { background: linear-gradient(135deg, #2D8B6B 0%, #226F55 50%, #195540 100%), url('../../images/hero_environment.jpg') center/cover no-repeat; }
html[data-industry="hr"] .cta-section { background: linear-gradient(135deg, #8B5A9E 0%, #704480 50%, #563264 100%), url('../../images/hero_hr.jpg') center/cover no-repeat; }
html[data-industry="transportation"] .cta-section { background: linear-gradient(135deg, #1A8BA8 0%, #147088 50%, #0E5870 100%), url('../../images/hero_transportation.jpg') center/cover no-repeat; }
html[data-industry="sports"] .cta-section { background: linear-gradient(135deg, #E85D3A 0%, #C0482A 50%, #963820 100%), url('../../images/hero_sports.jpg') center/cover no-repeat; }
html[data-industry="pet"] .cta-section { background: linear-gradient(135deg, #D4955A 0%, #B07840 50%, #8A5E30 100%), url('../../images/hero_pet.jpg') center/cover no-repeat; }
html[data-industry="elderly_care"] .cta-section { background: linear-gradient(135deg, #D4903A 0%, #B0752A 50%, #8A5A20 100%), url('../../images/hero_elderly_care.jpg') center/cover no-repeat; }
html[data-industry="beauty"] .cta-section { background: linear-gradient(135deg, #C4607A 0%, #A04862 50%, #7A3648 100%), url('../../images/hero_beauty.jpg') center/cover no-repeat; }
html[data-industry="fashion"] .cta-section { background: linear-gradient(135deg, #6B4E9E 0%, #523A80 50%, #3E2C62 100%), url('../../images/hero_fashion.jpg') center/cover no-repeat; }
html[data-industry="security"] .cta-section { background: linear-gradient(135deg, #3A5A8C 0%, #2C4570 50%, #1E3258 100%), url('../../images/hero_security.jpg') center/cover no-repeat; }
html[data-industry="pharma"] .cta-section { background: linear-gradient(135deg, #1A8B7A 0%, #146F62 50%, #0E5548 100%), url('../../images/hero_pharma.jpg') center/cover no-repeat; }
html[data-industry="smarthome"] .cta-section { background: linear-gradient(135deg, #D4882A 0%, #B07020 50%, #8A5618 100%), url('../../images/hero_smarthome.jpg') center/cover no-repeat; }
html[data-industry="crosstrade"] .cta-section { background: linear-gradient(135deg, #2A6B9E 0%, #1E5280 50%, #163E62 100%), url('../../images/hero_crosstrade.jpg') center/cover no-repeat; }
html[data-industry="gaming"] .cta-section { background: linear-gradient(135deg, #7B2DBE 0%, #622098 50%, #4A1678 100%), url('../../images/hero_gaming.jpg') center/cover no-repeat; }
html[data-industry="printing"] .cta-section { background: linear-gradient(135deg, #345080 0%, #263E64 50%, #1A2C4A 100%), url('../../images/hero_printing.jpg') center/cover no-repeat; }
html[data-industry="food"] .cta-section { background: linear-gradient(135deg, #E87830 0%, #C05E20 50%, #984818 100%), url('../../images/hero_food.jpg') center/cover no-repeat; }
html[data-industry="telecom"] .cta-section { background: linear-gradient(135deg, #3A6BC5 0%, #2A5098 50%, #1E3C70 100%), url('../../images/hero_telecom.jpg') center/cover no-repeat; }
html[data-industry="steel"] .cta-section { background: linear-gradient(135deg, #6B5B4F 0%, #524438 50%, #3D3028 100%), url('../../images/hero_steel.jpg') center/cover no-repeat; }
html[data-industry="chemical"] .cta-section { background: linear-gradient(135deg, #1A7A8B 0%, #145E6B 50%, #0E4650 100%), url('../../images/hero_chemical.jpg') center/cover no-repeat; }
html[data-industry="furniture"] .cta-section { background: linear-gradient(135deg, #B8783A 0%, #945E2A 50%, #704520 100%), url('../../images/hero_furniture.jpg') center/cover no-repeat; }
html[data-industry="aerospace"] .cta-section { background: linear-gradient(135deg, #2E5A88 0%, #1E4060 50%, #142E48 100%), url('../../images/hero_aerospace.jpg') center/cover no-repeat; }
.cta-title {
    font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: #fff;
    text-align: center; margin-bottom: 12px;
}
.cta-sub { font-size: 18px; color: rgba(253, 251, 247, 0.85); text-align: center; margin-bottom: 48px; }
.cta-form {
    max-width: 640px; margin: 0 auto; background: rgba(255,255,255,0.12);
    backdrop-filter: blur(20px); border-radius: var(--radius); padding: 48px;
    border: 1px solid rgba(255,255,255,0.15); position: relative; z-index: 1;
}
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; color: rgba(255,255,255,0.9); font-size: 14px;
    font-weight: 600; margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 14px 16px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1); color: #fff; font-size: 15px;
    font-family: inherit; transition: var(--transition); outline: none;
}
.form-group input::placeholder, .form-group textarea::placeholder {
    color: rgba(255,255,255,0.5);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15);
}
.form-group select option { color: #1e293b; background: #fff; }
.form-group textarea { height: 100px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.submit-btn {
    width: 100%; padding: 15px; background: #fff; color: var(--primary);
    border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: var(--transition); margin-top: 4px;
    font-family: var(--font-sans);
}
.submit-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.success-msg { display: none; text-align: center; padding: 30px; }
.success-msg .check { font-size: 56px; margin-bottom: 12px; }
.success-msg h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.success-msg p { color: rgba(253, 251, 247, 0.85); }

/* === Toast === */
.toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0, 0, 0, 0.85); color: #fff; padding: 16px 32px;
    border-radius: 12px; font-size: 15px; font-weight: 500;
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px); text-align: center;
    max-width: 400px; line-height: 1.5;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* === Footer === */
footer {
    background: #1E1B18; color: rgba(255,255,255,0.6);
    padding: 40px 0; text-align: center;
    position: relative; z-index: 1;
}
footer .hotline { font-size: 18px; color: #fff; font-weight: 600; margin-top: 8px; }

/* === Scroll Top === */
.scroll-top {
    position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; opacity: 0; visibility: hidden;
    transition: var(--transition); z-index: 99;
    backdrop-filter: blur(10px); box-shadow: var(--shadow);
}
.scroll-top.visible { opacity: 1; visibility: visible; }
.scroll-top:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* === Animations === */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate-left { opacity: 0; transform: translateX(-40px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate-right { opacity: 0; transform: translateX(40px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate-scale { opacity: 0; transform: scale(0.92); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate.visible, .animate-left.visible, .animate-right.visible, .animate-scale.visible {
    opacity: 1; transform: translateY(0) translateX(0) scale(1);
}

.card-grid-animate > * {
    opacity: 0; transform: translateY(24px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-grid-animate.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(2) { transition-delay: 0.06s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(3) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(4) { transition-delay: 0.18s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(5) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(6) { transition-delay: 0.30s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(7) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(8) { transition-delay: 0.42s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(9) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(10) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(11) { transition-delay: 0.60s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(12) { transition-delay: 0.66s; opacity: 1; transform: translateY(0); }
.card-grid-animate.visible > *:nth-child(n+13) { transition-delay: 0.72s; opacity: 1; transform: translateY(0); }

/* === Gradient Text === */
.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === Hover Glow Effects === */
.pain-card:hover, .adv-card:hover, .sol-item:hover, .sub-card:hover {
    box-shadow: 0 12px 48px rgba(var(--primary-rgb), 0.2) !important;
}

/* === User Tracking: Card Selected State === */
.pain-card-modern.tracking-selected,
.service-card.tracking-selected,
.case-card.tracking-selected,
.adv-card-modern.tracking-selected,
.pain-card.tracking-selected,
.solution-card.tracking-selected,
.adv-card.tracking-selected,
.feature-card.tracking-selected {
    border-color: rgba(var(--primary-rgb), 0.5) !important;
    box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.22) !important;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--primary-light) 100%) !important;
    transform: translateY(-4px);
    transition: all 0.3s ease;
}
.tech-item.tracking-selected {
    border-color: rgba(var(--primary-rgb), 0.5) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.25) !important;
    background: var(--primary-light) !important;
    transform: scale(1.08);
}
.process-step.tracking-selected {
    border-color: rgba(var(--primary-rgb), 0.5) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.22) !important;
}

/* === User Tracking: Like & Feel Buttons === */
.tracking-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.tracking-like, .tracking-feel {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.85);
    color: var(--text-muted);
    line-height: 1.4;
    backdrop-filter: blur(4px);
}
.tracking-like:hover, .tracking-feel:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    color: var(--primary);
}
.tracking-like.active {
    background: rgba(196, 69, 54, 0.12);
    border-color: rgba(196, 69, 54, 0.4);
    color: #C44536;
}
.tracking-like .heart-icon { font-size: 14px; }
.tracking-feel.active {
    background: var(--primary-light);
    border-color: rgba(var(--primary-rgb), 0.4);
    color: var(--primary);
}

/* Ensure card containers are positioned for absolute tracking buttons */
.pain-card-modern, .service-card, .case-card, .adv-card-modern,
.pain-card, .solution-card, .adv-card, .feature-card {
    position: relative;
}
.tech-item { position: relative; }
.process-step { position: relative; }

/* === Responsive === */
@media (max-width: 1024px) {
    .sub-grid { grid-template-columns: repeat(2, 1fr); }
    .pain-cards { grid-template-columns: repeat(2, 1fr); }
    .advantage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .hero { padding: 120px 0 60px; }
    .hero h1 { font-size: 28px; }
    .nav-links { display: none; }
    .story-section, .story-section.reverse { flex-direction: column; }
    .story-image { min-height: 200px; }
    .sub-grid { grid-template-columns: 1fr; }
    .pain-cards { grid-template-columns: 1fr; }
    .solution-grid { grid-template-columns: 1fr; }
    .advantage-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .problems-list ul { grid-template-columns: 1fr; }
    .problems-grid { grid-template-columns: 1fr; }
    .stats-row { gap: 12px; }
    .stat-card { min-width: 140px; }
    .form-row { grid-template-columns: 1fr; }
    .cta-form { padding: 24px; }
    .section { padding: 60px 0; }
    .section-title { font-size: 24px; }
}