/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */
@layer reset, tokens, base, components, layout, moderncss, util;

@layer moderncss {
	
	@layer misc {
		/* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
		:root {
			overscroll-behavior-y: contain;
		}
	}
	
	@layer layout {
		
		/* Draw a particles ring in the background of the welcome screen */
		/* I am using Houdini PaintWorklets for this */
		@layer ring-particles {
			@supports (background: paint(something)) {
				@layer particles {
					#welcome {
						--ring-radius: 100;
						--ring-thickness: 600;
						--particle-count: 80;
						--particle-rows: 25;
						--particle-size: 2;
						--particle-color: navy;

						--particle-min-alpha: 0.1;
						--particle-max-alpha: 1.0;

						--seed: 200;

						background-image: paint(ring-particles);
					}
				}
				
				@layer animation {
					@property --animation-tick { syntax: '<number>'; inherits: false; initial-value: 0; }
					@property --ring-radius { syntax: '<number> | auto'; inherits: false; initial-value: auto; }
					@property --particle-min-alpha { syntax: '<number>'; inherits: false; initial-value: 0; }
					@property --particle-max-alpha { syntax: '<number>'; inherits: false; initial-value: 0; }
					@keyframes ripple { 0% { --animation-tick: 0; } 100% { --animation-tick: 1; } }
					@keyframes ring { 0% { --ring-radius: 150; } 100% { --ring-radius: 250; } }
					@keyframes fadeInParticles {
						from {
							--particle-min-alpha: 0;
							--particle-max-alpha: 0;
						}
						to {
							--particle-min-alpha: 0.1;
							--particle-max-alpha: 1.0;
						}
					}
					#welcome {
						animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate, fadeInParticles 1.5s ease-in forwards;
					}
				}
				
				@layer follow-mouse {				
					@property --ring-x { syntax: '<number>'; inherits: false; initial-value: 50; }
					@property --ring-y { syntax: '<number>'; inherits: false; initial-value: 50; }
					@property --ring-interactive { syntax: '<number>'; inherits: false; initial-value: 0; }
					
					#welcome {
						/* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */
						transition: --ring-x 3s ease,
												--ring-y 3s ease;
						
						/* @NOTE: This still feels uncanny, so I’m disabling it for now. It could be solved by having something like an animation-speed available. */
						/* transition-duration: if(
							style(--ring-interactive: 1): 0.25s;
							else: 3s;
						); */
					
					}
				}
			}
		}
		
	}
	
	@layer components {
		@layer button {
			
			/* Buttons in .dark containers have inverted colors */
			@scope (.dark) {
				button {
					color: var(--theme-surface-on-surface);
					background: var(--theme-primary-on-primary);
					border: 1px solid var(--theme-outline-variant);

					&:hover,
					&:focus-visible {
						background: var(--theme-button-secondary-hover);
					}
					
					&.secondary {						
						color: var(--theme-surface-surface);
				    background: var(--theme-nav-button-hover);
			
						&:hover,
						&:focus-visible {
							background: var(--theme-button-secondary-inverse-hover);
						}
					}
				}
			}
		}
		
		@layer navbar {	
			/* Anchor the mobile nav underneath the header */
			@layer mobile {
				@media (width < 930px) {
					header {
						anchor-name: --header;
					}
					
					header nav {
						position: fixed;
						inset: auto;
						top: 0; /* Undo non-modern-CSS styling */
						position-anchor: --header;
						position-area: bottom;
						justify-self: stretch;
						align-self: stretch;
					}
				}
			}
			
			/* Animate-in the nav on mobile when showing */
			@layer mobile {
				@media (width < 930px) {
					header nav {
						transition: opacity .15s ease-in;
						@starting-style {
							opacity: 0;
						}
					}
				}
			}
			
			/* Don’t scroll page when menu is open */
			@media (width < 930px) {
				header:has(.menu-checkbox:checked) {
					&,
					& nav {
						overflow: auto;
						overscroll-behavior: contain;
					}
				}
			}
			
			/* Hidey bar – http://brm.us/hidey-bar-2 */
			@layer hidey-bar {
				html {
					container-type: scroll-state;
				}
				.header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) {
					transition: translate 0.25s;
					translate: 0 0;

					@container scroll-state(scrolled: bottom) {
						translate: 0 -100%;
					}
				}
			}
		}
		
		@layer carousel {
			@layer scroll-snapping {
				@layer base-setup {
					@supports (scroll-padding-inline: 3rem) {
						.carousel {
							scroll-padding-inline: 3rem;
							scroll-snap-type: x mandatory;

							> * {
								scroll-snap-align: start;
							}

							/* @NOTE: On the orignal page the last item also snaps to the left */
							/* To get this working, I’d manually add some padding to the right */
							/* Defining that “some” is tricky and requires manual calculation */
							/* Here I am calculating 40vi (because the entries are 60vi) minus gap */
							/* So maybe we should have `auto` on scroll-padding do something? */
							@media (width >= 930px) {
								padding-inline: 3rem calc(40vi - 3rem);
							}
						}
					}
				}
				
				@layer snapped-effects {
					/* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */	
					
					.carousel > * {
						container-type: scroll-state;
						
						@supports (container-type: scroll-state) {
							/* The images */
							> figure {
								opacity: .25;								
								transition: opacity .5s ease;

								@container scroll-state(snapped: x) {
									opacity: 1;
								}
							}
							
							/* The bylines */
							> *:not(figure) {
								transition: opacity .5s ease, translate .5s ease;
								transition-delay: 0s;
								opacity: 0;			
								translate: 0 calc(0.5rem * (sibling-index() - 1)) 0;

								@container scroll-state(snapped: x) {
									transition-delay: 0.2s; /* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */
									opacity: 1;
									translate: 0 0 0;
								}
							}
						}
					}
				}
			}
			
			@layer niceties {
				.carousel {
					scrollbar-width: none;
					overscroll-behavior-x: contain;
				}
			}
			
			@layer scroll-buttons {
				/* @note: https://chrome.dev/carousel-configurator/ really helps here */
				.carousel {
					position: relative;
					scroll-behavior: smooth;
					anchor-name: --carousel;
				
					&::scroll-button(*) {
						position: fixed;
						position-anchor: --carousel;
						position-visibility: always;
						font-family: "Material Symbols Outlined";
						
						color: var(--theme-surface-on-surface);
						background: var(--theme-tonal-tonal);
						border: none;
						block-size: 2em;
						font-size: 1.3em;
						inline-size: 2.5em;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						border-radius: 999px;
						
						transition: opacity 0.25s ease;
					}
					
					/* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
					&::scroll-button(*):hover {
						background: #eff0f3;
					}
					&::scroll-button(*):disabled {
						cursor: not-allowed;
						opacity: 0.25;
					}

					/* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */
					&::scroll-button(left) {
						translate: -50% 0;
						content: 'arrow_back' / 'Previous';
					}
					&::scroll-button(right) {
						translate: 50% 0;
						content: 'arrow_forward' / 'Next';
					}
					
					@media (width < 930px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: end;
						}
					}
					
					@media (width >= 930px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: start;
							justify-self: start;
							/* Magic numbers … these rely on the flex-basis of the slides + the aspect-ratio of the photos. Nasty, but it works. */
							left: calc(60vi - 1em);
							top: calc((60vi + 1em) * 9 / 16);
						}
					}
				}
			}
		}
	}
	
	@layer animations {
		@layer revealing-welcome-items {
			#welcome {
				svg, .cta {
					transition: translate 0.5s ease, opacity 0.5s ease;
					@starting-style {
						translate: 0 50% 0;
						opacity: 0;
					}
				}
			}
		}
		
		@layer scroll-triggered-typewriter-effect {
			@supports (timeline-trigger-name: --t) {
				
				/* @ref https://codepen.io/bramus/pen/JjwxLNM */
				@keyframes blink {
					from { opacity: 0; }
				}
				@keyframes text {
					from { background-size: 0 }
				}
				
				/* Typewriter effect */
				.typewriter {
					background: 
						/* highlight text */
						linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat 
						/* faded text */
						transparent;
					-webkit-background-clip: text;
					color: transparent;
					animation: text 2s ease-in both;

					&::after {
						content: "|";
						--hdr-gradient: linear-gradient(
							in oklch,
							oklch(80% .3 34),
							oklch(90% .3 200)
						);
						--sdr-gradient: linear-gradient(#ff4700, #0ff);

						background: var(--hdr-gradient);
						background-clip: text;
						color: transparent;

						/* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
						animation: blink 0.2s 1.4s ease infinite alternate both;
					}
				}
				
				/* Typewriter Trigger in solution section */
				#solution *:has(> .typewriter) {
					timeline-trigger: --t view() cover 5% cover 1000%;
					trigger-scope: --t;
					
					.typewriter {					
						animation-trigger: --t play-once;
						&::after {
							animation-trigger: --t play-once;
							animation-delay: 1.6s;
						}
					}
				}
				
				/* Typewriter Trigger in Carousel */
				.carousel > * {
					timeline-trigger: --t view(inline)
						entry 90% exit 50%;
					trigger-scope: --t;
					
					.typewriter {
						--typewriter-text-color: white;
						animation-trigger: --t play-forwards reset;
						animation-duration: 1.5s;
						
						&::after {
							animation-trigger: --t play-forwards reset;
							animation-delay: 2.4s;
						}
					}
				}
				
			}
		}
		
	}
}

@layer components {
	@layer button {
		button {
			background: var(--theme-primary-primary);
   		color: var(--theme-primary-on-primary);
			border: 0px;
			border-radius: 999px;
			padding: 0.6em 1.5em;
			
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 0.4rem;
			
			font-size: 0.9em;
			
			cursor: pointer;
			transition: .15s background ease-out;
			
			&:hover,
			&:focus-visible {
				background: var(--theme-button-states-primary-hovered);
			}
			
			&:has(span + .material-symbols-outlined) {
				padding-inline-end: 1em;
			}
			
			&:has(.material-symbols-outlined + span) {
				padding-inline-start: 1em;
			}
			
			&.secondary {
				color: var(--theme-surface-on-surface);
				background: var(--theme-secondary-button);
				border: 1px solid var(--theme-outline-variant);
				
				&:hover,
				&:focus-visible {
					background: var(--theme-button-secondary-hover);
				}
			}
		}
	}
	
	@layer navbar {
		@layer shared {
			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.menu-checkbox {
				display: none;
			}
			
			nav a {
				color: var(--theme-surface-on-surface);
				transition: .15s color ease-out, .15s background ease-out;
				text-decoration: none;

				&:hover,
				&:focus-visible {
					color: #000;
					background: var(--theme-button-states-hovered);
				}
			}
		}
		@layer mobile {
			@media (width < 930px) {
				.menu-button {
					cursor: pointer;
					width: 3.5em;
					border-radius: 999px;
					text-align: center;
					place-content: center;
					
					transition: .15s background ease-out;

					&:hover,
					&:focus-visible {
						background: var(--theme-button-states-hovered);
					}
				}
				nav {
					display: none;
				}
			
				nav li {
					font-size: 1.85em;
					font-weight: 350;
					border-bottom: 1px solid var(--theme-surface-surface-container-higher);
					
					&:first-child {
						border-top: 1px solid var(--theme-surface-surface-container-higher);
					}
				}
			
				nav a {
					display: block;

					padding-inline: 3rem;
					padding-block: 1.5rem;
				}
				
				/* When the menu toggle is checked */
				.menu-checkbox:checked {
					/* Show the nav */
					& ~ nav {
						position: fixed;
						inset: 0;
						top: 2.75em; /* This is a guess for how tall the topbar is */
						display: block;
						background: var(--palette-grey-0);
					}
					
					/* Show the proper icon in the button */
					& ~ .menu-button {
						[data-show-when="closed"] {
							display: none !important;
						}
					}
					
					/* Colorize the button differently */
					& ~ .menu-button {
						background: var(--theme-primary-primary);
				    color: var(--theme-primary-on-primary);
						
						&:hover,
						&:focus-visible {
							background: var(--theme-button-states-primary-hovered);
						}
					}
				}
				
				/* When the menu toggle is not checked */
				.menu-checkbox:not(:checked) {
						/* Show the proper icon in the button */
						& ~ .menu-button {
						[data-show-when="open"] {
							display: none !important;
						}
					}
				}
				
				/* Hide the download button */
				header button {
					display: none;
				}
			}
		}
		
		/* Large Menu */
		@layer large {
			@media (width >= 930px) {
				nav ul {
					display: flex;
					flex-direction: row;
					gap: 0.2rem;
					align-self: flex-start;
				}
				
				nav a {			
					padding: 0.6em 1.2em;
					border-radius: 999px;
					color: var(--theme-surface-on-surface-variant);
					white-space: nowrap;
					
					&:hover,
					&:focus-visible {
						color: #000;
						background: var(--theme-nav-button-hover);
					}
				}
				.menu-button {
					display: none;
				}
			}
		}
	}
	
	@layer card {
		.card {
			border-radius: 2em;
			
			&.dark {
				background: var(--theme-primary-primary);
	   		color: var(--theme-surface-surface);
			}
		}
	}
}

@layer layout {
	@layer grid {
		body {
			margin: 0;
			display: grid;
			grid-template-columns:
				[fullbleed-start]
				3rem
				[main-start]
				1fr
				[main-end]
				3rem
				[fullbleed-end];
			grid-auto-rows: min-content;
		}
		
		body > * {
			grid-column: fullbleed;
		}
	}
	
	@layer navigation {
		.header-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			
			background: var(--theme-surface-surface);
			z-index: 1;
		}
		
		header {
			display: flex;
			flex-direction: row;
			gap: 2rem;
			align-items: center;
			
			padding-inline: 3rem; /* @TODO: Figure out if we can subgrid for this */
			padding-block: 0.5rem;
			
			button,
			.menu-button {
				margin-left: auto;
			}
		}
	}
	
	@layer welcome {
		#welcome {
			h1 svg {
				height: 1em;
				width: auto;
				display: block;
				margin: 0 auto;
			}
			
			p {
				font-size: 4.5em;
				text-align: center;
				font-weight: 500;
				
				color:  var(--theme-surface-on-surface);
				
				span {
					display: block;
					font-size: 0.7em;
					color: var(--theme-surface-on-surface-variant);
				}
			}
			
			.cta {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 0.3em;
				justify-content: center;

				width: 90%;
				margin: 0 auto;
				min-height: 4rem;
				opacity: 0;
				transition: opacity 0.5s ease;
				visibility: visible;

				button {
					font-size: 1.15em;
					flex-shrink: 0;
					opacity: 0.9;
				}
			}

			.cta.show {
				opacity: 1;
			}
		}
	}
	
}

@layer base {
	html {
		background: var(--theme-surface-surface);
		font-family: "Google Sans Flex", sans-serif;
		font-weight: 400;
		
		font-size: 16px;
		
		color: var(--theme-surface-on-surface);
	}
	
	section {
		/* Make sections fullheight */
		min-height: 100dvh;
		
		&.center {
			/* Center their contents */
			place-content: safe center;
			justify-items: center;
		}
	}

	h2 {
		font-size: 2.5em;
		font-weight: 350;
		margin: 0.5rem 0;
		line-height: 1;

		@media (width >= 930px) {
			width: 50%;
			max-width: 25ch;
		}
	}
	
	p {
		color: var(--theme-surface-on-surface-variant);
	}
	
	@scope (.dark) {
		p {
			color: var(--theme-surface-surface);
		}
	}
}

@layer reset {
	html, body {
		height: 100%;
	}
	
	* {
		box-sizing: border-box;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	ul[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	input, textarea, select, button {
		font-family: inherit;
		font-size: inherit;
	}
	
	a:focus-visible,
	button:focus-visible {
		outline-offset: 0.2rem;
	}
	
	figure {
		margin: 0;
	}
}

@layer util {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
	
	.not-sr-only {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

@layer tokens {
	@layer colors {
		:root {
			--palette-grey-900: #2F3034;
			--palette-grey-800: #45474D;
			--palette-grey-50: #E6EAF0;
			--palette-grey-0: #FFFFFF;
			--palette-grey-1000: #212226;
			--palette-grey-20: #EFF2F7;
			--palette-grey-1200: #121317;
			--palette-grey-1100: #18191D;
			--palette-grey-10: #F8F9FC;
			--palette-grey-100: #E1E6EC;
			--palette-grey-200: #CDD4DC;
			--palette-grey-300: #B2BBC5;
			--palette-grey-400: #B7BFD9;
			--palette-grey-600: #AAB1CC4D;
			--palette-grey-1000-12: #dedfe2;
			--palette-grey-50-20: #414347;
			--palette-grey-15: #F0F1F5;
			--palette-grey-0-rgb: 255, 255, 255;
			--palette-grey-50-rgb: 230, 234, 240;
			--palette-grey-400-rgb: 183, 191, 217;
			--palette-grey-600-rgb: 170, 177, 204;
			--palette-grey-1000-rgb: 33, 34, 38;
			--palette-grey-1200-rgb: 18, 19, 23;
			--theme-surface-surface: var(--palette-grey-0);
			--theme-surface-on-surface: var(--palette-grey-1200);
			--theme-surface-on-surface-variant: var(--palette-grey-800);
			--theme-surface-surface-container: var(--palette-grey-10);
			--theme-surface-surface-container-high: var(--palette-grey-20);
			--theme-surface-surface-container-higher: var(--palette-grey-50);
			--theme-surface-surface-container-highest: var(--palette-grey-100);
			--theme-surface-inverse-surface: var(--palette-grey-1200);
			--theme-surface-inverse-on-surface: var(--palette-grey-10);
			--theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
			--theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
			--theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
			--theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
			--theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
			--theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);
			--theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);
			--theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);
			--theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);
			--theme-inverse-surface: var(--palette-grey-1200);
			--theme-outline: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);
			--theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);
			--theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
			--theme-outline-outline-variant: rgba(33, 34, 38, .06);
			--theme-primary-primary: var(--theme-surface-on-surface);
			--theme-primary-on-primary: var(--theme-surface-surface);
			--theme-tonal-tonal: var(--theme-surface-surface-container);
			--theme-tonal-on-tonal: var(--theme-surface-on-surface);
			--theme-outlined-outlined: var(--theme-surface-surface-transparent);
			--theme-outlined-on-outlined: var(--theme-surface-on-surface);
			--theme-protected-protected: var(--theme-surface-surface-container);
			--theme-protected-on-protected: var(--theme-surface-on-surface);
			--theme-text-text: var(--theme-surface-surface-transparent);
			--theme-text-on-text: var(--theme-surface-on-surface);
			--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
			--theme-text-link-states-hovered: var(--palette-grey-1000);
			--theme-text-link-states-focused: var(--palette-grey-1100);
			--theme-text-link-states-pressed: var(--palette-grey-1000);
			--theme-text-link-states-disabled: #6A6A71;
			--theme-button-states-primary-enabled: var(--theme-primary-primary);
			--theme-button-states-primary-disabled: var(--palette-grey-10);
			--theme-button-states-primary-hovered: var(--palette-grey-900);
			--theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);
			--theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);
			--theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);
			--theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);
			--theme-button-secondary-hover: var(--palette-grey-15);
			--theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);
			--theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
			--theme-button-states-tonal-disabled: var(--palette-grey-10);
			--theme-button-states-protected-enabled: var(--theme-protected-protected);
			--theme-button-states-protected-hovered: var(--palette-grey-20);
			--theme-button-states-protected-disabled: var(--palette-grey-100);
			--theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
			--theme-button-states-disabled: var(--palette-grey-100);
			--theme-button-states-on-disabled: #6A6A71;
			--theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);
			--theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);
			--theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);
			--theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
			--divider: var(--theme-outline-outline-variant);
		}
	}
		
	@layer animations {
		:root {
			--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
			--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
			--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
			--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
			--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
			--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
			--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
			--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
			--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
			--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
			--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
			--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
			--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
			--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
			--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
			--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
			--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
			--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
			--ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
		}
	}
}
@layer util {
	:root {
		--theme-primary-primary: #1976D2;
		--theme-primary-on-primary: #FFFFFF;
		--theme-secondary-button: rgba(25, 118, 210, .10);
		--theme-button-secondary-hover: rgba(25, 118, 210, .16);
		--theme-button-secondary-inverse-hover: rgba(255,255,255,.22);
		--theme-nav-button: rgba(25, 118, 210, .08);
		--theme-nav-button-hover: rgba(25, 118, 210, .16);
		--volt-blue-900: #0D47A1;
		--volt-blue-700: #1565C0;
		--volt-blue-600: #1976D2;
		--volt-blue-500: #2196F3;
		--volt-blue-050: #F5FAFF;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		/* Background removed to let banner show through */
	}

	.header-wrapper {
		/* Background removed - let banner show through */
	}

	header {
		min-height: 4rem;
	}

	.volt-brand img,
	#welcome h1 img {
		display: block;
		width: auto;
	}

	.volt-brand img {
		height: 1.75rem;
	}

	#welcome .welcome-wordmark {
		display: block;
		font-size: clamp(0.775rem, 1.55vw, 1.15rem);
		font-weight: 650;
		letter-spacing: 0.08em;
		line-height: 1.2;
		height: 1.2em;
		color: var(--volt-blue-600);
		text-align: center;
		text-transform: uppercase;
		opacity: 0;
		transition: opacity 0.55s ease;
		visibility: visible;
		margin-bottom: 0.5rem;
	}

	#welcome .welcome-wordmark.show {
		opacity: 1;
	}
	}

	#welcome {
		position: relative;
		overflow: clip;
	}

	#welcome::before {
		content: '';
		position: absolute;
		inset: 0;
		background:
			radial-gradient(circle at calc(var(--ring-x, 50) * 1%) calc(var(--ring-y, 50) * 1%), rgba(21,101,192,.18), transparent 0 12%, rgba(21,101,192,.07) 18%, transparent 28%),
			radial-gradient(circle at 50% 50%, rgba(21,101,192,.08), transparent 24%),
			radial-gradient(circle at 50% 50%, rgba(21,101,192,.04), transparent 38%);
		pointer-events: none;
		opacity: 0;
		animation: fadeInBackground 1.5s ease-in forwards;
	}

	#welcome::after {
		content: '';
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle, rgba(21,101,192,.14) 1px, transparent 1px),
			radial-gradient(circle, rgba(21,101,192,.09) 1px, transparent 1px);
		background-size: 28px 28px, 44px 44px;
		background-position: 0 0, 14px 10px;
		opacity: 0;
		pointer-events: none;
		animation: fadeInBackground 1.5s ease-in forwards;
	}

	@keyframes fadeInBackground {
		from {
			opacity: 0;
		}
		to {
			opacity: 0.95;
		}
	}

	#welcome p {
		max-width: 18ch;
		text-wrap: balance;
		display: grid;
		align-content: start;
	}

	#welcome .hero-type {
		display: block;
		color: var(--theme-surface-on-surface);
		white-space: pre-line;
		line-height: 1.2;
	}

	#welcome .hero-type.typing::after,
	#welcome .hero-type.done::after {
		content: "|";
		background: linear-gradient(var(--volt-blue-700), var(--volt-blue-500));
		background-clip: text;
		color: transparent;
		animation: blink 0.2s ease infinite alternate both;
	}

	#welcome .hero-type.done::after {
		animation: none;
		opacity: 0;
	}

	#welcome .hero-type--title {
		font: inherit;
		display: block;
		line-height: 1.2;
		margin-bottom: 0.8rem;
		padding-top: 1.5rem;
		opacity: 0.9;
	}

	#welcome .welcome-subline {
		display: block;
		font-size: calc(0.46em - 8px);
		line-height: 1.5;
		margin-top: 0.8rem;
		margin-bottom: 0.4rem;
		padding-bottom: 1.5rem;
		max-width: 18ch;
		min-height: 5em;
		margin-inline: auto;
		color: var(--theme-surface-on-surface-variant);
		opacity: 0;
		transform: translateY(0);
		transition: opacity .55s ease;
		visibility: visible;
	}

	#welcome .welcome-subline.fade-in {
		opacity: 1;
		transform: translateY(0);
	}

	#welcome small.welcome-note {
		display: block;
		margin-top: 1rem;
		text-align: center;
		color: var(--theme-surface-on-surface-variant);
		font-size: 1rem;
		min-height: 1.5rem;
		opacity: 0;
		transition: opacity 0.5s ease;
		visibility: visible;
	}

	#welcome small.welcome-note.show {
		opacity: 1;
	}


	.usecase-pills {
		grid-column: main;
		display: flex;
		flex-wrap: wrap;
		gap: .6rem;
		padding: 0 3rem 2rem;
	}

	.usecase-pills span {
		padding: .45rem .8rem;
		border-radius: 999px;
		background: rgba(21,101,192,.08);
		color: var(--theme-surface-on-surface-variant);
		font-size: .9rem;
	}

	#pricing.pricing-split {
		gap: 2rem;
	}

	#pricing.pricing-split > div {
		width: min(28rem, 100%);
		display: grid;
		gap: 1rem;
		padding: 2rem;
		border-radius: 2em;
		background: rgba(255,255,255,.92);
		border: 1px solid rgba(21,101,192,.08);
		box-shadow: 0 18px 42px rgba(13,71,161,.08);
	}

	#pricing.pricing-split h3 span {
		color: var(--volt-blue-700);
	}

	#about.volt-about {
		display: grid;
		grid-template-columns: subgrid;
		gap: 2rem;
		padding-block: 6rem;
	}

	#about.volt-about > * {
		grid-column: main;
	}

	#about .about-intro-block p {
		max-width: 56ch;
		font-size: 1.05rem;
	}

	#about .about-founders {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	#about .about-founder-card {
		padding: 1.75rem;
		border-radius: 2em;
		background: rgba(255,255,255,.92);
		border: 1px solid rgba(21,101,192,.08);
	}

	#about .founder-role {
		color: var(--volt-blue-700);
		margin: .4rem 0 .7rem;
	}

	#about .about-locations {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		padding: 2rem;
		border-radius: 2em;
		background: linear-gradient(135deg, var(--volt-blue-700), var(--volt-blue-900));
	}

	#about .about-location-card {
		text-align: center;
		padding: 1.25rem;
		border-radius: 1.5rem;
		background: rgba(255,255,255,.08);
		color: white;
	}

	#about .location-flag {
		display: block;
		font-size: 2rem;
		margin-bottom: .4rem;
	}

	#about .about-location-card p,
	#about .about-location-card h4 {
		color: white;
	}

	#about .about-logos {
		display: grid;
		gap: 1rem;
	}

	#about .about-logo-track {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		align-items: center;
	}

	#about .about-logo-track img {
		height: 3rem;
		width: auto;
		filter: grayscale(100%) opacity(.72);
	}

	.volt-footer {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		padding: 3rem;
		border-top: 1px solid rgba(21,101,192,.08);
	}

	.volt-footer p,
	.volt-footer a,
	.volt-footer li {
		color: var(--theme-surface-on-surface-variant);
	}

	@media (width < 930px) {
		#about .about-founders,
		#about .about-locations,
		.volt-footer {
			grid-template-columns: 1fr;
		}

		#pricing.pricing-split {
			gap: 1rem;
		}
	}



@layer util {
	#welcome .welcome-subline {
		max-width: none !important;
		width: max-content !important;
		max-inline-size: none !important;
		white-space: nowrap !important;
		margin-inline: auto !important;
	}
}



@layer util {
	.footer-logo {
		height: 2.4rem;
		width: auto;
		margin-bottom: .9rem;
	}

	.footer-brand-block {
		display: grid;
		align-content: start;
	}

	.volt-footer .footer-col ul,
	.volt-footer .footer-col li {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.volt-footer .footer-col ul {
		display: grid;
		gap: .45rem;
	}

	.volt-footer .footer-col a {
		text-decoration: none !important;
		border-bottom: 0 !important;
	}

	#about .about-logo-carousel {
		overflow: hidden;
		padding: 1.4rem 0;
		border-radius: 2em;
		background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.98));
		border: 1px solid rgba(21,101,192,.08);
		box-shadow: 0 20px 48px rgba(13,71,161,.08);
		mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
		-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	}

	#about .about-logo-track {
		display: flex;
		gap: 3rem;
		align-items: center;
		width: max-content;
		flex-wrap: nowrap;
		animation: marqueeLeft 28s linear infinite;
	}

	#about .about-logo-carousel:hover .about-logo-track {
		animation-play-state: paused;
	}

	#about .about-logo-track img {
		height: 3.4rem;
		width: auto;
		filter: grayscale(100%) opacity(.72);
		transition: filter .2s ease, transform .2s ease;
	}

	#about .about-logo-track img:hover {
		filter: grayscale(0%) opacity(1);
		transform: translateY(-2px);
	}
}



@layer util {
	@keyframes aboutLogoLoop {
		0% { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}

	#about .about-logo-track {
		animation: aboutLogoLoop 24s linear infinite !important;
		width: max-content !important;
		flex-wrap: nowrap !important;
	}

	#about .about-logo-carousel:hover .about-logo-track {
		animation-play-state: paused;
	}

	#pricing.pricing-split {
		display: grid;
		grid-template-columns: 1.05fr .95fr;
		gap: 1.5rem;
		align-items: stretch;
		padding: 0 3rem;
	}

	#pricing.pricing-split > div {
		width: 100%;
		min-height: 18rem;
		padding: 2.2rem;
		align-content: space-between;
		background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.98));
		border: 1px solid rgba(21,101,192,.08);
		box-shadow: 0 20px 48px rgba(13,71,161,.08);
	}

	#pricing.pricing-split > div:first-child {
		background:
			radial-gradient(circle at top right, rgba(33,150,243,.12), transparent 28%),
			linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,247,255,.98));
	}

	#pricing.pricing-split h3 {
		font-size: clamp(1.8rem, 3vw, 2.6rem);
		line-height: 1;
	}

	#pricing.pricing-split h3 span {
		display: block;
		margin-top: .35rem;
		font-size: .72em;
	}

	#pricing.pricing-split p {
		max-width: 36ch;
		line-height: 1.35;
	}

	#pricing.pricing-split button {
		justify-self: start;
	}

	@media (width < 930px) {
		#pricing.pricing-split {
			grid-template-columns: 1fr;
			padding: 0;
		}
	}
}


@layer reset, tokens, base, shell, components, sections, motion, utilities;

@layer reset {
    html, body {
        min-height: 100%;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    button, input, textarea, select {
        font: inherit;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    ul {
        list-style: none;
    }
}

@layer tokens {
    :root {
        --blue-900: #0D47A1;
        --blue-800: #1256b8;
        --blue-700: #1565C0;
        --blue-600: #1976D2;
        --blue-500: #2196F3;
        --blue-100: #EAF4FF;
        --blue-050: #F5FAFF;

        --surface: #FFFFFF;
        --surface-2: #F8F9FC;
        --surface-3: #EFF2F7;
        --surface-4: #E6EAF0;
        --text: #18191D;
        --text-2: #45474D;
        --text-3: #667085;
        --border: rgba(24, 25, 29, 0.08);
        --border-strong: rgba(21, 101, 192, 0.14);

        --shadow-sm: 0 8px 24px rgba(13, 71, 161, 0.06);
        --shadow-md: 0 20px 60px rgba(13, 71, 161, 0.10);
        --shadow-lg: 0 30px 80px rgba(13, 71, 161, 0.18);
        --shadow-dark: 0 30px 90px rgba(0, 0, 0, 0.35);

        --radius-sm: 1rem;
        --radius-md: 1.5rem;
        --radius-lg: 2rem;
        --radius-xl: 2.5rem;
        --radius-pill: 999px;

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;
        --space-9: 6rem;

        --rail-max: 1200px;
        --gutter: clamp(1rem, 3vw, 3rem);
        --chapter-pad-y: clamp(5rem, 10vh, 8rem);

        --ease-standard: cubic-bezier(.25, .46, .45, .94);
        --ease-decel: cubic-bezier(.19, 1, .22, 1);
        --ease-soft: cubic-bezier(.4, 0, .2, 1);
        --dur-fast: 180ms;
        --dur-med: 320ms;
        --dur-slow: 700ms;

        --ring-x: 50;
        --ring-y: 50;
        --ring-radius: 22rem;
        --ring-interactive: 0;
    }
}

@layer base {
    html {
        font-family: "Google Sans Flex", -apple-system, BlinkMacSystemFont, sans-serif;
        color: var(--text);
        background: var(--surface);
        scroll-behavior: smooth;
    }

    body {
        color: var(--text);
        /* Background removed to let banner show through */
        overflow-x: hidden;
    }

    h1, h2, h3, h4 {
        letter-spacing: -0.04em;
        font-weight: 420;
        line-height: 0.95;
        text-wrap: balance;
    }

    h1 {
        font-size: clamp(3.4rem, 8vw, 7rem);
    }

    h2 {
        font-size: clamp(2.2rem, 5vw, 4rem);
    }

    h3 {
        font-size: clamp(1.2rem, 2vw, 1.8rem);
    }

    p {
        color: var(--text-2);
        line-height: 1.45;
        text-wrap: pretty;
    }
}

@layer shell {
    .site-main,
    .site-footer,
    .header-wrapper {
        width: 100%;
    }

    .chapter,
    .site-footer {
        display: grid;
        grid-template-columns:
            [full-start] minmax(var(--gutter), 1fr)
            [main-start] minmax(0, var(--rail-max))
            [main-end] minmax(var(--gutter), 1fr)
            [full-end];
        position: relative;
    }

    .chapter-main,
    .site-footer > * {
        grid-column: main;
        width: 100%;
    }

    .chapter {
        min-height: 100dvh;
        padding-block: var(--chapter-pad-y);
        align-items: center;
    }

    .center .chapter-main,
    .chapter.center .chapter-main {
        display: grid;
        place-items: center;
    }
}

@layer components {
    .eyebrow {
        font-size: 0.85rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #1976d2;
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    section.animated .eyebrow {
        opacity: 1;
    }

    .eyebrow--light {
        color: rgba(255,255,255,0.78);
    }

    .section-head {
        display: grid;
        gap: var(--space-4);
        margin-bottom: var(--space-7);
        max-width: 56rem;
    }

    .section-head--compact {
        margin-bottom: var(--space-5);
        max-width: none;
    }

    .section-intro {
        font-size: 1.12rem;
        max-width: 54ch;
    }

    .card {
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(12px);
    }

    .dark-card,
    .card.dark {
        background:
            radial-gradient(circle at top right, rgba(33, 150, 243, 0.22), transparent 32%),
            radial-gradient(circle at left bottom, rgba(21, 101, 192, 0.20), transparent 30%),
            linear-gradient(180deg, rgba(16, 30, 65, 0.92), rgba(8, 20, 48, 0.96));
        color: white;
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: var(--shadow-dark);
        backdrop-filter: blur(20px);
    }

    .dark-card p,
    .card.dark p {
        color: rgba(255,255,255,0.78);
    }

    button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        border: 0;
        cursor: pointer;
        border-radius: var(--radius-pill);
        padding: 0.82rem 1.35rem;
        background: var(--blue-700);
        color: white;
        transition:
            transform var(--dur-fast) var(--ease-standard),
            background var(--dur-fast) var(--ease-standard),
            box-shadow var(--dur-fast) var(--ease-standard),
            opacity var(--dur-fast) var(--ease-standard);
        box-shadow: 0 10px 28px rgba(21, 101, 192, 0.22);
        white-space: nowrap;
    }

    button:hover,
    button:focus-visible {
        background: var(--blue-800);
        transform: translateY(-1px);
    }

    button.secondary {
        background: rgba(21, 101, 192, 0.08);
        color: var(--text);
        border: 1px solid var(--border-strong);
        box-shadow: none;
    }

    button.secondary:hover,
    button.secondary:focus-visible {
        background: rgba(21, 101, 192, 0.12);
    }

    .dark-card button,
    .card.dark button {
        background: white;
        color: var(--blue-700);
        box-shadow: none;
    }

    .dark-card button.secondary,
    .card.dark button.secondary {
        background: rgba(255,255,255,0.12);
        color: white;
        border: 1px solid rgba(255,255,255,0.16);
    }

    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
}

@layer sections {
    .header-wrapper {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 1000;
        padding: 1rem var(--gutter) 0;
        transition: transform var(--dur-med) var(--ease-standard), opacity var(--dur-med) var(--ease-standard);
    }

    .header-wrapper.is-hidden {
        transform: translateY(-110%);
    }

    .site-header {
        max-width: calc(var(--rail-max) + 3rem);
        margin: 0 auto;
        min-height: 4rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.7rem 1rem;
        border-radius: var(--radius-pill);
        background: rgba(255,255,255,0.82);
        border: 1px solid rgba(255,255,255,0.7);
        box-shadow: 0 12px 40px rgba(13, 71, 161, 0.10);
        backdrop-filter: blur(16px);
        transition: all var(--dur-med) var(--ease-standard);
    }

    .header-wrapper.is-scrolled .site-header {
        min-height: 3.5rem;
        box-shadow: 0 18px 55px rgba(13, 71, 161, 0.12);
    }

    .brand-mark {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        margin-right: 0.75rem;
    }

    .brand-mark img {
        height: 2rem;
        width: auto;
        opacity: 0.8;
    }

    .menu-checkbox {
        display: none;
    }

    .menu-button {
        display: none;
        margin-left: auto;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        place-items: center;
        cursor: pointer;
        background: rgba(21, 101, 192, 0.06);
        position: relative;
        z-index: 100;
    }

    .menu-button:hover {
        background: rgba(21, 101, 192, 0.12);
    }

    .menu-button [data-show-when="open"] {
        display: none;
    }

    .menu-checkbox:checked ~ .menu-button [data-show-when="closed"] {
        display: none;
    }

    .menu-checkbox:checked ~ .menu-button [data-show-when="open"] {
        display: block;
    }

    .site-nav {
        margin-left: auto;
    }

    .site-nav ul {
        display: flex;
        gap: 0.25rem;
        align-items: center;
    }

    .site-nav a {
        display: inline-flex;
        align-items: center;
        padding: 0.6rem 1rem;
        border-radius: var(--radius-pill);
        color: var(--text-2);
        transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
    }

    .site-nav a:hover,
    .site-nav a:focus-visible {
        background: rgba(21, 101, 192, 0.08);
        color: var(--text);
    }

    .header-cta {
        margin-left: 0.5rem;
        opacity: 0.8;
    }

    .lang-switcher {
        display: flex;
        gap: 0.25rem;
        margin-left: 1rem;
    }

    .lang-switch {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
        font-weight: 600;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--text-2);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .lang-switch:hover {
        background: rgba(21, 101, 192, 0.08);
        color: var(--text);
        border-color: rgba(21, 101, 192, 0.3);
    }

    .lang-switch.active {
        background: #1976d2;
        color: white;
        border-color: #1976d2;
    }

    .chapter--hero {
        overflow: clip;
        padding-top: calc(var(--chapter-pad-y) + 3rem);
    }

    .hero-bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .hero-bg__fallback {
        position: absolute;
        inset: -5%;
        background:
            radial-gradient(circle at 50% 50%, rgba(21, 101, 192, 0.20), transparent 0 18%),
            radial-gradient(circle at 50% 50%, rgba(21, 101, 192, 0.10), transparent 24%),
            radial-gradient(circle at 30% 25%, rgba(33, 150, 243, 0.12), transparent 24%),
            radial-gradient(circle at 75% 65%, rgba(13, 71, 161, 0.09), transparent 26%),
            linear-gradient(180deg, rgba(255,255,255,1), rgba(245,250,255,1));
        filter: saturate(110%);
    }

    .hero-bg__ring {
        position: absolute;
        left: calc(var(--ring-x) * 1%);
        top: calc(var(--ring-y) * 1%);
        width: calc(var(--ring-radius) * 2);
        height: calc(var(--ring-radius) * 2);
        translate: -50% -50%;
        border-radius: 50%;
        border: 1px solid rgba(21, 101, 192, 0.18);
        box-shadow:
            0 0 0 28px rgba(21, 101, 192, 0.05),
            0 0 0 80px rgba(21, 101, 192, 0.025),
            inset 0 0 80px rgba(255,255,255,0.35);
        opacity: calc(0.45 + (var(--ring-interactive) * 0.25));
        transition: left 1.2s var(--ease-decel), top 1.2s var(--ease-decel), opacity var(--dur-med) var(--ease-standard);
    }

    .hero-bg__particles {
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle at 14% 18%, rgba(21, 101, 192, 0.14) 0 1px, transparent 1.5px),
            radial-gradient(circle at 72% 22%, rgba(21, 101, 192, 0.16) 0 1px, transparent 1.5px),
            radial-gradient(circle at 64% 78%, rgba(21, 101, 192, 0.14) 0 1px, transparent 1.5px),
            radial-gradient(circle at 18% 76%, rgba(21, 101, 192, 0.14) 0 1px, transparent 1.5px),
            radial-gradient(circle at 52% 42%, rgba(21, 101, 192, 0.11) 0 1px, transparent 1.5px);
        background-size: 18rem 18rem, 24rem 24rem, 20rem 20rem, 22rem 22rem, 16rem 16rem;
        opacity: 0.7;
    }

    .hero-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(6px);
        opacity: 0.5;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(21,101,192,0.28) 45%, rgba(21,101,192,0.02) 70%);
    }

    .hero-orb--1 {
        width: 16rem;
        height: 16rem;
        left: 8%;
        top: 18%;
    }

    .hero-orb--2 {
        width: 10rem;
        height: 10rem;
        right: 12%;
        top: 22%;
    }

    .hero-orb--3 {
        width: 14rem;
        height: 14rem;
        right: 18%;
        bottom: 12%;
    }

    .hero-stack {
        position: relative;
        z-index: 2;
        display: grid;
        justify-items: center;
        align-items: center;
        gap: var(--space-5);
        text-align: center;
        max-width: 56rem;
        margin-inline: auto;
    }

    .highlight {
        color: var(--blue-700);
    }

    .hero-title {
        display: grid;
        gap: 0;
        line-height: 0.95;
    }

    .hero-type-line {
        display: inline-block;
        min-height: 1em;
        white-space: pre-wrap;
    }

    .hero-type-line.typing::after {
        content: "|";
        margin-left: 0.08em;
        color: var(--blue-700);
        animation: blinkCaret 0.8s steps(1) infinite;
    }

    .hero-copy {
        font-size: clamp(1.15rem, 2vw, 1.5rem);
        color: var(--text);
        max-width: 34ch;
        margin-inline: auto;
        text-align: center;
    }

    .hero-type--subtitle {
        opacity: 0;
        transform: translateY(0.75rem);
        transition: opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
    }

    .hero-type--subtitle.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .hero-copy span {
        display: block;
        color: var(--text-2);
        margin-top: 0.2rem;
    }

    .hero-note {
        color: var(--text-3);
        font-size: 0.95rem;
    }

    .cta {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 0.6rem;
        justify-content: center;
        min-height: 3.5rem;
    }

    .chapter--metrics {
        background: linear-gradient(180deg, transparent, rgba(21,101,192,0.03) 40%, transparent);
    }

    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .metric-card {
        padding: 2.2rem;
        min-height: 18rem;
        display: grid;
        align-content: start;
        gap: 1rem;
    }

    .benefit-number {
        font-size: clamp(2.6rem, 4vw, 4rem);
        line-height: 0.95;
        color: var(--blue-700);
        font-weight: 520;
    }

    .chapter--product {
        background:
            radial-gradient(circle at 85% 20%, rgba(21,101,192,0.08), transparent 24%),
            linear-gradient(180deg, rgba(245,250,255,0.95), #ffffff);
    }

    .product-layout {
        display: grid;
        grid-template-columns: minmax(16rem, 25rem) minmax(0, 1fr);
        gap: var(--space-7);
        align-items: start;
    }

    .product-rail {
        position: sticky;
        top: 7rem;
        display: grid;
        gap: var(--space-5);
        padding-top: 1rem;
    }

    .product-features {
        display: grid;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 2rem;
        display: grid;
        gap: 1rem;
    }

    .step-meta {
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--blue-700);
        font-weight: 600;
    }

    .step-subtitle {
        color: var(--blue-700);
        font-size: 1rem;
        font-weight: 600;
    }

    .feature-list {
        display: grid;
        gap: 0.75rem;
    }

    .feature-list li {
        display: grid;
        gap: 0.15rem;
        padding: 1rem 1.1rem;
        border-radius: 1.25rem;
        background: var(--surface-2);
        border: 1px solid var(--border);
    }

    .feature-list strong {
        color: var(--text);
        font-size: 0.95rem;
    }

    .intelligence-block {
        margin-top: 3rem;
    }

    .intelligence-visual {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }

    .intelligence-comparison {
        padding: 1rem 1.5rem;
        border-radius: 0.6rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .intelligence-comparison--old {
        background: rgba(255, 60, 60, 0.06);
        border: 1px solid rgba(255, 60, 60, 0.15);
    }

    .intelligence-comparison--ai {
        background: rgba(77, 163, 255, 0.06);
        border: 1px solid rgba(77, 163, 255, 0.2);
    }

    .intelligence-comparison h5 {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        min-width: 110px;
        text-align: left;
        margin: 0;
    }

    .intelligence-comparison--old h5 {
        color: rgba(200, 50, 50, 0.85);
    }

    .intelligence-comparison--ai h5 {
        color: rgba(40, 120, 220, 0.9);
    }

    .intelligence-flow {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: nowrap;
    }

    .intelligence-flow .flow-step {
        font-size: 0.8rem;
        padding: 0.25rem 0.6rem;
        border-radius: 0.35rem;
        white-space: nowrap;
    }

    .intelligence-comparison--old .flow-step {
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-2);
    }

    .intelligence-comparison--old .flow-step--broken {
        background: rgba(255, 60, 60, 0.08);
        color: rgba(200, 40, 40, 0.85);
        text-decoration: line-through;
    }

    .intelligence-comparison--old .flow-arrow {
        color: var(--text-3);
        font-size: 0.75rem;
    }

    .intelligence-comparison--ai .flow-step {
        background: rgba(77, 163, 255, 0.08);
        color: var(--text-1);
    }

    .intelligence-comparison--ai .flow-step--reroute {
        background: rgba(40, 180, 120, 0.1);
        color: rgba(20, 130, 80, 0.95);
        font-weight: 600;
    }

    .intelligence-comparison--ai .flow-arrow {
        color: rgba(50, 140, 255, 0.6);
        font-size: 0.75rem;
    }

    @media (max-width: 600px) {
        .intelligence-comparison {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
        .intelligence-flow {
            flex-wrap: wrap;
        }
    }

    .chapter--showcase {
        overflow: clip;
    }

    .showcase-shell {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
    }

    .showcase-nav {
        width: 3rem;
        height: 3rem;
        padding: 0;
        border-radius: 50%;
        background: rgba(21,101,192,0.08);
        color: var(--text);
        border: 1px solid var(--border-strong);
        box-shadow: none;
    }

    .showcase-track {
        display: flex;
        gap: 1.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-block: 0.5rem 1rem;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    }

    .showcase-track::-webkit-scrollbar {
        display: none;
    }

    .showcase-slide {
        flex: 0 0 clamp(16rem, 38vw, 23rem);
        scroll-snap-align: center;
        padding: 2rem;
        display: grid;
        gap: 1rem;
        opacity: 0.42;
        transform: scale(0.96);
        transition: transform var(--dur-med) var(--ease-standard), opacity var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard);
    }

    .showcase-slide.is-active {
        opacity: 1;
        transform: scale(1);
        box-shadow: var(--shadow-md);
    }

    .result-stats {
        display: flex;
        gap: 1.5rem;
    }

    .stat {
        display: grid;
        gap: 0.25rem;
    }

    .stat-number {
        font-size: clamp(2rem, 3vw, 3rem);
        color: var(--blue-700);
        line-height: 0.95;
        font-weight: 520;
    }

    .stat-label {
        font-size: 0.88rem;
        color: var(--text-3);
    }

    .level-tag {
        display: inline-flex;
        width: fit-content;
        padding: 0.45rem 0.75rem;
        border-radius: var(--radius-pill);
        background: var(--surface-3);
        color: var(--text-2);
        font-size: 0.85rem;
        margin-top: auto;
    }

    .showcase-status {
        margin-top: 1rem;
        color: var(--text-3);
        font-size: 0.95rem;
        text-align: center;
    }

    .chapter--platform {
        background: linear-gradient(180deg, rgba(245,250,255,0.8), #fff);
    }

    .platform-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .platform-card {
        padding: 2rem;
        display: grid;
        gap: 1rem;
    }

    .how-icon {
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgba(21,101,192,0.16));
        border: 1px solid rgba(21,101,192,0.10);
        color: var(--blue-700);
    }

    .how-price {
        color: var(--blue-700);
        font-weight: 600;
    }

    .platform-card ul {
        display: grid;
        gap: 0.45rem;
    }

    .integration-band {
        margin-top: 2rem;
        padding: 2rem;
        border-radius: var(--radius-xl);
        background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(245,250,255,0.92));
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
    }

    .logo-marquee {
        overflow: hidden;
        position: relative;
        width: 100%;
        mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }

    .logo-track {
        display: flex;
        align-items: center;
        width: max-content;
    }

    .logo-track--integrations {
        gap: 2.5rem;
    }

    .logo-track--references {
        gap: 3rem;
    }

    .integration-logo {
        height: 3rem;
        width: auto;
        object-fit: contain;
        filter: grayscale(100%) opacity(0.7);
        transition: filter var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
    }

    .integration-logo:hover,
    .reference-logo:hover {
        filter: grayscale(0%) opacity(1);
        transform: translateY(-2px);
    }

    .reference-logo {
        height: 4rem;
        width: auto;
        object-fit: contain;
        filter: grayscale(100%) opacity(0.72);
        transition: filter var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
    }

    .chapter--references {
        min-height: 70dvh;
    }

    .chapter--platform + .chapter--references {
        padding-top: 2rem;
    }

    .chapter--dark,
    .chapter--dark-alt,
    .chapter--cta {
        background:
            radial-gradient(circle at top left, rgba(33,150,243,0.12), transparent 22%),
            radial-gradient(circle at bottom right, rgba(21,101,192,0.12), transparent 24%),
            linear-gradient(180deg, #0a1737 0%, #07132d 100%);
        color: #e3f2fd;
    }

    .chapter--dark h2,
    .chapter--dark-alt h2,
    .chapter--cta h2,
    .chapter--dark h3,
    .chapter--dark-alt h3,
    .chapter--cta h3 {
        color: #ffffff;
    }

    .chapter--dark .typewriter,
    .chapter--dark-alt .typewriter,
    .chapter--cta .typewriter {
        --typewriter-text-color: #ffffff;
    }

    .european-panel {
        padding: clamp(2rem, 5vw, 4rem);
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 24rem);
        gap: 2rem;
        align-items: center;
        border-radius: var(--radius-xl);
    }

    .european-features-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.25rem;
    }

    .european-feature-card {
        padding: 1.15rem;
        border-radius: 1.35rem;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.10);
    }

    .european-feature-card h3 {
        margin-bottom: 0.5rem;
        color: white;
    }

    .european-visual {
        display: grid;
        gap: 1.25rem;
        justify-items: center;
    }

    .eu-stars {
        width: min(22rem, 100%);
        padding: 2rem;
        filter: drop-shadow(0 24px 50px rgba(0,0,0,0.28));
    }

    .european-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.8rem;
        width: 100%;
    }

    .stat-box {
        padding: 1rem;
        border-radius: 1.25rem;
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.08);
        text-align: center;
    }

    .stat-box .stat-number {
        color: white;
        font-size: 1.4rem;
    }

    .stat-box .stat-label {
        color: rgba(255,255,255,0.72);
    }

    .urgency-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .urgency-card {
        padding: 1.8rem;
        display: grid;
        gap: 1rem;
        min-height: 17rem;
    }

    .urgency-icon {
        width: 3rem;
        height: 3rem;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.12);
        color: white;
    }

    /* Expert Factory Section */
    .chapter--factory {
        background: #050508;
        color: #e2e8f0;
        overflow: hidden;
        position: relative;
    }

    .factory-content {
        position: relative;
        z-index: 2;
    }

    .chapter--factory::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 80px),
            repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 80px);
        pointer-events: none;
        z-index: 0;
    }

    .chapter--factory h2,
    .chapter--factory h3 {
        color: #ffffff;
    }

    .chapter--factory .typewriter {
        --typewriter-text-color: #ffffff;
    }

    .chapter--factory .eyebrow--glow {
        color: #4da3ff;
        text-shadow: 0 0 12px rgba(19,101,192,0.7), 0 0 40px rgba(19,101,192,0.3);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 600;
    }

    .factory-intro {
        color: #94a3b8;
        max-width: 38rem;
    }

    /* Beam animation */
    .factory-beam-wrapper {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .beam-container {
        position: relative;
        width: 100%;
        height: 280px;
        overflow: hidden;
    }

    #beamScannerCanvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 5%, rgba(0,0,0,0.08) 10%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0.75) 35%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.75) 65%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.08) 90%, rgba(0,0,0,0.02) 95%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 5%, rgba(0,0,0,0.08) 10%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0.75) 35%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.75) 65%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.08) 90%, rgba(0,0,0,0.02) 95%, transparent 100%);
    }

    /* Left side: multiline text flowing RIGHTWARD toward beam */
    .beam-stream {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        z-index: 1;
        mask-image: linear-gradient(to right, transparent, black 10%, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 85%, transparent 100%);
    }

    .beam-text-content {
        color: #4da3ff;
        font-size: 0.8rem;
        line-height: 1.7;
        padding: 0 2rem;
        white-space: nowrap;
        flex-shrink: 0;
        display: inline-block;
        text-shadow: 0 0 8px rgba(77, 163, 255, 0.6), 0 0 20px rgba(77, 163, 255, 0.3);
    }

    /* Right side: ENDLESS uninterrupted stream of workflow nodes */
    .beam-nodes-container {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        z-index: 1;
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    }

    .beam-nodes-strip {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .beam-node-group {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0;
    }

    .beam-wf-node {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 1.2rem;
        border-radius: 0.55rem;
        background: rgba(10, 30, 60, 0.6);
        border: 1px solid var(--node-color, #4da3ff);
        box-shadow: 0 0 8px var(--node-color, #4da3ff),
                    0 0 20px color-mix(in srgb, var(--node-color, #4da3ff) 60%, transparent),
                    0 0 40px color-mix(in srgb, var(--node-color, #4da3ff) 30%, transparent),
                    inset 0 0 12px color-mix(in srgb, var(--node-color, #4da3ff) 15%, transparent);
        white-space: nowrap;
        flex-shrink: 0;
        min-width: fit-content;
    }

    .beam-wf-icon {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        color: #fff;
    }

    .beam-wf-icon svg {
        width: 100%;
        height: 100%;
        display: block;
        filter: drop-shadow(0 0 10px #00d4ff)
                drop-shadow(0 0 20px #00d4ff)
                drop-shadow(0 0 30px #00d4ff);
        animation: iconGlow 4s ease-in-out infinite;
    }

    @keyframes iconGlow {
        0% {
            filter: drop-shadow(0 0 10px #00d4ff)
                    drop-shadow(0 0 20px #00d4ff)
                    drop-shadow(0 0 30px #00d4ff);
        }
        25% {
            filter: drop-shadow(0 0 10px #0099ff)
                    drop-shadow(0 0 20px #0099ff)
                    drop-shadow(0 0 30px #0099ff);
        }
        50% {
            filter: drop-shadow(0 0 10px #0044cc)
                    drop-shadow(0 0 20px #0044cc)
                    drop-shadow(0 0 30px #0044cc);
        }
        75% {
            filter: drop-shadow(0 0 10px #0099ff)
                    drop-shadow(0 0 20px #0099ff)
                    drop-shadow(0 0 30px #0099ff);
        }
        100% {
            filter: drop-shadow(0 0 10px #00d4ff)
                    drop-shadow(0 0 20px #00d4ff)
                    drop-shadow(0 0 30px #00d4ff);
        }
    }
    }

    .beam-wf-label {
        color: var(--node-color, #4da3ff);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
    }

    .beam-wf-connector {
        width: 28px;
        height: 2px;
        background: linear-gradient(to right, #4da3ff, rgba(77,163,255,0.4));
        box-shadow: 0 0 6px #4da3ff, 0 0 12px rgba(77,163,255,0.4);
        flex-shrink: 0;
        margin: 0 0.4rem;
    }

    .factory-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        margin-top: 2.5rem;
    }

    .factory-step {
        position: relative;
        padding: 2rem 1.5rem;
        border-radius: 1.25rem;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        backdrop-filter: blur(8px);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .factory-step:hover {
        border-color: rgba(19,101,192,0.4);
        box-shadow: 0 0 30px rgba(19,101,192,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .factory-step-number {
        display: none;
    }

    .factory-step-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 2rem;
        background: rgba(19,101,192,0.12);
        border: 1px solid rgba(19,101,192,0.3);
        color: #4da3ff;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.75rem;
    }

    .factory-step h3 {
        margin-bottom: 0.75rem;
        font-size: 1.15rem;
    }

    .factory-step p {
        color: #94a3b8;
        font-size: 0.92rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .factory-time-tag {
        display: inline-block;
        padding: 0.25rem 0.6rem;
        border-radius: 0.4rem;
        background: rgba(77, 163, 255, 0.08);
        border: 1px solid rgba(77, 163, 255, 0.2);
        color: #4da3ff;
        font-size: 0.7rem;
        font-weight: 500;
    }

    .factory-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 2.5rem;
        justify-content: center;
    }

    .factory-tag {
        padding: 0.5rem 1.25rem;
        border-radius: 2rem;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        color: #cbd5e1;
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .chapter--pricing {
        background: linear-gradient(180deg, rgba(245,250,255,0.7), #fff);
    }

    .pricing-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .pricing-card {
        padding: 2.2rem;
        display: grid;
        gap: 1rem;
        align-content: start;
    }

    .pricing-card.featured {
        border-color: rgba(21,101,192,0.18);
        box-shadow: var(--shadow-md);
    }

    .pricing-badge {
        display: inline-flex;
        width: fit-content;
        padding: 0.4rem 0.8rem;
        border-radius: var(--radius-pill);
        background: rgba(21,101,192,0.10);
        color: var(--blue-700);
        font-size: 0.82rem;
        font-weight: 600;
    }

    .price {
        font-size: clamp(2.2rem, 4vw, 4rem);
        line-height: 1;
        color: var(--text);
        font-weight: 520;
    }

    .pricing-card.featured .price {
        color: var(--theme-primary-primary);
    }

    .price span {
        font-size: 0.34em;
        color: var(--text-3);
        margin-left: 0.2rem;
    }

    .pricing-subtitle {
        color: var(--text-3);
    }

    .pricing-note {
        color: var(--text-3);
        padding: 1.5rem 2rem;
        margin-top: 2rem;
    }

    .pricing-features {
        display: grid;
        gap: 0.85rem;
        margin-top: 0.5rem;
    }

    .pricing-features li {
        padding-top: 0.85rem;
        border-top: 1px solid var(--border);
    }

    .cta-card {
        padding: clamp(2rem, 5vw, 4rem);
        display: grid;
        gap: 1.2rem;
        justify-items: center;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cta-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background:
            linear-gradient(45deg,
                rgba(33, 150, 243, 0.15) 0%,
                rgba(21, 101, 192, 0.1) 25%,
                rgba(13, 71, 161, 0.15) 50%,
                rgba(21, 101, 192, 0.1) 75%,
                rgba(33, 150, 243, 0.15) 100%);
        animation: rotateGradient 10s linear infinite;
        z-index: 0;
    }

    @keyframes rotateGradient {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .cta-card-content {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 1.2rem;
        justify-items: center;
    }

    .cta-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .cta-primary-btn:hover {
        animation: ctaGlowHover 2s ease-in-out infinite;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 153, 255, 0.3));
        color: #ffffff;
    }

    @keyframes ctaGlowHover {
        0%, 100% {
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.8), 0 0 40px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 212, 255, 0.4), 0 0 100px rgba(0, 212, 255, 0.3), inset 0 0 20px rgba(0, 212, 255, 0.2);
        }
        25%, 75% {
            box-shadow: 0 0 20px rgba(0, 153, 255, 0.8), 0 0 40px rgba(0, 153, 255, 0.6), 0 0 60px rgba(0, 153, 255, 0.4), 0 0 100px rgba(0, 153, 255, 0.3), inset 0 0 20px rgba(0, 153, 255, 0.2);
        }
        50% {
            box-shadow: 0 0 20px rgba(0, 68, 204, 0.8), 0 0 40px rgba(0, 68, 204, 0.6), 0 0 60px rgba(0, 68, 204, 0.4), 0 0 100px rgba(0, 68, 204, 0.3), inset 0 0 20px rgba(0, 68, 204, 0.2);
        }
    }

    .contact-note,
    .contact-note a {
        color: rgba(255,255,255,0.78);
    }

    .chapter--about {
        background: linear-gradient(180deg, rgba(245,250,255,0.45), #fff);
    }

    .founders-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .founder-card {
        padding: 1.8rem;
        display: grid;
        gap: 0.8rem;
    }

    .founder-title {
        color: var(--blue-700);
        font-weight: 600;
    }

    .locations-strip {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        padding: 1.5rem;
        border-radius: var(--radius-xl);
        background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
        box-shadow: var(--shadow-md);
    }

    .location-card {
        text-align: center;
        padding: 1.25rem;
        border-radius: 1.5rem;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.10);
    }

    .location-flag {
        display: block;
        font-size: 2rem;
        margin-bottom: 0.45rem;
    }

    .location-card h4 {
        color: white;
        margin-bottom: 0.35rem;
    }

    .location-card p {
        color: rgba(255,255,255,0.76);
    }

    .site-footer {
        padding-block: 1rem 1.5rem;
        background: #081224;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .site-footer::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background:
            linear-gradient(45deg,
                rgba(13, 71, 161, 0.4) 0%,
                rgba(25, 118, 210, 0.45) 20%,
                rgba(8, 18, 36, 0.2) 35%,
                rgba(13, 71, 161, 0.4) 50%,
                rgba(25, 118, 210, 0.45) 70%,
                rgba(8, 18, 36, 0.2) 85%,
                rgba(13, 71, 161, 0.4) 100%);
        animation: rotateGradient 12s linear infinite;
        filter: blur(40px);
        z-index: 0;
    }

    .footer-grid {
        grid-column: main;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
        position: relative;
        z-index: 1;
    }

    .footer-logo {
        height: 2.5rem;
        width: auto;
    }

    .footer-col h4 {
        margin-bottom: 0.75rem;
        color: white;
    }

    .footer-col p,
    .footer-col a {
        color: rgba(255,255,255,0.68);
    }

    .footer-col ul {
        display: grid;
        gap: 0.45rem;
    }

    .footer-bottom {
        grid-column: main;
        display: flex;
        position: relative;
        z-index: 1;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.62);
    }

    .social-links {
        display: flex;
        gap: 1rem;
    }
}

@layer motion {
    @keyframes blinkCaret {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
    }

    @keyframes floatOrb {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(0, -1.5rem, 0) scale(1.03); }
    }

    @keyframes driftParticles {
        0% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0.75rem, -1rem, 0); }
        100% { transform: translate3d(0, 0, 0); }
    }

    @keyframes pulseRing {
        0% { transform: translate(-50%, -50%) scale(0.98); }
        50% { transform: translate(-50%, -50%) scale(1.02); }
        100% { transform: translate(-50%, -50%) scale(0.98); }
    }

    @keyframes revealUp {
        from {
            opacity: 0;
            transform: translateY(1.25rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero-bg__particles {
        animation: driftParticles 18s var(--ease-soft) infinite;
    }

    .hero-bg__ring {
        animation: pulseRing 8s var(--ease-soft) infinite;
    }

    .hero-orb {
        animation: floatOrb 9s var(--ease-soft) infinite;
    }

    .hero-orb--2 {
        animation-duration: 11s;
        animation-delay: -2s;
    }

    .hero-orb--3 {
        animation-duration: 13s;
        animation-delay: -4s;
    }

    [data-reveal] {
        opacity: 0;
        transform: translateY(1.2rem);
        transition: opacity var(--dur-slow) var(--ease-decel), transform var(--dur-slow) var(--ease-decel);
    }

    [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .card,
    .dark-card,
    .showcase-slide,
    .location-card,
    .site-header {
        transition:
            transform var(--dur-med) var(--ease-standard),
            box-shadow var(--dur-med) var(--ease-standard),
            background var(--dur-med) var(--ease-standard),
            border-color var(--dur-med) var(--ease-standard),
            opacity var(--dur-med) var(--ease-standard);
    }

    .card:hover,
    .dark-card:hover,
    .location-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }
}

/* Logo marquee animations - outside @layer for proper specificity */
@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.logo-track--integrations,
.logo-track--references {
    animation: marqueeLeft 32s linear infinite;
}

.integration-marquee:hover .logo-track,
.references-marquee:hover .logo-track {
    animation-play-state: paused;
}

@layer utilities {
    @media (max-width: 1100px) {
        .product-layout,
        .european-panel {
            grid-template-columns: 1fr;
        }

        .product-rail {
            position: static;
        }

        .urgency-grid,
        .european-features-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .chapter {
            padding-block: 2rem;
            min-height: auto;
        }

        .section-head {
            margin-bottom: 1.5rem;
            gap: 0.5rem;
        }

        .showcase-status {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .chapter-main {
            padding: 1.5rem;
        }
    }

    @media (max-width: 930px) {
        .menu-button {
            display: grid;
        }

        .site-nav {
            display: none;
        }

        .header-cta {
            display: none;
        }

        .lang-switcher {
            margin-left: auto;
            margin-right: 0.5rem;
        }

        .menu-checkbox:checked ~ .site-nav {
            display: block;
            position: fixed;
            left: var(--gutter);
            right: var(--gutter);
            top: 5.5rem;
            background: rgba(255,255,255,0.96);
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            box-shadow: var(--shadow-md);
            backdrop-filter: blur(18px);
            padding: 0.75rem;
        }

        .menu-checkbox:checked ~ .site-nav ul {
            flex-direction: column;
            align-items: stretch;
        }

        .menu-checkbox:checked ~ .site-nav a {
            padding: 0.95rem 1rem;
        }

        .site-header {
            gap: 0.5rem;
        }

        .metrics-grid,
        .platform-grid,
        .pricing-cards,
        .founders-grid,
        .footer-grid,
        .locations-strip,
        .urgency-grid,
        .european-stats,
        .factory-steps {
            grid-template-columns: 1fr;
        }

        .showcase-shell {
            grid-template-columns: 1fr;
        }

        .showcase-nav {
            display: none;
        }

        .showcase-track {
            mask-image: none;
            -webkit-mask-image: none;
        }

        .showcase-slide {
            flex-basis: 84vw;
        }

        .section-head,
        .hero-stack {
            max-width: none;
        }

        .chapter {
            min-height: auto;
            padding-block: 5rem;
        }

        #welcome h1 {
            font-size: clamp(2rem, 10vw, 4rem);
        }

        #welcome .welcome-wordmark {
            font-size: clamp(0.7rem, 2vw, 1rem);
        }

        #welcome .hero-type--title {
            min-height: auto;
            font-size: clamp(1.8rem, 8vw, 3.5rem);
            line-height: 1.2;
        }

        #welcome .welcome-subline {
            font-size: clamp(0.85rem, 3.5vw, 1.1rem);
            min-height: auto;
            max-width: 90%;
        }

        #welcome small.welcome-note {
            font-size: 0.75rem;
        }

        .cta {
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            padding: 0 1rem;
        }

        .cta button {
            width: 100%;
        }

        .european-features-grid {
            grid-template-columns: 1fr;
        }

        .tier-stack {
            gap: 1rem;
        }

        .pricing-note {
            padding: 1rem;
            font-size: 0.9rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *, *::before, *::after {
            animation: none !important;
            transition: none !important;
        }

        [data-reveal] {
            opacity: 1 !important;
            transform: none !important;
        }
    }
}

/* Fix for navbar background */
.site-header {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 12px 40px rgba(13, 71, 161, 0.10);
    backdrop-filter: blur(16px);
}

/* Fix for subtitle fade-in */
#welcome .welcome-subline {
    opacity: 0;
    transform: translateY(0);
    transition: opacity .55s ease;
}

#welcome .welcome-subline.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Fix for banner to extend behind navbar */
#welcome {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#welcome.center {
    display: grid;
    place-content: center;
    justify-items: center;
    min-height: 100dvh;
}

/* Typewriter effect from website3 */
@supports (timeline-trigger-name: --t) {
    @keyframes blink {
        from { opacity: 0; }
    }
    @keyframes text {
        from { background-size: 0 }
    }
    
    .typewriter {
        background: 
            /* highlight text */
            linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat 
            /* faded text */
            transparent;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: text 2s ease-in both;

        &::after {
            content: "|";
            --hdr-gradient: linear-gradient(
                in oklch,
                oklch(45% .28 250),
                oklch(80% .22 200)
            );
            --sdr-gradient: linear-gradient(#0033cc, #00d4ff);

            background: var(--hdr-gradient);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;

            /* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
            animation: blink 0.2s 1.4s ease infinite alternate both;
        }
    }
    
    /* Typewriter Trigger in problem section */
    #problem *:has(> .typewriter) {
        timeline-trigger: --t view() cover 30% cover 1000%;
        trigger-scope: --t;

        .typewriter {
            animation-trigger: --t play-once;
            &::after {
                animation-trigger: --t play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in metric cards after typewriter animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #problem .metric-card {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #problem.content-visible .metric-card {
        animation-play-state: running;
    }

    #problem.content-visible .metric-card:nth-child(1) {
        animation-delay: 0s;
    }

    #problem.content-visible .metric-card:nth-child(2) {
        animation-delay: .8s;
    }

    #problem.content-visible .metric-card:nth-child(3) {
        animation-delay: 1.6s;
    }

    /* Typewriter Trigger in solution section */
    #solution *:has(> .typewriter) {
        timeline-trigger: --s view() cover 5% cover 1000%;
        trigger-scope: --s;

        .typewriter {
            animation-trigger: --s play-once;
            &::after {
                animation-trigger: --s play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in solution content after typewriter animation */
    #solution .section-intro,
    #solution .rail-actions,
    #solution .feature-card {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #solution.content-visible .section-intro,
    #solution.content-visible .rail-actions,
    #solution.content-visible .feature-card {
        animation-play-state: running;
    }

    #solution.content-visible .section-intro {
        animation-delay: 0s;
    }

    #solution.content-visible .rail-actions {
        animation-delay: .8s;
    }

    #solution.content-visible .feature-card:nth-child(1) {
        animation-delay: 1.6s;
    }

    #solution.content-visible .feature-card:nth-child(2) {
        animation-delay: 2.4s;
    }

    /* Typewriter Trigger in results section */
    #results *:has(> .typewriter) {
        timeline-trigger: --r view() cover 30% cover 1000%;
        trigger-scope: --r;

        .typewriter {
            animation-trigger: --r play-once;
            &::after {
                animation-trigger: --r play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in results content after typewriter animation */
    #results .section-intro,
    #results .showcase-shell {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #results.content-visible .section-intro,
    #results.content-visible .showcase-shell {
        animation-play-state: running;
    }

    #results.content-visible .section-intro {
        animation-delay: 0s;
    }

    #results.content-visible .showcase-shell {
        animation-delay: .8s;
    }

    /* Typewriter Trigger in how section */
    #how *:has(> .typewriter) {
        timeline-trigger: --h view() cover 30% cover 1000%;
        trigger-scope: --h;

        .typewriter {
            animation-trigger: --h play-once;
            &::after {
                animation-trigger: --h play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in how content after typewriter animation */
    #how .platform-card,
    #how .integration-band {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #how.content-visible .platform-card,
    #how.content-visible .integration-band {
        animation-play-state: running;
    }

    #how.content-visible .platform-card:nth-child(1) {
        animation-delay: 0s;
    }

    #how.content-visible .platform-card:nth-child(2) {
        animation-delay: .8s;
    }

    #how.content-visible .platform-card:nth-child(3) {
        animation-delay: 1.6s;
    }

    #how.content-visible .integration-band {
        animation-delay: 2.4s;
    }

    /* Typewriter Trigger in references section */
    #references *:has(> .typewriter) {
        timeline-trigger: --ref view() cover 30% cover 1000%;
        trigger-scope: --ref;

        .typewriter {
            animation-trigger: --ref play-once;
            &::after {
                animation-trigger: --ref play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in references content after typewriter animation */
    #references .logo-marquee {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #references.content-visible .logo-marquee {
        animation-play-state: running;
        animation-delay: 0s;
    }

    /* Typewriter Trigger in european section */
    #european *:has(> .typewriter) {
        timeline-trigger: --eu view() cover 30% cover 1000%;
        trigger-scope: --eu;

        .typewriter {
            animation-trigger: --eu play-once;
            &::after {
                animation-trigger: --eu play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in european content after typewriter animation */
    #european .section-intro,
    #european .european-features-grid,
    #european .european-visual {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #european.content-visible .section-intro,
    #european.content-visible .european-features-grid,
    #european.content-visible .european-visual {
        animation-play-state: running;
    }

    #european.content-visible .section-intro {
        animation-delay: 0s;
    }

    #european.content-visible .european-features-grid {
        animation-delay: .8s;
    }

    #european.content-visible .european-visual {
        animation-delay: 1.6s;
    }

    /* Typewriter Trigger in why-now section */
    #why-now *:has(> .typewriter) {
        timeline-trigger: --wn view() cover 30% cover 1000%;
        trigger-scope: --wn;

        .typewriter {
            animation-trigger: --wn play-once;
            &::after {
                animation-trigger: --wn play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in why-now content after typewriter animation */
    #why-now .urgency-card {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #why-now.content-visible .urgency-card {
        animation-play-state: running;
    }

    #why-now.content-visible .urgency-card:nth-child(1) {
        animation-delay: 0s;
    }

    #why-now.content-visible .urgency-card:nth-child(2) {
        animation-delay: .8s;
    }

    #why-now.content-visible .urgency-card:nth-child(3) {
        animation-delay: 1.6s;
    }

    #why-now.content-visible .urgency-card:nth-child(4) {
        animation-delay: 2.4s;
    }

    /* Typewriter Trigger in pricing section */
    #pricing *:has(> .typewriter) {
        timeline-trigger: --p view() cover 30% cover 1000%;
        trigger-scope: --p;

        .typewriter {
            animation-trigger: --p play-once;
            &::after {
                animation-trigger: --p play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in pricing content after typewriter animation */
    #pricing .pricing-card,
    #pricing .pricing-note {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #pricing.content-visible .pricing-card,
    #pricing.content-visible .pricing-note {
        animation-play-state: running;
    }

    #pricing.content-visible .pricing-card:nth-child(1) {
        animation-delay: 0s;
    }

    #pricing.content-visible .pricing-card:nth-child(2) {
        animation-delay: .8s;
    }

    #pricing.content-visible .pricing-note {
        animation-delay: 1.6s;
    }

    /* Typewriter Trigger in cta section */
    #cta *:has(> .typewriter) {
        timeline-trigger: --c view() cover 30% cover 1000%;
        trigger-scope: --c;

        .typewriter {
            animation-trigger: --c play-once;
            &::after {
                animation-trigger: --c play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in cta content after typewriter animation */
    #cta .dark-card p:not(.eyebrow),
    #cta .cta-buttons,
    #cta .contact-note {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #cta.content-visible .dark-card p:not(.eyebrow),
    #cta.content-visible .cta-buttons,
    #cta.content-visible .contact-note {
        animation-play-state: running;
    }

    #cta.content-visible .dark-card p:not(.eyebrow) {
        animation-delay: 0s;
    }

    #cta.content-visible .cta-buttons {
        animation-delay: .8s;
    }

    #cta.content-visible .contact-note {
        animation-delay: 1.6s;
    }

    /* Typewriter Trigger in about section */
    #about *:has(> .typewriter) {
        timeline-trigger: --a view() cover 30% cover 1000%;
        trigger-scope: --a;

        .typewriter {
            animation-trigger: --a play-once;
            &::after {
                animation-trigger: --a play-once;
                animation-delay: 1.6s;
            }
        }
    }

    /* Fade in about content after typewriter animation */
    #about .section-intro,
    #about .founder-card,
    #about .locations-strip {
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    #about.content-visible .section-intro,
    #about.content-visible .founder-card,
    #about.content-visible .locations-strip {
        animation-play-state: running;
    }

    #about.content-visible .section-intro {
        animation-delay: 0s;
    }

    #about.content-visible .founder-card:nth-child(1) {
        animation-delay: .8s;
    }

    #about.content-visible .founder-card:nth-child(2) {
        animation-delay: 1.6s;
    }

    #about.content-visible .founder-card:nth-child(3) {
        animation-delay: 2.4s;
    }

    #about.content-visible .founder-card:nth-child(4) {
        animation-delay: 1.2s;
    }

    #about.content-visible .locations-strip {
        animation-delay: 1.5s;
    }
}

/* ============================================
   Blog Section
   ============================================ */

.chapter--blog {
    background: linear-gradient(180deg, #ffffff, rgba(245, 250, 255, 0.95));
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.blog-card {
    padding: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(13, 71, 161, 0.15);
}

.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--theme-surface-container);
}

.blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-thumbnail img {
    transform: scale(1.05);
}

.blog-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #1976D2;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.blog-content {
    padding: 1.5rem;
    display: grid;
    gap: 0.75rem;
}

.blog-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--theme-surface-on-surface-variant);
}

.blog-category {
    text-transform: uppercase;
    font-weight: 500;
    color: #1976D2;
}

.blog-content h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0;
    color: var(--theme-surface-on-surface);
}

.blog-content p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--theme-surface-on-surface-variant);
    margin: 0;
}

.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--theme-surface-on-surface-variant);
    padding-top: 0.5rem;
    border-top: 1px solid var(--theme-outline-variant);
}

.blog-cta {
    text-align: center;
    margin-top: 2.5rem;
}

.blog-cta button {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    background: #1976D2;
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-cta button:hover {
    background: #1565C0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 71, 161, 0.25);
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-thumbnail {
        height: 180px;
    }
}

/* Blog Post Pages */

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-primary-primary), #1565C0);
    z-index: 1000;
    transition: width 0.1s ease;
}

/* Hero section for blog posts */
.post-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    max-height: 600px;
    margin-bottom: 3rem;
    overflow: hidden;
    background: #0D47A1;
}

.post-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 800px 500px at 50% 50%, #90caf9 0%, #64b5f6 25%, #42a5f5 45%, transparent 75%);
    animation: wave-sweep-1 8s ease-in-out infinite;
    z-index: 0;
}

.post-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 700px 450px at 50% 50%, #64b5f6 0%, #42a5f5 30%, #2196f3 50%, transparent 75%);
    animation: wave-sweep-2 10s ease-in-out infinite;
    z-index: 1;
}

@keyframes wave-sweep-1 {
    0% {
        transform: translateX(-120%) translateY(-30%) scale(1.2);
        opacity: 0.9;
    }
    50% {
        transform: translateX(120%) translateY(30%) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translateX(-120%) translateY(-30%) scale(1.2);
        opacity: 0.9;
    }
}

@keyframes wave-sweep-2 {
    0% {
        transform: translateX(120%) translateY(40%) scale(1.3);
        opacity: 0.85;
    }
    50% {
        transform: translateX(-120%) translateY(-40%) scale(1.6);
        opacity: 1;
    }
    100% {
        transform: translateX(120%) translateY(40%) scale(1.3);
        opacity: 0.85;
    }
}

.post-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    position: relative;
    z-index: 2;
}

.post-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(13,71,161,0.3) 0%, rgba(13,71,161,0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.post-hero-content {
    max-width: 900px;
    padding: 2rem;
    text-align: center;
    color: white;
}

.post-hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.1;
    margin: 0 0 1.5rem 0;
    color: white;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.post-hero-meta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
}

.post-hero-meta .post-category {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Back to blog link */
.back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 10;
}

.back-to-blog:hover {
    background: rgba(255,255,255,0.25);
    transform: translateX(-4px);
}

.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 4rem 1rem;
}

.post-header {
    margin-bottom: 3rem;
    text-align: center;
}

.post-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: var(--theme-text-primary);
}

.post-meta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

.post-category {
    background: var(--theme-primary-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 500;
}

.post-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--theme-text-primary);
}

.post-content .lead {
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--theme-text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.7;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(25,118,210,0.05) 0%, rgba(13,71,161,0.05) 100%);
    border-left: 4px solid var(--theme-primary-primary);
    border-radius: 0 8px 8px 0;
}

.post-content h2 {
    font-size: 2rem;
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
    color: var(--theme-text-primary);
    position: relative;
    padding-bottom: 0.75rem;
}

.post-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-primary-primary), transparent);
}

.post-content h3 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--theme-text-primary);
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-content ul,
.post-content ol {
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.post-content strong {
    color: var(--theme-primary-primary);
    font-weight: 600;
}

.post-content blockquote {
    border-left: 4px solid var(--theme-primary-primary);
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    margin: 3rem 0;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--theme-text-primary);
    background: linear-gradient(135deg, rgba(25,118,210,0.05) 0%, rgba(13,71,161,0.05) 100%);
    border-radius: 0 8px 8px 0;
    position: relative;
}

.post-content blockquote::before {
    content: '"';
    font-size: 4rem;
    color: var(--theme-primary-primary);
    opacity: 0.2;
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    font-family: Georgia, serif;
}

.post-image {
    margin: 3rem -2rem;
    position: relative;
}

@media (max-width: 768px) {
    .post-image {
        margin: 2.5rem -1rem;
    }
}

.post-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.post-image figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    margin-top: 1rem;
    font-style: italic;
    padding: 0 2rem;
}

.post-cta {
    background: var(--theme-surface-surface);
    border: 2px solid var(--theme-primary-primary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin: 3rem 0;
}

.post-cta h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--theme-text-primary);
}

.post-cta p {
    margin-bottom: 1.5rem;
    color: var(--theme-text-secondary);
}

.post-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--theme-border-border);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.tag {
    background: var(--theme-surface-surface);
    color: var(--theme-text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    border: 1px solid var(--theme-border-border);
}

.post-back {
    text-align: center;
}

@media (max-width: 640px) {
    .blog-post {
        padding: 1rem;
    }

    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.25rem;
    }
}

/* Blog Post Page Styles */
.blog-post-page {
    background: linear-gradient(180deg, #ffffff, rgba(245, 250, 255, 0.95));
}

.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 8rem 2rem 0;
}

.blog-post-header {
    display: block;
    margin-bottom: 2rem;
}

.blog-post h1 {
    display: block;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    color: var(--theme-surface-on-surface);
}

.blog-post-meta {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.blog-post-meta time {
    color: var(--theme-surface-on-surface-variant);
}

.blog-post-featured-image {
    width: 100%;
    margin-bottom: 3rem;
    border-radius: 12px;
    overflow: hidden;
}

.blog-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-post-content {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--theme-surface-on-surface);
}

.blog-post-content h2 {
    font-size: 1.75rem;
    margin: 2.5rem 0 1rem;
    color: var(--theme-surface-on-surface);
}

.blog-post-content h3 {
    font-size: 1.375rem;
    margin: 2rem 0 0.75rem;
    color: var(--theme-surface-on-surface);
}

.blog-post-content p {
    margin: 1rem 0;
}

.blog-post-content ul,
.blog-post-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.blog-post-content li {
    margin: 0.5rem 0;
}

.blog-post-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(25, 118, 210, 0.05);
    border-left: 4px solid #1976D2;
    border-radius: 0 8px 8px 0;
}

.blog-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.blog-post-content th,
.blog-post-content td {
    padding: 0.75rem;
    border: 1px solid #ddd;
    text-align: left;
}

.blog-post-content th {
    background: rgba(25, 118, 210, 0.1);
}

.blog-post-content pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.9em;
}

.blog-post-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--theme-outline-variant);
}

.blog-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.blog-post-tags .tag {
    background: rgba(25, 118, 210, 0.1);
    color: #1976D2;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
}

.blog-cta-section {
    max-width: 800px;
    margin: 2rem auto 1.5rem;
    padding: 0 2rem;
    min-height: 30px;
}

.blog-cta-card {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.05), rgba(33, 150, 243, 0.08));
    border: 2px solid rgba(25, 118, 210, 0.2);
    border-radius: 16px;
    padding: 1.5rem 1.5rem;
    text-align: center;
    min-height: 30px;
}

.blog-cta-card h2 {
    font-size: 1.5rem;
    margin: 0 auto 0.75rem;
    color: var(--theme-surface-on-surface);
    text-align: center;
}

.blog-cta-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--theme-surface-on-surface-variant);
    margin: 0 auto 1.5rem;
    text-align: center;
}

.blog-cta-card button {
    background: #1976D2;
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.blog-cta-card button:hover {
    background: #1565C0;
}

/* Feature Art Animations from website3 */
.feature-art {
    position: relative;
    display: grid;
    min-height: 16rem;
    border-radius: 1rem;
    overflow: hidden;
}

.feature-art--knowledge {
    background: radial-gradient(circle at center, rgba(255,255,255,.55), transparent 30%),
                linear-gradient(135deg, rgba(21,101,192,.16), rgba(33,150,243,.08));
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.4rem;
}

.knowledge-column {
    display: grid;
    gap: .8rem;
    z-index: 2;
}

.knowledge-card {
    padding: .8rem 1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(21,101,192,.10);
    color: var(--volt-blue-700);
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(13,71,161,.06);
    animation: bobFloat 4.2s ease-in-out infinite;
}

.knowledge-card:nth-child(2) {
    animation-delay: .8s;
}

.knowledge-card:nth-child(3) {
    animation-delay: 1.6s;
}

.knowledge-core-panel {
    position: relative;
    z-index: 2;
    width: 13rem;
    padding: 1.15rem;
    border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,250,255,.98));
    border: 1px solid rgba(21,101,192,.12);
    box-shadow: 0 16px 32px rgba(13,71,161,.08);
    display: grid;
    gap: .55rem;
    text-align: center;
    animation: pulseGlow 3.6s ease-in-out infinite;
}

.knowledge-core-title {
    font-weight: 700;
    color: var(--volt-blue-700);
}

.knowledge-core-search,
.knowledge-core-answer {
    padding: .55rem .7rem;
    border-radius: .9rem;
    background: rgba(21,101,192,.06);
    font-size: .84rem;
    color: var(--theme-surface-on-surface-variant);
}

.knowledge-streams {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.knowledge-streams path {
    fill: none;
    stroke: rgba(21,101,192,.40);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 4 4;
    stroke-dashoffset: 0;
    animation: flowDash 1.8s linear infinite;
}

.feature-art--experts {
    background: linear-gradient(135deg, rgba(13,71,161,.12), rgba(33,150,243,.06));
    padding: 0;
}

.experts-journey {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    width: 100%;
    animation: pulseGlow 3.6s ease-in-out infinite;
}

.experts-step {
    padding: .8rem .7rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(21,101,192,.08);
    text-align: center;
    color: var(--theme-surface-on-surface-variant);
    font-size: .82rem;
    min-height: 4.6rem;
    display: grid;
    place-items: center;
    animation: bobFloat 4.2s ease-in-out infinite;
}

.experts-step:nth-child(3) {
    animation-delay: .8s;
}

.experts-step:nth-child(5) {
    animation-delay: 1.6s;
}

.experts-step:nth-child(7) {
    animation-delay: 2.4s;
}

.experts-step--ai {
    background: linear-gradient(180deg, var(--volt-blue-700), var(--volt-blue-900));
    color: white;
    font-weight: 700;
    flex-direction: column;
    gap: 0.3rem;
}

.experts-step--input {
    margin-left: 1rem;
}

.experts-step--action {
    margin-right: 1rem;
}

.experts-icon {
    width: 1.2rem;
    height: 1.2rem;
    filter: brightness(0) invert(1);
}

.experts-arrow {
    color: var(--volt-blue-700);
    font-weight: 700;
    font-size: 1.2rem;
}

.experts-systems {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.8rem 0.8rem;
    row-gap: 2rem;
    z-index: 10;
}

.experts-systems .system-tag {
    padding: .2rem .4rem;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    font-size: .78rem;
    color: var(--volt-blue-700);
    animation: bobFloat 3s ease-in-out infinite;
    white-space: nowrap;
    text-align: center;
}

.system-tag--1 {
    animation-delay: 0s;
    margin-top: 0.5rem;
}

.system-tag--2 {
    animation-delay: 0.5s;
    margin-top: 0.5rem;
}

.system-tag--3 {
    animation-delay: 1s;
    margin-top: 4.5rem;
}

.system-tag--4 {
    animation-delay: 1.5s;
    margin-top: 4.5rem;
}

@keyframes flowDash {
    to { stroke-dashoffset: -20; }
}

@keyframes bobFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 10px 24px rgba(13,71,161,.06); }
    50% { box-shadow: 0 18px 40px rgba(13,71,161,.14); }
}

/* Enhanced animated connection lines */
.knowledge-streams path {
    stroke: rgba(21,101,192,.65) !important;
    stroke-width: 2.2 !important;
    stroke-dasharray: 6 4 !important;
    filter: drop-shadow(0 0 3px rgba(21,101,192,.3));
}

/* Add flowing particles effect */
.feature-art--knowledge::after,
.feature-art--experts::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--volt-blue-700);
    border-radius: 50%;
    opacity: 0;
    z-index: 3;
    animation: flowParticle 3s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(21,101,192,.6);
}

.feature-art--knowledge::after {
    left: 22%;
    top: 24%;
}

.feature-art--experts::after {
    left: 10%;
    top: 50%;
}

@keyframes flowParticle {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(20%, 10%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(50%, 0%) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(80%, -5%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(100%, 0%) scale(0.5);
    }
}

/* Make experts arrows more prominent */
.experts-arrow {
    animation: pulseArrow 2s ease-in-out infinite;
}

@keyframes pulseArrow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Remove particle effects */
.feature-art--knowledge::after,
.feature-art--experts::after {
    display: none !important;
}

/* Ensure dashed lines are visible */
.feature-card .knowledge-streams path {
    fill: none !important;
    stroke: rgba(21,101,192,.70) !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-dasharray: 8 6 !important;
    stroke-dashoffset: 0;
    animation: flowDash 2s linear infinite !important;
}

/* Make knowledge cards more compact */
.knowledge-card {
    padding: .5rem .7rem !important;
    font-size: .85rem !important;
}

/* Update dashed line animation to flow toward center */
.feature-card .knowledge-streams path {
    stroke-dasharray: 10 5 !important;
    animation: flowToCenter 2.5s linear infinite !important;
}

@keyframes flowToCenter {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Adjust grid spacing for better line visibility */
.feature-art--knowledge {
    gap: 1rem;
    padding: 2rem 1.4rem !important;
}

/* Fix z-index layering */
.knowledge-streams {
    z-index: 1 !important;
}

.knowledge-card {
    z-index: 3 !important;
    position: relative;
}

.knowledge-core-panel {
    z-index: 4 !important;
    position: relative;
}

/* Make lines more visible and ensure they connect properly */
.feature-card .knowledge-streams path {
    stroke: rgba(21,101,192,.85) !important;
    stroke-width: 3 !important;
}

/* Reposition cards to outer edges */
.feature-art--knowledge {
    grid-template-columns: 1fr auto 1fr !important;
    padding: 1.5rem !important;
}

.knowledge-column {
    gap: 1.2rem !important;
}

.knowledge-column--left {
    justify-self: start;
}

.knowledge-column--right {
    justify-self: end;
}

/* Make cards more compact */
.knowledge-card {
    padding: .4rem .6rem !important;
    font-size: .8rem !important;
    width: 10rem !important;
}

.knowledge-core-panel {
    width: 11rem !important;
    padding: 1rem !important;
}

.knowledge-core-icon {
    width: 1.56rem;
    height: 1.56rem;
    margin: 0 auto 0.5rem;
    display: block;
}

/* Center the knowledge core panel */
.knowledge-core-panel {
    justify-self: center !important;
    align-self: center !important;
}

/* Increase vertical dispersion of cards by 30% */
.knowledge-card:first-child {
    animation: bobFloatUp 4.2s ease-in-out infinite;
}

.knowledge-card:last-child {
    animation: bobFloatDown 4.2s ease-in-out infinite;
}

@keyframes bobFloatUp {
    0%, 100% {
        transform: translateY(-2rem);
    }
    50% {
        transform: translateY(calc(-2rem - 6px));
    }
}

@keyframes bobFloatDown {
    0%, 100% {
        transform: translateY(2rem);
    }
    50% {
        transform: translateY(calc(2rem - 6px));
    }
}

/* Make all cards same height and push towards center */
.knowledge-card {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.knowledge-column--left .knowledge-card {
    margin-right: -1.5rem;
}

.knowledge-column--right .knowledge-card {
    margin-left: -1.5rem;
}

/* Make right column cards broader */
.knowledge-column--right .knowledge-card,
.knowledge-column--left .knowledge-card {
    min-width: 10rem;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.lang-btn {
    background: transparent;
    border: 1px solid rgba(25, 118, 210, 0.3);
    color: var(--theme-surface-on-surface-variant);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-btn:hover {
    background: rgba(25, 118, 210, 0.1);
    border-color: #1976D2;
}

.lang-btn.active {
    background: #1976D2;
    color: white;
    border-color: #1976D2;
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 12, 20, 0.95);
    border-top: 1px solid rgba(77, 163, 255, 0.2);
    backdrop-filter: blur(12px);
    animation: cookieSlideUp 0.4s ease-out;
}

@keyframes cookieSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cookie-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 900px;
    width: 100%;
}

.cookie-content p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

.cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(77, 163, 255, 0.3);
    transition: all 0.2s;
}

.cookie-btn--accept {
    background: #1976D2;
    color: white;
    border-color: #1976D2;
}

.cookie-btn--accept:hover {
    background: #1e88e5;
}

.cookie-btn--reject {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}

.cookie-btn--reject:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* Booking Page Styles */
.booking-hero {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-9) var(--space-5) 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(21,101,192,0.06), transparent 50%),
        linear-gradient(180deg, rgba(245,250,255,0.95), #ffffff);
}

.booking-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.booking-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-2);
    max-width: 42rem;
    line-height: 1.6;
    margin: 0 0 var(--space-4) 0;
}

.booking-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-5) var(--space-7);
}

@media (max-width: 768px) {
    .booking-hero {
        min-height: 40vh;
        padding: var(--space-8) var(--space-4) var(--space-6);
    }

    .booking-container {
        padding: var(--space-5) var(--space-4);
    }
}