/* roulang page: index */
:root {
            --primary: #0F766E;
            --primary-dark: #042F2E;
            --secondary: #14B8A6;
            --accent: #F97316;
            --text-main: #0F172A;
            --text-body: #334155;
            --text-muted: #64748B;
            --bg-light: #F8FAFC;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--text-body);
            background-color: var(--bg-light);
            -webkit-tap-highlight-color: transparent;
        }
        .text-main { color: var(--text-main); }
        .text-body { color: var(--text-body); }
        .text-muted { color: var(--text-muted); }
        .hero-pattern {
            background-image: linear-gradient(135deg, rgba(15, 118, 110, 0.94) 0%, rgba(4, 47, 46, 0.98) 100%), url('/assets/images/6ccf5c5802ff2ae7.webp');
            background-size: cover;
            background-position: center;
        }
        .deep-banner {
            background-image: linear-gradient(180deg, rgba(4, 47, 46, 0.97) 0%, rgba(15, 23, 42, 0.98) 100%), url('/assets/images/ddeef4b445892e5a.webp');
            background-size: cover;
            background-position: center;
        }
        .card-elevated {
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .card-elevated:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px -8px rgba(15, 118, 110, 0.12);
            border-color: rgba(20, 184, 166, 0.4);
        }