/* ===== OpenAI Sans Font Declarations ===== */
    @font-face {
        font-family: 'OpenAI Sans';
        src: url('../font/OpenAISans-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'OpenAI Sans';
        src: url('../font/OpenAISans-RegularItalic.woff2') format('woff2');
        font-weight: 400;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'OpenAI Sans';
        src: url('../font/OpenAISans-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'OpenAI Sans';
        src: url('../font/OpenAISans-Semibold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'OpenAI Sans';
        src: url('../font/OpenAISans-Semibold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'OpenAI Sans';
        src: url('../font/OpenAISans-Semibold.woff2') format('woff2');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'OpenAI Sans';
        src: url('../font/OpenAISans-Semibold.woff2') format('woff2');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'OpenAI Sans Arabic';
        src: url('../font/OpenAISansArabicVariable.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }

    /* ===== Global Font Variables ===== */
    :root {
        --font-main: 'OpenAI Sans', -apple-system, sans-serif;
        --font-display: 'OpenAI Sans', -apple-system, sans-serif;
    }

    .glass {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Common Brand Colors via CSS */
    .brand-bg {
        background: #396afc;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #2948ff, #396afc);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #2948ff, #396afc);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        color: white;
    }

    .brand-bg:hover {
        opacity: 0.95;
    }

    .text-gradient {
        background: #396afc;
        background: -webkit-linear-gradient(to right, #2948ff, #396afc);
        background: linear-gradient(to right, #2948ff, #396afc);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        display: inline-block;
    }

    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
    }

    .shadow-premium {
        box-shadow:
            0 50px 100px -20px rgba(0, 0, 0, 0.15),
            0 30px 60px -15px rgba(0, 0, 0, 0.1),
            0 10px 20px -5px rgba(0, 0, 0, 0.05),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 1);
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pricing-card {
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.03);
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pricing-card:hover {
        transform: translateY(-16px);
        box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.1);
    }

    /* Global Background Consistency */
    body {
        background-color: #fafafa !important;
        transition: background-color 0.3s ease;
        font-family: var(--font-main) !important;
    }

    button, input, optgroup, select, textarea {
        font-family: inherit;
    }