@font-face {
    font-family: "Manrope";
    src: url("./fonts/manrope-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("./fonts/manrope-500.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("./fonts/manrope-600.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("./fonts/manrope-700.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("./fonts/manrope-800.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Material Symbols Outlined";
    src: url("./fonts/material-symbols-outlined-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

body { background-color: #000f21; color: #d7e6ff; font-family: 'Manrope', sans-serif; }
.velocity-gradient { background: linear-gradient(135deg, #5cb8fd 0%, #49a8ec 100%); }
.glass-panel { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Content HTML tags from old design */
.content-area h2 { font-size: 1.75rem; font-weight: 800; color: #d7e6ff; margin-top: 2rem; margin-bottom: 1rem; }
.content-area h3 { font-size: 1.5rem; font-weight: 700; color: #d7e6ff; margin-top: 2rem; margin-bottom: 1rem; }
.content-area h4 { font-size: 1.25rem; font-weight: 700; color: #d7e6ff; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.content-area h5 { font-size: 1.125rem; font-weight: 700; color: #d7e6ff; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.content-area h6 { font-size: 1rem; font-weight: 700; color: #92add2; margin-top: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.content-area ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; }
.content-area li { margin-bottom: 0.25rem; }
.content-area p { margin-bottom: 1rem; }
.content-area a { color: #5cb8fd; text-decoration: none; }
.content-area a:hover { text-decoration: underline; }
.content-area strong, .content-area b { font-weight: 700; color: #d7e6ff; }
.content-area code { background-color: #001a34; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: monospace; font-size: 0.875rem; color: #d7e6ff; }