/* De glaslaag van de site (founder 11 nov 2026). Gedeeld door alle pagina's die glas hebben: de negen
 * homepages (altijd, scripts/home-lively.mjs) en de rest van de site via de Worker (src/site-glass.ts: met
 * ?glass=1 als voorbeeld, live met de schakelaar SITE_GLASS). Niet op de juridische pagina's (data-no-glass,
 * scripts/glass-mark.mjs) en niet op de cursuspagina's van de Academy.
 *
 *   html[data-glass]        het glas: kop, uitklapmenu's, de knoppen in de kop en de gedeelde bouwstenen
 *   html[data-glass-glow]   een paar gloeden achter wat ertoe doet: de landing en de Academy-hoofdpagina
 *                           (js/site-glass.js; sinds 11 en 12 nov 2026 in plaats van de rook)
 *   html[data-glass-smoke]  de rookwolken als achtergrond over de hele pagina; staat nergens meer aan, blijft
 *                           om terug te kunnen (daar lopen de secties en de voet door op die achtergrond)
 *
 * Wat alleen de homepage heeft (hero, schuifkaarten) staat in css/glass.css onder html[data-glass-home].
 *
 * TWEE SOORTEN GLAS, om soepel te scrollen:
 *   - echt glas (backdrop-filter, live blur) alleen waar scherpe inhoud onder het glas door schuift: de kop en
 *     de uitklapmenu's;
 *   - "glas van licht" overal elders: doorschijnend, met een dunne lichte rand, een binnenlicht aan de
 *     bovenkant, een glans en een zachte schaduw. Een live blur op grote of veel vlakken laat scrollen haperen.
 * Invoervelden blijven dicht en duidelijk: doorschijnende velden waarin je typt lezen slecht. */

html[data-glass] {
	--gl-edge: rgba(255, 255, 255, 0.6);
	--gl-edge-soft: rgba(255, 255, 255, 0.24);
	--gl-hi: rgba(255, 255, 255, 0.5);
	--gl-fill: rgba(255, 255, 255, 0.5);
	--gl-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.3), 0 10px 24px -14px rgba(0, 0, 0, 0.14);
}
html[data-glass][data-theme="dark"] {
	--gl-edge: rgba(255, 255, 255, 0.16);
	--gl-edge-soft: rgba(255, 255, 255, 0.1);
	--gl-hi: rgba(255, 255, 255, 0.14);
	--gl-fill: rgba(255, 255, 255, 0.06);
	--gl-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}
/* Gedeelde maten voor de bouwstenen. Op een gewone (witte) pagina heeft het glas geen rook achter zich: dan
 * definieert een zachte rand het vlak, en is het iets dichter. */
html[data-glass] {
	--gl-card: color-mix(in srgb, var(--card) 72%, transparent);
	--gl-card-edge: color-mix(in srgb, var(--line) 80%, rgba(255, 255, 255, 0.9));
	--gl-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.14) 34%, rgba(255, 255, 255, 0) 62%);
	--gl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 18px 40px -26px rgba(0, 0, 0, 0.22), 0 2px 6px -3px rgba(0, 0, 0, 0.06);
	--gl-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 26px 50px -24px rgba(0, 0, 0, 0.28), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
}
html[data-glass][data-theme="dark"] {
	--gl-card: color-mix(in srgb, var(--card) 70%, transparent);
	--gl-card-edge: rgba(255, 255, 255, 0.11);
	--gl-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0) 62%);
	--gl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 40px -26px rgba(0, 0, 0, 0.8);
	--gl-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 26px 50px -24px rgba(0, 0, 0, 0.9);
}
html[data-glass][data-glass-smoke] {
	--gl-card: color-mix(in srgb, var(--card) 62%, transparent);
	--gl-card-edge: var(--gl-edge);
}

/* ================================================================== rookwolken (nergens meer aan sinds 12 nov 2026) */
html[data-glass-smoke] body {
	background: transparent;
}
.gl-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
/* Het spoor met de wolken; js/site-glass.js schuift het met parallax (een derde van de scrollsnelheid). Zelf
 * tekent het niets, dus het kost geen geheugen; alleen de wolken erin worden getekend. */
.gl-track {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	will-change: transform;
}
.gl-c {
	position: absolute;
	display: block;
}
.gl-c i {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 50%, transparent) 50%, transparent 100%);
}
.gl-c .k1 { --c: rgba(240, 168, 86, 0.3); }
.gl-c .k2 { --c: rgba(244, 160, 150, 0.22); }
.gl-c .k3 { --c: rgba(228, 120, 70, 0.16); }
html[data-glass-smoke][data-theme="dark"] .gl-c .k1 { --c: rgba(170, 60, 40, 0.34); }
html[data-glass-smoke][data-theme="dark"] .gl-c .k2 { --c: rgba(143, 12, 44, 0.3); }
html[data-glass-smoke][data-theme="dark"] .gl-c .k3 { --c: rgba(210, 154, 55, 0.18); }
@media (prefers-reduced-motion: no-preference) {
	.gl-c i { will-change: transform; }
	.gl-c:nth-child(3n + 1) i { animation: gl-drift-a 40s ease-in-out infinite alternate; }
	.gl-c:nth-child(3n + 2) i { animation: gl-drift-b 46s ease-in-out -10s infinite alternate; }
	.gl-c:nth-child(3n) i { animation: gl-drift-a 52s ease-in-out -20s infinite alternate; }
}
@keyframes gl-drift-a {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(-5%, 4%, 0) scale(1.08); }
	100% { transform: translate3d(4%, -3%, 0) scale(0.96); }
}
@keyframes gl-drift-b {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(6%, -4%, 0) scale(0.94); }
	100% { transform: translate3d(-3%, 5%, 0) scale(1.06); }
}
/* De voet loopt door op dezelfde achtergrond, zonder scheidingslijn (founder, 11 nov 2026). */
html[data-glass-smoke] .site-footer {
	background: transparent;
	border-top: 0;
}

/* ================================================================== de gloed (data-glass-glow)
 * Geen rook over de hele pagina, maar een paar gloeden, elk achter iets belangrijks (founder 11 en 12 nov 2026):
 * op de landing het dashboard, de telefoon en het slotpaneel (css/glass.css), op de Academy-landing het
 * cursusvenster, de prijzen en het slotpaneel (hieronder). js/site-glass.js legt ze neer. Licht: oker, abrikoos
 * en zacht rozé; donker: wijnrood, amber en koper. Langzaam drijvend, stil bij minder beweging. */
.sg-glow {
	position: absolute;
	z-index: -1;
	display: block;
	pointer-events: none;
	--c1: rgba(232, 168, 56, 0.5);
	--c2: rgba(255, 170, 120, 0.46);
	--c3: rgba(244, 160, 160, 0.4);
}
html[data-theme="dark"] .sg-glow {
	--c1: rgba(150, 18, 48, 0.6);
	--c2: rgba(210, 150, 55, 0.32);
	--c3: rgba(190, 100, 45, 0.42);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .sg-glow {
		--c1: rgba(150, 18, 48, 0.6);
		--c2: rgba(210, 150, 55, 0.32);
		--c3: rgba(190, 100, 45, 0.42);
	}
}
.sg-glow i {
	position: absolute;
	display: block;
	border-radius: 50%;
	will-change: transform;
}
.sg-glow .g1 { left: 6%; top: 4%; width: 62%; height: 70%; background: radial-gradient(closest-side, var(--c1), transparent); }
.sg-glow .g2 { left: 38%; top: 28%; width: 58%; height: 66%; background: radial-gradient(closest-side, var(--c2), transparent); }
.sg-glow .g3 { left: 14%; top: 46%; width: 52%; height: 50%; background: radial-gradient(closest-side, var(--c3), transparent); }
@media (prefers-reduced-motion: no-preference) {
	.sg-glow .g1 { animation: gl-glow-1 26s ease-in-out infinite alternate; }
	.sg-glow .g2 { animation: gl-glow-2 21s ease-in-out -6s infinite alternate; }
	.sg-glow .g3 { animation: gl-glow-3 31s ease-in-out -12s infinite alternate; }
}
@keyframes gl-glow-1 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50% { transform: translate3d(-9%, 7%, 0) rotate(24deg) scale(1.14, 0.92); }
	100% { transform: translate3d(5%, -4%, 0) rotate(48deg) scale(0.96, 1.08); }
}
@keyframes gl-glow-2 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50% { transform: translate3d(8%, -10%, 0) rotate(-30deg) scale(0.9, 1.12); }
	100% { transform: translate3d(-6%, 6%, 0) rotate(-52deg) scale(1.1, 0.95); }
}
@keyframes gl-glow-3 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50% { transform: translate3d(12%, -6%, 0) rotate(36deg) scale(1.18, 0.88); }
	100% { transform: translate3d(4%, 8%, 0) rotate(70deg) scale(0.94, 1.06); }
}

/* ================================================================== kop en uitklapmenu's (echt glas) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* Het glas van de kop zit op een laag erachter (::before), niet op de kop zelf. Een element met
	 * backdrop-filter is een "backdrop root": glas dáárbinnen (de uitklapmenu's) ziet alleen wat in de kop
	 * staat, niet de pagina erachter, en bleef daardoor een dicht vlak (founder, 11 nov 2026). */
	html[data-glass] .site-header {
		background: transparent;
		border-bottom-color: color-mix(in srgb, var(--line) 55%, transparent);
	}
	html[data-glass] .site-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: color-mix(in srgb, var(--paper) 62%, transparent);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
	}
	/* Duidelijk glas, ook boven een witte pagina (founder, 11 nov 2026: "nog steeds niet glassy"): veel
	 * doorschijnender, met een glans van linksboven en een lichte rand; de blur houdt de tekst leesbaar. */
	html[data-glass] .site-header :is(.nav-morph, .mega-box, .hsearch-panel, .lang-menu ul) {
		background:
			linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0) 70%),
			color-mix(in srgb, var(--card) 42%, transparent);
		-webkit-backdrop-filter: blur(26px) saturate(200%);
		backdrop-filter: blur(26px) saturate(200%);
		border-color: rgba(255, 255, 255, 0.75);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.04), 0 30px 60px -24px rgba(0, 0, 0, 0.32);
	}
	html[data-glass][data-theme="dark"] .site-header :is(.nav-morph, .mega-box, .hsearch-panel, .lang-menu ul) {
		background:
			linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 70%),
			color-mix(in srgb, var(--card) 48%, transparent);
		border-color: rgba(255, 255, 255, 0.16);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 60px -24px rgba(0, 0, 0, 0.85);
	}
	/* Met het meeschuivende paneel (.nav-morph, nav.js) is dát het glas; het menu erboven blijft doorzichtig,
	 * anders ligt er glas op glas (en zag je eerder alleen het dichte witte paneel eronder). */
	html[data-glass] .site-header .is-morph .mega-box,
	html[data-glass] .is-morph .site-header .mega-box,
	html[data-glass] .site-header.is-morph .mega-box {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-color: transparent;
		box-shadow: none;
	}
}
/* De knoppen in de kop kleuren mee met de kop (founder, 11 nov 2026). */
html[data-glass] .site-header .hsearch:not(.is-open) .hsearch-bar {
	background: color-mix(in srgb, var(--paper) 30%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent);
}
html[data-glass] .site-header .lang-menu summary {
	background: color-mix(in srgb, var(--hover) 45%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 45%, transparent);
}
html[data-glass] .site-header .lang-menu summary:hover,
html[data-glass] .site-header .lang-menu[open] summary {
	background: color-mix(in srgb, var(--hover) 75%, transparent);
}
/* Alleen dicht: open is de knop het kruisje in het zoekveld, zonder vlakje (zoals op de site). */
html[data-glass] .site-header .hsearch:not(.is-open) .hsearch-btn:hover {
	background: color-mix(in srgb, var(--hover) 60%, transparent);
}
/* In de menu's: zachte hover, de promotiekaarten als donker glas. */
/* De vlakken binnen de menu's (de kolom rechts, de balk onderin) waren dicht grijs; nu een tint op het glas. */
html[data-glass] .site-header :is(.mj-grip, .mega-foot) {
	background: color-mix(in srgb, var(--paper-2) 28%, transparent);
}
/* Niet de promotiekaarten (Grip, de bol-tool): die houden hun eigen vlak, ook onder de muis. */
html[data-glass] .site-header :is(.mega-item:not(.tools-promo-card):hover, .mega-item:not(.tools-promo-card)[aria-current="page"], .lang-menu a:hover) {
	background: color-mix(in srgb, var(--hover) 70%, transparent);
}
html[data-glass] .site-header .mega-item.tools-promo-card {
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px -14px rgba(0, 0, 0, 0.4);
}

/* ================================================================== gedeelde bouwstenen (glas van licht)
 * Eén recept voor alles wat steeds terugkomt; een nieuwe pagina met deze bouwstenen is vanzelf glas.
 * De homepage regelt zijn eigen kaarten en prijzen in css/glass.css, dus hier :not([data-glass-home]). */

/* Kaarten: tool-tegels, functiekaarten, prijskaarten, de uitkomst van een rekentool. */
html[data-glass]:not([data-glass-home]) :is(.tp-card, .ft-card, .plan:not(.plan-rec), .calc-result, .article-sellers, .article-usp, .ld-box) {
	background: var(--gl-sheen), var(--gl-card);
	border-color: var(--gl-card-edge);
	box-shadow: var(--gl-card-shadow);
	transition: border-color 0.15s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
html[data-glass]:not([data-glass-home]) :is(.tp-card, .ft-card):hover {
	box-shadow: var(--gl-card-shadow-hover);
	transform: translateY(-1px);
}
/* De aanbevolen prijskaart houdt zijn eigen kleur (zwart in licht, pricing-cards.css): alleen het licht van glas
 * erop, geen andere achtergrond (anders werd hij wit, met witte tekst). */
html[data-glass]:not([data-glass-home]) .plan.plan-rec {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 22px 46px -24px rgba(0, 0, 0, 0.45);
}

/* De Academy-hoofdpagina: de gestapelde niveaukaarten houden hun eigen tint (dicht, want ze schuiven over
 * elkaar), en krijgen het licht van glas: glans, lichte rand, binnenlicht. */
html[data-glass] body.sg-academy .sk-stack > .sk-card {
	background: var(--gl-sheen), var(--sk-bg);
	border-color: var(--gl-card-edge);
	box-shadow: var(--gl-card-shadow);
}
/* De Academy-landing (founder 12 nov 2026): net als de landing geen rook over de hele pagina, maar drie gloeden
 * achter wat ertoe doet: het cursusvenster in de hero, de twee prijskaarten en het slotpaneel. */
html[data-glass-glow] body.sg-academy :is(.ac-hero-grid, .ac-plans, .section.final > .wrap) {
	position: relative;
	isolation: isolate;
}
/* De gloed mag nooit zijwaarts scrollen veroorzaken. */
html[data-glass-glow] body.sg-academy :is(.ac-hero, .ac-pricing, .section.final) {
	overflow-x: clip;
}
/* De voet heeft hier zijn eigen grijze vlak (anders dan op de landing): de gloed van het slot stopt erboven. */
html[data-glass-glow] body.sg-academy .section.final {
	overflow: clip;
}
/* Het cursusvenster snijdt zijn inhoud af (overflow hidden), dus zijn gloed ligt ernaast in het raster van de
 * hero, in dezelfde cel: iets groter dan het venster, het zwaartepunt rechts van het midden. */
.sg-glow-acad { grid-column: 2; grid-row: 1; inset: -22% -18% -34% -14%; }
.sg-glow-acad .g1 { left: 10%; top: 6%; width: 64%; height: 64%; }
.sg-glow-acad .g2 { left: 42%; top: 36%; width: 62%; height: 64%; }
.sg-glow-acad .g3 { left: 12%; top: 46%; width: 58%; height: 50%; }
/* Achter de twee prijskaarten, het zwaarst rechts. */
.sg-glow-plans { inset: -12% -5% -14% -5%; }
.sg-glow-plans .g1 { left: 50%; top: 0; width: 52%; height: 92%; }
.sg-glow-plans .g2 { left: 0; top: 12%; width: 48%; height: 78%; }
.sg-glow-plans .g3 { left: 28%; top: 36%; width: 44%; height: 60%; }
/* Rond het slotpaneel, het zwaarst rechts bij de knop (zoals op de landing). */
body.sg-academy .sg-glow-final { inset: -16% -3% -18% -3%; }
body.sg-academy .sg-glow-final .g1 { left: 52%; top: 2%; width: 50%; height: 96%; }
body.sg-academy .sg-glow-final .g2 { left: 0; top: 10%; width: 46%; height: 80%; }
body.sg-academy .sg-glow-final .g3 { left: 30%; top: 30%; width: 40%; height: 70%; }
@media (max-width: 959px) {
	.sg-glow-acad { grid-column: 1; grid-row: 2; inset: -8% -10% -10% -10%; }
	.sg-glow-plans { inset: -6% -10% -6% -10%; }
	body.sg-academy .sg-glow-final { inset: -10% 0 -12% 0; }
}

/* Het cursusvenster als glas, zoals het dashboard in de hero van de landing: doorschijnend, zodat de gloed erdoor
 * schijnt, met een lichte rand, binnenlicht en een diepe zachte schaduw; de lijnen en balkjes lichter. */
html[data-glass] body.sg-academy .ac-path {
	background: color-mix(in srgb, var(--card) 50%, transparent);
	border-color: var(--gl-card-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 70px -30px rgba(0, 0, 0, 0.35);
}
html[data-glass][data-theme="dark"] body.sg-academy .ac-path {
	background: color-mix(in srgb, var(--card) 50%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
/* Zonder "Voorbeeld" rechtsboven, zoals het dashboard op de landing (founder, 12 nov 2026); het venster zegt
 * het zelf al tegen schermlezers (aria-label "Voorbeeld van een cursus in uitvoering"). */
html[data-glass] body.sg-academy .ac-path .hero-today-sample {
	display: none;
}
html[data-glass] body.sg-academy .ac-path :is(.ac-lv, .ac-cert) {
	border-top-color: color-mix(in srgb, var(--line) 70%, transparent);
}
html[data-glass] body.sg-academy .ac-path .ac-bar {
	background: color-mix(in srgb, var(--line) 72%, transparent);
}
/* De twee meldingen: glas op glas, zoals de zwevende meldingen over het dashboard van de landing. Kleine vlakken,
 * dus hier mag echte blur. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html[data-glass] body.sg-academy .ac-path .lk-pushes {
		--push-bg: color-mix(in srgb, var(--card) 52%, transparent);
		--push-edge: rgba(255, 255, 255, 0.7);
		--push-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35), 0 4px 10px -6px rgba(0, 0, 0, 0.12);
	}
	html[data-glass][data-theme="dark"] body.sg-academy .ac-path .lk-pushes {
		--push-bg: color-mix(in srgb, rgb(52, 52, 56) 56%, transparent);
		--push-edge: rgba(255, 255, 255, 0.12);
		--push-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.8), 0 4px 10px -6px rgba(0, 0, 0, 0.5);
	}
	html[data-glass] body.sg-academy .ac-path .lk-push {
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px var(--push-edge), var(--push-shadow);
	}
	html[data-glass][data-theme="dark"] body.sg-academy .ac-path .lk-push {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px var(--push-edge), var(--push-shadow);
	}
}
@media (prefers-reduced-motion: reduce) {
	html[data-glass] :is(.tp-card, .ft-card):hover {
		transform: none;
	}
}

/* Lijsten met lijnen (veelgestelde vragen, feiten): één glazen paneel met fijne scheidingslijnen. */
html[data-glass]:not([data-glass-home]) :is(.faq, .facts) {
	padding: 0 clamp(16px, 2.2vw, 24px);
	border: 1px solid var(--gl-card-edge);
	border-radius: var(--radius-card, 16px);
	background: var(--gl-sheen), var(--gl-card);
	box-shadow: var(--gl-card-shadow);
}
html[data-glass]:not([data-glass-home]) .faq details:last-child,
html[data-glass]:not([data-glass-home]) .facts > div:last-child {
	border-bottom: 0;
}
html[data-glass]:not([data-glass-home]) .facts > div:first-child {
	border-top: 0;
}

/* Het slot onderaan ("Begin vandaag met Sellgrip"): een zwevend glazen paneel in plaats van een lijn erboven. */
html[data-glass]:not([data-glass-home]) .final-box {
	padding: clamp(24px, 3.2vw, 40px);
	border: 1px solid var(--gl-card-edge);
	border-radius: 24px;
	background: var(--gl-sheen), var(--gl-card);
	box-shadow: var(--gl-card-shadow);
}

/* Rekentools: de formulierkaart als glas, de velden zelf blijven dicht. */
html[data-glass]:not([data-glass-home]) .calc-form :is(input, select, textarea) {
	background-color: var(--card);
}

/* De Academy-hoofdpagina met rook: de secties lopen door op de rook, zonder eigen banden (zoals de landing). */
html[data-glass-smoke]:not([data-glass-home]) :is(.section-alt, .page-hero) {
	background: transparent;
}

/* De rode knoppen (btn-primary: in de kop, de hero, de prijzen, het slot, het telefoonmenu) met het licht van
 * glas: een lichte rand langs de bovenkant en een zachte schaduw eronder, zoals de knop in de hero (founder,
 * 11 nov 2026). In de kop een kleinere schaduw, binnen de hoogte van de balk. */
html[data-glass] .btn-primary {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 26px -16px rgba(0, 0, 0, 0.45);
}
html[data-glass] .site-header .btn-primary {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
}

/* Firefox tekent de blur onder de uitklapmenu's niet (gemeten 11 nov 2026, Firefox 159): de tekst van de pagina
 * stond scherp achter de menupunten. Daar een dichter menuvlak, met dezelfde glans en rand. */
@supports (-moz-appearance: none) {
	html[data-glass] .site-header :is(.nav-morph, .mega-box, .hsearch-panel, .lang-menu ul) {
		background:
			linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0) 70%),
			color-mix(in srgb, var(--card) 92%, transparent);
	}
	html[data-glass][data-theme="dark"] .site-header :is(.nav-morph, .mega-box, .hsearch-panel, .lang-menu ul) {
		background:
			linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 70%),
			color-mix(in srgb, var(--card) 94%, transparent);
	}
	html[data-glass] .site-header .is-morph .mega-box,
	html[data-glass] .site-header.is-morph .mega-box {
		background: transparent;
	}
}