*, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --bg: oklch(98.5% 0.008 252);
            --surface: #ffffff;
            --navy: oklch(22% 0.08 258);
            --navy-mid: oklch(35% 0.10 258);
            --blue: oklch(52% 0.20 252);
            --blue-light: oklch(94% 0.06 252);
            --blue-mid: oklch(62% 0.16 252);
            --purple: oklch(55% 0.16 285);
            --purple-light: oklch(94% 0.05 285);
            --text: oklch(30% 0.05 258);
            --muted: oklch(58% 0.04 258);
            --border: oklch(90% 0.02 252);
            --shadow-sm: 0 1px 3px oklch(22% 0.08 258 / 0.08), 0 1px 2px oklch(22% 0.08 258 / 0.05);
            --shadow-md: 0 4px 16px oklch(22% 0.08 258 / 0.10), 0 1px 4px oklch(22% 0.08 258 / 0.06);
            --shadow-lg: 0 8px 32px oklch(22% 0.08 258 / 0.12), 0 2px 8px oklch(22% 0.08 258 / 0.08);
            --radius: 16px;
            --radius-sm: 10px;
            --radius-pill: 999px;
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 3px;
        }

        #root {
            min-height: 100vh;
        }

        /* Utility */
        .container {
            max-width: 1160px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .section {
            padding: 96px 0;
        }

        .section-sm {
            padding: 64px 0;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--blue-light);
            color: var(--blue);
            font-size: 13px;
            font-weight: 600;
            padding: 4px 14px;
            border-radius: var(--radius-pill);
            letter-spacing: 0.02em;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

            .tag.purple {
                background: var(--purple-light);
                color: var(--purple);
            }

        h2.section-title {
            font-size: clamp(28px, 4vw, 40px);
            font-weight: 800;
            color: var(--navy);
            line-height: 1.2;
            margin-bottom: 16px;
        }

        p.section-sub {
            font-size: 17px;
            color: var(--muted);
            max-width: 560px;
            line-height: 1.7;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        @media (max-width: 900px) {
            .grid-3 {
                grid-template-columns: repeat(2, 1fr);
            }

            .section {
                padding: 64px 0;
            }
        }

        @media (max-width: 600px) {
            .grid-3, .grid-2 {
                grid-template-columns: 1fr;
            }

            .section {
                padding: 48px 0;
            }
        }