/* Homepage depth pass (24 Oct 2026). Loaded on the homepage only.
   The hero and showcase already have depth; the sections below them were flat night blue.
   This file adds the same quiet layering there: soft pools of raised blue (#0c1c2b),
   champagne-gold hairlines (#e4c48e) and one raised closing panel. No stars outside the hero,
   no new colours, nothing that moves. The light theme gets warm-paper equivalents. */

/* A faint second light source low on the page, so the long dark middle is not one flat tone. */
.site-layout{background:radial-gradient(ellipse at 85% 5%,#142b3b66,transparent 27%),radial-gradient(ellipse at 8% 58%,#0f2335aa,transparent 34%),radial-gradient(ellipse at 92% 82%,#0f233599,transparent 32%),var(--navy)}

/* Promise strip under the hero: a slightly raised band with a gold hairline on top. */
.promises{position:relative;border-top-color:transparent;background:linear-gradient(180deg,#0c1c2b,#081a29 70%,#071725)}
.promises:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#e4c48e73 35%,#e4c48e73 65%,transparent);pointer-events:none}
.promise-list strong{letter-spacing:-.01em}

/* Working method: a soft pool of light behind the steps; the step markers get a quiet glow. */
#werkwijze{position:relative;isolation:isolate}
#werkwijze:before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:0;bottom:-10%;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 38%,#0c1c2b,transparent 70%),radial-gradient(ellipse 30% 40% at 88% 20%,#e4c48e0d,transparent 70%)}
#werkwijze .process-marker{box-shadow:0 0 0 5px #e4c48e12,0 10px 24px #02080d80}
@container (min-width:751px){#werkwijze .process-step:not(:last-child)::after{background:linear-gradient(90deg,#e4c48e99,#e4c48e33 55%,#334858)}}
.lab-aside{background:linear-gradient(160deg,#112638,#0a1926 75%);box-shadow:inset 0 1px 0 #eef8ff10,0 18px 40px #01070c59}

/* About: the sign-off line gets a gold hairline, and a faint warm glow sits behind the text. */
.about-home{position:relative;isolation:isolate}
.about-home:before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:-6%;bottom:-6%;pointer-events:none;background:radial-gradient(ellipse 45% 70% at 78% 50%,#0c1c2b,transparent 70%)}
.about-home .about-signoff{padding-top:20px;position:relative}
.about-home .about-signoff:before{content:"";position:absolute;top:0;left:0;width:48px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

/* Questions: an open question is marked by a gold hairline, not by a different background. */
.faq details{transition:border-color var(--duration) var(--ease-out)}
.faq details[open]{border-bottom-color:#e4c48e66}
.faq details[open] summary{color:var(--gold)}

/* Closing call to action: one raised panel in the same material as the showcase cards. */
#contact .contact-block{position:relative;width:86%;max-width:1110px;margin:0 auto calc(var(--section-space) * .9);padding:56px 48px;border:1px solid #9cadba2e;border-radius:var(--radius-xl);background:radial-gradient(ellipse at 100% 0%,#e4c48e1a,transparent 48%),radial-gradient(ellipse at 0% 100%,#19344966,transparent 55%),linear-gradient(160deg,#112638 0%,#0a1926 72%);box-shadow:inset 0 1px 0 #eef8ff12,0 30px 70px #01070c73}
#contact .contact-block:before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#e4c48e80,transparent);pointer-events:none}
#contact .contact-block h2{letter-spacing:-.035em}
@container (max-width:750px){#contact .contact-block{padding:40px 28px}}
@container (max-width:420px){#contact .contact-block{width:88%;padding:32px 22px}}

/* Footer: the top hairline fades from gold into the usual line colour. */
.site-footer{border-top-color:transparent;background:linear-gradient(90deg,#e4c48e66,#334858 45%,#33485800) top/100% 1px no-repeat}

/* Light theme: warm paper instead of night blue, gold hairlines in the darker light-mode gold. */
:root[data-theme="light"] .site-layout{background:radial-gradient(ellipse at 85% 0%,#e4c48e29,transparent 28%),radial-gradient(ellipse at 8% 58%,#eeece5,transparent 34%),radial-gradient(ellipse at 92% 82%,#f1e8d7cc,transparent 32%),var(--navy)}
:root[data-theme="light"] .promises{background:linear-gradient(180deg,#f1ede3,#eeece5)}
:root[data-theme="light"] .promises:before{background:linear-gradient(90deg,transparent,#79562159 35%,#79562159 65%,transparent)}
:root[data-theme="light"] #werkwijze:before{background:radial-gradient(ellipse 60% 55% at 50% 38%,#eeece5,transparent 70%),radial-gradient(ellipse 30% 40% at 88% 20%,#e4c48e33,transparent 70%)}
:root[data-theme="light"] #werkwijze .process-marker{box-shadow:0 0 0 5px #79562114,0 10px 24px #2738291f}
@container (min-width:751px){:root[data-theme="light"] #werkwijze .process-step:not(:last-child)::after{background:linear-gradient(90deg,#795621b3,#79562140 55%,#c9ceca)}}
:root[data-theme="light"] .lab-aside{background:linear-gradient(160deg,#f4f1ea,#eeece5 75%);box-shadow:inset 0 1px 0 #ffffffb3,0 18px 40px #27382914}
:root[data-theme="light"] .about-home:before{background:radial-gradient(ellipse 45% 70% at 78% 50%,#eeece5,transparent 70%)}
:root[data-theme="light"] .faq details[open]{border-bottom-color:#79562166}
:root[data-theme="light"] #contact .contact-block{border-color:#27382926;background:radial-gradient(ellipse at 100% 0%,#e4c48e40,transparent 48%),radial-gradient(ellipse at 0% 100%,#d7dfe866,transparent 55%),linear-gradient(160deg,#f7f4ed 0%,#eeece5 72%);box-shadow:inset 0 1px 0 #ffffffcc,0 30px 60px #2738291f}
:root[data-theme="light"] #contact .contact-block:before{background:linear-gradient(90deg,transparent,#79562180,transparent)}
:root[data-theme="light"] .site-footer{background:linear-gradient(90deg,#79562180,#c9ceca 45%,#c9ceca00) top/100% 1px no-repeat}