/* Critical CSS - loads FIRST */
        body {
            font-family: -apple-system, sans-serif;
            margin: 0;
            display: grid;
            grid-template-rows: auto auto 1fr auto;
            min-height: 100%
        }

        .hero-bg {
            background: linear-gradient(135deg, #f8faff, #e8f2ff);
            padding: 2rem 0
        }

        .hero-title {
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: bold;
            color: #1A2B49;
            margin: 0 0 1.5rem;
            line-height: 1.1
        }

        .hero-text {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            color: #374151;
            margin: 0 0 2rem;
            font-weight: 500
        }

        .hero-btn {
            background: #1A2B49;
            color: white;
            padding: 1.25rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            font-size: clamp(1.25rem, 3vw, 1.5rem);
            display: inline-block;
            margin: 0.5rem
        }

        .content-for-layout {
            display: block
        }

        #MainContent {
            display: block
        }