/* One continuous colour flow for the long front pages (William 2026-10-03: the colours were "cut off" at different parts
   of the page). Before: every section painted its own background in a 1000px box, alternating dark/warm, so the colour
   stopped at the content column and changed with a hard edge between sections. Now the page carries ONE gradient from top
   to bottom, the sections are transparent, and the warm ones keep their character as a soft full-width glow that fades
   out on every side. Loaded after each page's own <style>. */
html {
    background: #0a0605 linear-gradient(180deg,
        #100806 0%, #1c100b 10%, #27160e 24%, #1f120c 38%, #2a180f 52%, #1f120c 66%, #1c100b 82%, #0a0605 100%);
    min-height: 100%;
}
body { background: transparent; overflow-x: clip; }

/* the hero keeps its golden glow, but no own base colour: the page gradient shows through */
.hero {
    background: radial-gradient(ellipse at center, rgba(218, 165, 32, 0.18) 0%, rgba(180, 130, 30, 0.06) 50%, transparent 80%),
                radial-gradient(ellipse at 30% 30%, rgba(180, 120, 40, 0.1) 0%, transparent 50%);
}

/* sections: no boxes, no edges */
.section-dark, .section-dark.fade-out, .section-warm, .cta { background: transparent; }
.section-warm, .cta { position: relative; isolation: isolate; }
.section-warm::before, .cta::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(200, 150, 60, 0.15) 0%, rgba(170, 120, 50, 0.06) 45%, transparent 75%);
}
.cta::before {
    background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(210, 160, 70, 0.16) 0%, rgba(170, 120, 40, 0.06) 50%, transparent 80%);
}

/* landing pages (index / index-en): the same treatment for their own section names */
.features, .difference { background: transparent; position: relative; isolation: isolate; }
.features::before, .difference::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(200, 150, 60, 0.12) 0%, rgba(170, 120, 50, 0.05) 45%, transparent 75%);
}
.difference::before {
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(200, 150, 60, 0.15) 0%, rgba(170, 120, 50, 0.06) 45%, transparent 75%);
}
/* footers sit on the end of the page gradient, not on their own block */
.footer { background: transparent; }