/* =========================================================
   BASE / RESET
   ========================================================= */
/* Los orbes decorativos y el halo del movil se salen por los lados a proposito.
   `clip` en el <html> los recorta sin crear contenedor de scroll (a diferencia
   de `hidden`, que romperia cualquier `position: sticky` de dentro). */
html { overflow-x: clip; }

body {
    font-family: 'Inter', sans-serif;
    color: white;
    overflow-x: hidden;
    margin: 0;
    image-rendering: -webkit-optimize-contrast;
    /* Atmospheric multi-radial backdrop, mirrors the curriculum brand banner */
    background:
        radial-gradient(at 16% 18%, rgba(56, 145, 166, 0.22) 0px, transparent 52%),
        radial-gradient(at 82% 24%, rgba(45, 212, 255, 0.14) 0px, transparent 50%),
        radial-gradient(at 72% 78%, rgba(156, 39, 176, 0.20) 0px, transparent 55%),
        radial-gradient(at 22% 88%, rgba(255, 152, 0, 0.12) 0px, transparent 50%),
        var(--background);
    background-attachment: fixed;
}

::selection { background: var(--primary); color: #fff; }

/* La barra de arriba es fija: sin esto, al saltar a #features o #showcase desde
   el menú, el título de la sección quedaba debajo de ella. */
/* `:where` para no pisar a quien ya fija el suyo (#download, scroll-mt-24). */
:where(section[id]) { scroll-margin-top: 80px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #07111c; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }