/* =========================================================================
   Farbstoffe Milestones — Road view (true CSS 3D winding highway)
   The ground is a flat plane in perspective; the road is drawn ON it as an
   SVG winding path, so the zig-zag projects correctly into 3D and recedes to
   a glowing horizon. Signposts stand on the curve (counter-rotated billboards
   that align to the road by construction). Scrolling flies the camera forward.
   Static, readable fallback when JS / motion is unavailable.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

.fb-r3d {
	--fb-accent: #2C7BE5;
	--sky-1:#0c1d40; --sky-2:#11294b; --sky-3:#274f80;
	--ink:#eef1f7; --ink-soft:rgba(238,241,247,.66); --ink-mute:rgba(238,241,247,.42);
	--fb-display:"Archivo",ui-sans-serif,"Segoe UI",system-ui,sans-serif;
	--fb-body:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
	position:relative; left:50%; right:50%; width:100vw; margin-left:-50vw; margin-right:-50vw;
	box-sizing:border-box; overflow-x:clip; color:var(--ink); font-family:var(--fb-body);
	-webkit-font-smoothing:antialiased; background:var(--sky-1);
}
.fb-r3d *,.fb-r3d *::before,.fb-r3d *::after { box-sizing:border-box; }
.fb-r3d--light { --sky-1:#cfe0f2; --sky-2:#e6eef8; --sky-3:#f3f7fc; --ink:#10182b; --ink-soft:rgba(16,24,43,.7); --ink-mute:rgba(16,24,43,.5); }

/* ---- scene ---- */
.fb-r3d__scene { position:relative; height:100vh; height:100svh; overflow:hidden; perspective:800px; perspective-origin:50% 28%; display:none; }
.fb-r3d.is-enhanced .fb-r3d__scene { display:block; }
.fb-r3d.is-enhanced .fb-r3d__list { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.fb-r3d__sky { position:absolute; inset:0; background:
	radial-gradient(120% 75% at 50% 32%, rgba(58,122,206,.55) 0%, rgba(58,122,206,0) 58%),
	linear-gradient(180deg, #0b1c3e 0%, #102849 28%, #173564 56%, #214a82 80%, #15315c 100%); }
.fb-r3d__sky::after { content:""; position:absolute; inset:0; pointer-events:none; background:
	radial-gradient(72% 44% at 50% 32%, rgba(150,190,255,.12), transparent 64%); }
.fb-r3d__glow { position:absolute; left:50%; top:28%; width:62vw; height:62vw; max-width:780px; max-height:780px;
	transform:translate(-50%,-54%); border-radius:50%;
	background:radial-gradient(circle, color-mix(in srgb, var(--fb-accent) 70%, #fff) 0%, color-mix(in srgb, var(--fb-accent) 42%, transparent) 24%, transparent 60%);
	filter:blur(4px); opacity:.7; pointer-events:none; }

/* soft atmospheric light near the horizon (subtle, brand-toned) */
.fb-r3d__aurora { position:absolute; inset:0; pointer-events:none; overflow:hidden; mix-blend-mode:screen; opacity:.45; }
.fb-r3d__aurora::before, .fb-r3d__aurora::after { content:""; position:absolute; left:-25%; right:-25%; height:48%; filter:blur(80px); border-radius:50%; }
.fb-r3d__aurora::before { top:8%; background:radial-gradient(60% 100% at 38% 50%, rgba(70,130,214,.30), transparent 72%); animation:fb-r3d-aur1 30s ease-in-out infinite alternate; }
.fb-r3d__aurora::after { top:2%; background:radial-gradient(56% 100% at 66% 50%, rgba(52,104,184,.26), transparent 72%); animation:fb-r3d-aur2 38s ease-in-out infinite alternate; }
@keyframes fb-r3d-aur1 { from { transform:translateX(-4%); } to { transform:translateX(4%); } }
@keyframes fb-r3d-aur2 { from { transform:translateX(3%); } to { transform:translateX(-4%); } }

/* subtle film grain for a premium finish */
.fb-r3d__grain { position:absolute; inset:0; pointer-events:none; opacity:.035; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+"); background-size:160px 160px; }


/* layered hills at the horizon for depth */
.fb-r3d__hills { position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; }
.fb-r3d__hills::before,.fb-r3d__hills::after { content:""; position:absolute; left:-3%; right:-3%; background-repeat:no-repeat; background-position:bottom center; background-size:100% 100%; }
.fb-r3d__hills::before { top:16%; height:20%; opacity:.85; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjM2MCIgdmlld0JveD0iMCAwIDE0NDAgMzYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9Imh6IiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMmI0YTg2IiBzdG9wLW9wYWNpdHk9IjAiLz48c3RvcCBvZmZzZXQ9IjAuNDUiIHN0b3AtY29sb3I9IiMyYjRhODYiIHN0b3Atb3BhY2l0eT0iMC4xNjAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyYjRhODYiIHN0b3Atb3BhY2l0eT0iMC4zMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0wIDE1MCBDIDM2MCAxMDAsIDc2MCAxNzYsIDExNDAgMTMyIFMgMTQ0MCAxMTAsIDE0NDAgMTYyIEwxNDQwIDM2MCBMMCAzNjAgWiIgZmlsbD0idXJsKCNoeikiLz48L3N2Zz4="); }
.fb-r3d__hills::after  { top:18%; height:22%; opacity:1; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjM2MCIgdmlld0JveD0iMCAwIDE0NDAgMzYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImgwIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjQ0MDdhIiBzdG9wLW9wYWNpdHk9IjAiLz48c3RvcCBvZmZzZXQ9IjAuNDUiIHN0b3AtY29sb3I9IiMyNDQwN2EiIHN0b3Atb3BhY2l0eT0iMC4yMjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyNDQwN2EiIHN0b3Atb3BhY2l0eT0iMC40NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJoMSIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzFhMzE2MCIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIwLjQ1IiBzdG9wLWNvbG9yPSIjMWEzMTYwIiBzdG9wLW9wYWNpdHk9IjAuMzQwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMWEzMTYwIiBzdG9wLW9wYWNpdHk9IjAuNjgiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iaDIiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwZjIwNDIiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMC40NSIgc3RvcC1jb2xvcj0iIzBmMjA0MiIgc3RvcC1vcGFjaXR5PSIwLjQ1MCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBmMjA0MiIgc3RvcC1vcGFjaXR5PSIwLjkiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNMCAxNzIgQyAyMjAgMTIwLCA0MDAgMjAyLCA2MjAgMTYyIFMgMTA1MCAxMTIsIDE0NDAgMTY4IEwxNDQwIDM2MCBMMCAzNjAgWiIgZmlsbD0idXJsKCNoMCkiLz48cGF0aCBkPSJNMCAyMjIgQyAyNzAgMTcyLCA1NDAgMjQ0LCA4MTAgMjA2IFMgMTIxMCAxNjYsIDE0NDAgMjE2IEwxNDQwIDM2MCBMMCAzNjAgWiIgZmlsbD0idXJsKCNoMSkiLz48cGF0aCBkPSJNMCAyNjggQyAzMDAgMjE2LCA2MDAgMjg4LCA4ODAgMjUyIFMgMTI3MCAyMTYsIDE0NDAgMjcwIEwxNDQwIDM2MCBMMCAzNjAgWiIgZmlsbD0idXJsKCNoMikiLz48L3N2Zz4="); }

.fb-r3d__stage3d { position:absolute; inset:0; transform-style:preserve-3d; }
.fb-r3d__ground { position:absolute; left:50%; bottom:0; transform-origin:50% 100%; transform-style:preserve-3d; }
.fb-r3d__strip { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }

/* winding road drawn as SVG on the plane */
.fb-r3d__roadsvg { position:absolute; left:0; top:0; overflow:visible; }
.fb-r3d__edge { fill:none; stroke:#0a0c12; stroke-linecap:round; stroke-linejoin:round; }
.fb-r3d__asphalt { fill:none; stroke:#2b2e37; stroke-linecap:round; stroke-linejoin:round; }
.fb-r3d__lane { fill:none; stroke:rgba(255,255,255,.92); stroke-linecap:round; animation:fb-r3d-march 1s linear infinite; }
@keyframes fb-r3d-march { to { stroke-dashoffset:-50; } }

/* contact shadow under each pin (sits flat on the road) */
.fb-r3d__shadow { position:absolute; transform:translate(-50%,-50%); border-radius:50%;
	background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 68%); filter:blur(2px); pointer-events:none; }

/* ---- signpost pins ---- */
.fb-r3d__pin { position:absolute; transform-style:preserve-3d; }
.fb-r3d__post { position:absolute; left:0; bottom:0; width:3px; height:60px; transform:translateX(-50%);
	background:linear-gradient(180deg, var(--fb-accent), rgba(255,255,255,.12)); border-radius:2px; opacity:.85; }
.fb-r3d__marker { position:absolute; left:0; bottom:58px; transform:translateX(-50%); width:50px; height:50px;
	border-radius:50% 50% 50% 0; rotate:-45deg; background:var(--fb-accent); display:grid; place-items:center;
	box-shadow:0 14px 30px -10px rgba(0,0,0,.7), 0 0 26px -2px color-mix(in srgb, var(--fb-accent) 65%, transparent); }
.fb-r3d__marker::after { content:""; position:absolute; inset:8px; background:#0a0c14; border-radius:50%; }
.fb-r3d__num { position:relative; z-index:1; rotate:45deg; font-family:var(--fb-display); font-weight:700; font-size:1rem; color:#fff; }
.fb-r3d__marker::before { content:""; position:absolute; inset:-7px; border-radius:50% 50% 50% 0; border:2px solid var(--fb-accent); opacity:0; }
.fb-r3d__pin.is-active .fb-r3d__marker::before { animation:fb-r3d-pulse 1.5s ease-out infinite; }
@keyframes fb-r3d-pulse { 0%{opacity:.6;transform:scale(1)} 100%{opacity:0;transform:scale(1.6)} }

.fb-r3d__label { position:absolute; bottom:46px; width:min(460px,86vw); opacity:0; transition:opacity .45s ease, transform .45s ease; pointer-events:none; }
.fb-r3d__pin--cr .fb-r3d__label { left:62px; transform:translateX(-12px); }
.fb-r3d__pin--cl .fb-r3d__label { right:62px; transform:translateX(12px); }
.fb-r3d__pin.is-active .fb-r3d__label { opacity:1; transform:translateX(0); }
.fb-r3d__leader { position:absolute; bottom:92px; height:2px; width:52px; opacity:0; transition:opacity .45s ease; background:linear-gradient(90deg, var(--fb-accent), rgba(255,255,255,.15)); }
.fb-r3d__leader::before { content:""; position:absolute; left:-5px; bottom:-3px; width:8px; height:8px; border-radius:50%; background:var(--fb-accent); box-shadow:0 0 10px var(--fb-accent); }
.fb-r3d__pin--cr .fb-r3d__leader { left:20px; }
.fb-r3d__pin--cl .fb-r3d__leader { right:20px; transform:scaleX(-1); }
.fb-r3d__pin.is-active .fb-r3d__leader { opacity:1; }
.fb-r3d__card { background:rgba(9,12,22,.82); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:24px 28px;
	backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 34px 70px -28px rgba(0,0,0,.95); text-align:center; }
.fb-r3d__yr { display:block; font-family:var(--fb-display); font-weight:800; font-size:2.85rem; line-height:1; letter-spacing:-.02em; color:var(--fb-accent); }
.fb-r3d__eyebrow { display:block; margin-top:12px; font-family:var(--fb-display); font-size:.86rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.fb-r3d__name { font-family:var(--fb-display); font-weight:700; font-size:1.95rem; line-height:1.2; margin:10px 0 12px; color:var(--ink); }
.fb-r3d__desc { font-size:1.22rem; line-height:1.6; color:rgba(238,241,247,.88); margin:0; }
.fb-r3d__desc > :first-child { margin-top:0; } .fb-r3d__desc > :last-child { margin-bottom:0; }

/* atmosphere overlays */
.fb-r3d__haze { position:absolute; left:0; right:0; top:0; height:44%; pointer-events:none;
	background:linear-gradient(180deg, var(--sky-2) 0%, color-mix(in srgb, var(--sky-3) 55%, transparent) 38%, transparent 100%); }
.fb-r3d__vignette { position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(125% 85% at 50% 38%, transparent 54%, rgba(0,0,0,.40) 100%); }
.fb-r3d__floor { position:absolute; left:0; right:0; bottom:0; height:22%; pointer-events:none;
	background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--sky-1) 92%, transparent)); }

/* ---- overlay ---- */
.fb-r3d__overlay { position:absolute; left:0; top:0; z-index:6; text-align:left; max-width:min(560px,86vw); padding:clamp(34px,7vh,78px) clamp(22px,5vw,64px) 0; pointer-events:none; }
.fb-r3d__title { font-family:var(--fb-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem,4.4vw,3.5rem); line-height:1.02; letter-spacing:-.03em; margin:0; text-shadow:0 8px 40px rgba(0,0,0,.55); }
.fb-r3d__intro { margin:14px 0 0; max-width:42ch; color:var(--ink-soft); font-size:clamp(.95rem,1.4vw,1.12rem); }
.fb-r3d__cue { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6; font-family:var(--fb-display); font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute); }
.fb-r3d__progress { position:fixed; left:0; top:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--fb-accent); z-index:40; }

/* faint year on the left, swaps per milestone */
.fb-r3d__ghost { position:absolute; left:clamp(16px,4vw,56px); top:50%; margin-top:-0.42em; z-index:1; pointer-events:none; opacity:0; font-family:var(--fb-display); font-weight:900; font-size:clamp(3rem,11vw,9rem); line-height:.8; letter-spacing:-.04em; white-space:nowrap; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.12); text-stroke:1.5px rgba(255,255,255,.12); text-shadow:0 0 50px rgba(255,255,255,.05); }
.fb-r3d--light .fb-r3d__ghost { -webkit-text-stroke:1.5px rgba(16,24,43,.14); text-stroke:1.5px rgba(16,24,43,.14); }

/* closing message at the end of the road */
.fb-r3d__outro { position:absolute; left:0; right:0; top:52%; transform:translateY(-50%); z-index:7; text-align:center; padding:0 24px; opacity:0; pointer-events:none; }
.fb-r3d__outro-eyebrow { display:block; margin-bottom:14px; font-family:var(--fb-display); font-size:.74rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--fb-accent); }
.fb-r3d__outro-title { margin:0; font-family:var(--fb-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem,4.8vw,3.7rem); line-height:1.04; letter-spacing:-.02em; text-shadow:0 8px 44px rgba(0,0,0,.6); }
.fb-r3d__outro-line { position:relative; width:130px; height:2px; margin:24px auto 0; background:rgba(255,255,255,.16); overflow:hidden; border-radius:2px; }
.fb-r3d__outro-line::after { content:""; position:absolute; top:0; left:-45%; width:45%; height:100%; background:linear-gradient(90deg, transparent, var(--fb-accent), transparent); animation:fb-r3d-sheen 1.9s ease-in-out infinite; }
@keyframes fb-r3d-sheen { to { left:105%; } }

/* ---- fallback list ---- */
.fb-r3d__list { list-style:none; max-width:760px; margin:0 auto; padding:80px 24px 100px; display:grid; gap:20px; background:var(--sky-1); }
.fb-r3d__src { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-left:4px solid var(--fb-accent); border-radius:12px; padding:18px 20px; }
.fb-r3d__src h3 { font-family:var(--fb-display); margin:4px 0 6px; }
.fb-r3d__src-yr { font-family:var(--fb-display); font-weight:800; color:var(--fb-accent); }

@media (prefers-reduced-motion: reduce) {
	.fb-r3d__lane, .fb-r3d__pin.is-active .fb-r3d__marker::before, .fb-r3d__aurora::before, .fb-r3d__aurora::after, .fb-r3d__sky::after { animation:none; }
}

/* =========================================================================
   Responsiveness — phone / tablet / laptop / desktop / wide
   ========================================================================= */

/* Wide / large desktops: ease the perspective so it isn't too steep */
@media (min-width: 1600px) {
	.fb-r3d__scene { perspective: 1040px; perspective-origin: 50% 27%; }
}

/* Tablets & small laptops: centre the callout (side offsets would overflow) */
@media (max-width: 1024px) {
	.fb-r3d__scene { perspective: 720px; }
	.fb-r3d__leader { display: none; }
	.fb-r3d__pin--cr .fb-r3d__label,
	.fb-r3d__pin--cl .fb-r3d__label { left: 50%; right: auto; transform: translateX(-50%); }
	.fb-r3d__pin.is-active .fb-r3d__label { transform: translateX(-50%); }
	.fb-r3d__label { bottom: 120px; width: min(460px, 92vw); }
}

/* Phones: smaller signposts, tighter cards, gentler perspective */
@media (max-width: 680px) {
	.fb-r3d__scene { perspective: 600px; perspective-origin: 50% 33%; }
	.fb-r3d__marker { width: 40px; height: 40px; bottom: 48px; }
	.fb-r3d__post { height: 48px; }
	.fb-r3d__num { font-size: .85rem; }
	.fb-r3d__label { bottom: 104px; width: min(370px, 94vw); }
	.fb-r3d__card { padding: 15px 17px; border-radius: 14px; }
	.fb-r3d__yr { font-size: 2.1rem; }
	.fb-r3d__name { font-size: 1.45rem; }
	.fb-r3d__desc { font-size: 1.06rem; line-height: 1.55; }
	.fb-r3d__ghost { font-size: clamp(2.6rem, 16vw, 5rem); left: 12px; }
	.fb-r3d__title { font-size: clamp(1.7rem, 7vw, 2.6rem); }
	.fb-r3d__overlay { padding: clamp(26px, 6vh, 50px) 18px 0; max-width: 92vw; }
	.fb-r3d__outro-title { font-size: clamp(1.5rem, 7vw, 2.4rem); }
}

/* Short landscape (phones turned sideways): shrink vertical chrome */
@media (max-height: 520px) {
	.fb-r3d__overlay { padding-top: 18px; }
	.fb-r3d__label { bottom: 92px; }
	.fb-r3d__cue { bottom: 12px; }
}

/* =========================================================================
   Mobile vertical road — phones (<=768px). road.js adds .is-mobile and builds
   .fb-r3d__mobile because the heavy 3D layer can exceed mobile GPU limits.
   ========================================================================= */
.fb-r3d__mobile { display: none; }

.fb-r3d.is-mobile .fb-r3d__scene,
.fb-r3d.is-mobile .fb-r3d__progress { display: none !important; }
.fb-r3d.is-mobile .fb-r3d__mobile { display: block; }
.fb-r3d.is-mobile {
	min-height: 0;
	background:
		radial-gradient(120% 55% at 50% 0%, rgba(58,122,206,.42), transparent 60%),
		linear-gradient(180deg, #0c1d40 0%, #132c50 45%, #1a3a64 100%);
}

.fb-r3d__mwrap {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	padding: clamp(40px, 11vw, 84px) 20px clamp(64px, 16vw, 120px);
}

.fb-r3d__mhead { margin: 0 0 30px; }
.fb-r3d__mtitle {
	margin: 0;
	font-family: var(--fb-display, inherit);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1.02;
	font-size: clamp(1.8rem, 8vw, 2.8rem);
	color: var(--ink, #f4f7ff);
}
.fb-r3d__mintro {
	margin: 12px 0 0;
	color: var(--ink-soft, #b9c3da);
	font-size: 1rem;
	line-height: 1.55;
}

/* The vertical road line + scroll-driven fill (top/height set by road.js) */
.fb-r3d__mline {
	position: absolute;
	left: 34px;
	top: 200px;
	bottom: 90px;
	width: 2px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 2px;
}
.fb-r3d__mfill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: var(--fb-accent, #2C7BE5);
	border-radius: 2px;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

.fb-r3d__mrow {
	position: relative;
	padding: 0 0 0 66px;
	margin: 0 0 28px;
}

/* Teardrop node with number */
.fb-r3d__mnode {
	position: absolute;
	left: 34px;
	top: 4px;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50% 50% 50% 0;
	rotate: -45deg;
	background: var(--fb-accent, #2C7BE5);
	display: grid;
	place-items: center;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7), 0 0 16px -2px var(--fb-accent, #2C7BE5);
	z-index: 2;
}
.fb-r3d__mnode::after {
	content: "";
	position: absolute;
	inset: 6px;
	background: #0a0c14;
	border-radius: 50%;
}
.fb-r3d__mnode b {
	position: relative;
	z-index: 1;
	rotate: 45deg;
	font-family: var(--fb-display, inherit);
	font-weight: 700;
	font-size: 0.82rem;
	color: #fff;
}

.fb-r3d__mcard {
	background: rgba(10, 13, 24, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 3px solid var(--fb-accent, #2C7BE5);
	border-radius: 14px;
	padding: 15px 17px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.fb-r3d__mrow .fb-r3d__yr { font-size: 1.95rem; }
.fb-r3d__mrow .fb-r3d__name { font-size: 1.34rem; }
.fb-r3d__mrow .fb-r3d__desc { font-size: 1.04rem; line-height:1.58; }

/* Closing row */
.fb-r3d__mnode--end { background: var(--ink, #f4f7ff); }
.fb-r3d__mnode--end::after { inset: 7px; }
.fb-r3d__mend { padding-top: 2px; }
.fb-r3d__mendtitle {
	margin: 6px 0 0;
	font-family: var(--fb-display, inherit);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.05;
	font-size: clamp(1.3rem, 6vw, 1.9rem);
	color: var(--ink, #f4f7ff);
}

/* =========================================================================
   LIGHT THEME (theme="light") — readable light treatment.
   The dark background/card colours are hard-set elsewhere, so re-map them here.
   ========================================================================= */
.fb-r3d--light .fb-r3d__sky { background:
	radial-gradient(120% 75% at 50% 30%, rgba(120,165,230,.45) 0%, rgba(120,165,230,0) 58%),
	linear-gradient(180deg, #eef4fc 0%, #e0ebf8 38%, #cfe0f3 68%, #c0d4ec 100%); }
.fb-r3d--light .fb-r3d__sky::after { background:radial-gradient(70% 42% at 50% 30%, rgba(255,255,255,.45), transparent 64%); }
.fb-r3d--light .fb-r3d__aurora { opacity:.22; }
.fb-r3d--light .fb-r3d__aurora::before { background:radial-gradient(60% 100% at 38% 50%, rgba(110,155,215,.30), transparent 72%); }
.fb-r3d--light .fb-r3d__aurora::after { background:radial-gradient(56% 100% at 66% 50%, rgba(130,170,222,.26), transparent 72%); }
.fb-r3d--light .fb-r3d__vignette { background:radial-gradient(125% 85% at 50% 38%, transparent 58%, rgba(30,60,110,.16) 100%); }
.fb-r3d--light .fb-r3d__hills::before { opacity:.35; }
.fb-r3d--light .fb-r3d__hills::after { opacity:.45; }

/* Desktop card → clean white panel with dark text */
.fb-r3d--light .fb-r3d__card { background:rgba(255,255,255,.93); border-color:rgba(16,32,64,.10); box-shadow:0 30px 60px -28px rgba(20,45,90,.35); }
.fb-r3d--light .fb-r3d__name { color:#0f1c33; }
.fb-r3d--light .fb-r3d__eyebrow { color:rgba(16,24,43,.60); }
.fb-r3d--light .fb-r3d__desc { color:rgba(16,24,43,.82); }
.fb-r3d--light .fb-r3d__outro-line { background:rgba(16,24,43,.16); }
.fb-r3d--light .fb-r3d__title { text-shadow:0 6px 30px rgba(40,70,120,.18); }
.fb-r3d--light .fb-r3d__outro-title { text-shadow:0 6px 30px rgba(40,70,120,.18); }

/* Mobile vertical road in light theme */
.fb-r3d--light.is-mobile { background:
	radial-gradient(120% 55% at 50% 0%, rgba(120,165,230,.40), transparent 60%),
	linear-gradient(180deg, #eef4fc 0%, #e2edf9 45%, #d2e2f4 100%); }
.fb-r3d--light .fb-r3d__mcard { background:rgba(255,255,255,.93); border-color:rgba(16,32,64,.10); border-left-color:var(--fb-accent); -webkit-backdrop-filter:none; backdrop-filter:none; }
.fb-r3d--light .fb-r3d__mcard .fb-r3d__name { color:#0f1c33; }
.fb-r3d--light .fb-r3d__mcard .fb-r3d__desc { color:rgba(16,24,43,.82); }
.fb-r3d--light .fb-r3d__mcard .fb-r3d__eyebrow { color:rgba(16,24,43,.60); }
.fb-r3d--light .fb-r3d__mline { background:rgba(16,32,64,.14); }