/* ═══════════════════════════════════════════
			 RESET
			 ═══════════════════════════════════════════ */
		*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
		ul, ol { list-style: none; }
		a { color: inherit; text-decoration: none; }
		button { cursor: pointer; font: inherit; border: none; background: none; }
		img { max-width: 100%; display: block; }

		/* ═══════════════════════════════════════════
			 DESIGN TOKENS
			 ═══════════════════════════════════════════ */
		:root {
			--font-heading: 'Space Grotesk', system-ui, sans-serif;
			--font-body: 'Inter', system-ui, sans-serif;
			--radius-sm: 8px;
			--radius-md: 14px;
			--radius-lg: 20px;
			--radius-xl: 28px;
			--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			--max-w: 1120px;
		}

		[data-theme="light"] {
			--primary: #e84393;
			--primary-hover: #d63384;
			--primary-subtle: #fce4ec;
			--primary-on: #ffffff;
			--surface: #fafaf9;
			--surface-warm: #f5f3f0;
			--surface-card: #ffffff;
			--surface-elevated: #ffffff;
			--on-surface: #1c1917;
			--on-surface-secondary: #57534e;
			--on-surface-tertiary: #a8a29e;
			--border: #e7e5e4;
			--border-hover: #d6d3d1;
			--shadow-sm: 0 1px 3px rgba(28,25,23,0.06);
			--shadow-md: 0 4px 20px rgba(28,25,23,0.08);
			--shadow-lg: 0 12px 40px rgba(28,25,23,0.1);
			--shadow-glow: 0 0 30px rgba(232,67,147,0.15);
			--nav-bg: rgba(250,250,249,0.85);
			--neon-a: rgba(232,67,147,0.6);
			--neon-b: rgba(56,189,248,0.5);
			--accent-warm: #38bdf8;
			--accent-warm-subtle: #f0f9ff;
			color-scheme: light;
		}

		[data-theme="dark"] {
			--primary: #f472b6;
			--primary-hover: #f9a8d4;
			--primary-subtle: rgba(244,114,182,0.12);
			--primary-on: #1c1917;
			--surface: #0f0f0e;
			--surface-warm: #1a1918;
			--surface-card: #1e1d1c;
			--surface-elevated: #262524;
			--on-surface: #f5f5f4;
			--on-surface-secondary: #a8a29e;
			--on-surface-tertiary: #78716c;
			--border: #2e2c2a;
			--border-hover: #44403c;
			--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
			--shadow-md: 0 4px 20px rgba(0,0,0,0.35);
			--shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
			--shadow-glow: 0 0 40px rgba(244,114,182,0.12);
			--nav-bg: rgba(15,15,14,0.88);
			--neon-a: rgba(244,114,182,0.5);
			--neon-b: rgba(56,189,248,0.4);
			--accent-warm: #38bdf8;
			--accent-warm-subtle: rgba(56,189,248,0.1);
			color-scheme: dark;
		}

		/* ═══════════════════════════════════════════
			 BASE
			 ═══════════════════════════════════════════ */
		html { scroll-behavior: smooth; }
		body {
			font-family: var(--font-body);
			background: var(--surface);
			color: var(--on-surface);
			line-height: 1.7;
			overflow-x: hidden;
			transition: background-color var(--transition), color var(--transition);
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		h1, h2, h3, h4 {
			font-family: var(--font-heading);
			line-height: 1.2;
			color: var(--on-surface);
			letter-spacing: -0.02em;
		}
		.container {
			max-width: var(--max-w);
			margin: 0 auto;
			padding: 0 24px;
		}
		section {
			padding: 100px 0;
		}
		@media (max-width: 768px) {
			section { padding: 72px 0; }
		}

		/* ═══════════════════════════════════════════
			 NAVIGATION
			 ═══════════════════════════════════════════ */
		.nav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			padding: 0 24px;
			background: var(--nav-bg);
			backdrop-filter: blur(20px) saturate(1.5);
			-webkit-backdrop-filter: blur(20px) saturate(1.5);
			border-bottom: 1px solid var(--border);
			transition: background var(--transition), border-color var(--transition);
		}
		.nav-inner {
			max-width: var(--max-w);
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 64px;
			position: relative;
		}
		.nav-logo {
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 1.15rem;
			color: var(--on-surface);
			display: flex;
			align-items: center;
			gap: 6px;
			transition: color var(--transition);
		}
		.nav-logo:hover { color: var(--primary); }
		.nav-logo .paw,
		.mobile-brand .paw {
			display: inline-block;
			width: 1.1em;
			height: 1.1em;
			margin-right: 0.3em;
			background-color: var(--primary);
			-webkit-mask: url('images/dog-paw.svg') center/contain no-repeat;
			mask: url('images/dog-paw.svg') center/contain no-repeat;
			transform: rotate(-45deg);
		}
		.nav-links {
			display: flex;
			align-items: center;
			gap: 32px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		.nav-links a {
			font-size: 0.9rem;
			font-weight: 500;
			color: var(--on-surface-secondary);
			transition: color var(--transition);
			position: relative;
		}
		.nav-links a::after {
			content: '';
			position: absolute;
			bottom: -4px;
			left: 0;
			width: 0;
			height: 2px;
			background: var(--primary);
			border-radius: 1px;
			transition: width var(--transition);
		}
		.nav-links a:hover { color: var(--on-surface); }
		.nav-links a:hover::after { width: 100%; }
		.nav-links .mobile-brand { display: none; }
		.nav-links .mobile-brand::after { display: none; }
		.nav-links .mobile-controls { display: none; }
		#menu-bg { display: none; }
		.nav-controls {
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.nav-btn {
			width: 38px;
			height: 38px;
			border-radius: var(--radius-sm);
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--on-surface-secondary);
			transition: background var(--transition), color var(--transition);
			font-size: 0.85rem;
			font-weight: 600;
		}
		.nav-btn:hover {
			background: var(--primary-subtle);
			color: var(--primary);
		}
		.nav-btn svg { width: 20px; height: 20px; }

		/* Mobile nav */
		.nav-hamburger {
			display: none;
			flex-direction: column;
			gap: 5px;
			width: 38px;
			height: 38px;
			align-items: center;
			justify-content: center;
			border-radius: var(--radius-sm);
			transition: background var(--transition);
		}
		.nav-hamburger:hover { background: var(--primary-subtle); }
		.nav-hamburger span {
			display: block;
			width: 20px;
			height: 2px;
			background: var(--on-surface);
			border-radius: 1px;
			transition: transform var(--transition), opacity var(--transition);
		}
		.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
		.nav-hamburger.active span:nth-child(2) { opacity: 0; }
		.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

		@media (max-width: 768px) {
			.nav-hamburger { display: flex; z-index: 1002; }
			.nav-links {
				display: none !important;
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				transform: none;
				background: var(--surface);
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 24px;
				gap: 32px;
				z-index: 1001;
			}
			.nav-links.open {
				display: flex !important;
			}
			#menu-bg {
				display: block;
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				z-index: -1;
			}
			.nav-links a { font-size: 1.4rem; }
			.nav-links .mobile-brand {
				display: block !important;
				font-family: var(--font-heading);
				font-size: 1.6rem;
				font-weight: 700;
				color: var(--on-surface);
				margin-bottom: 1rem;
			}
			.nav-links .mobile-controls {
				display: flex !important;
				gap: 16px;
				margin-top: 1.5rem;
			}
			.nav-links .mobile-controls .nav-btn {
				font-size: 1.2rem;
				padding: 10px 16px;
				width: auto;
				height: auto;
			}
			.nav-links .mobile-controls .nav-btn svg {
				width: 28px;
				height: 28px;
			}
		}

		/* ═══════════════════════════════════════════
			 HERO
			 ═══════════════════════════════════════════ */
		.hero {
			min-height: 100vh;
			display: flex;
			align-items: center;
			padding-top: 64px;
			background: var(--surface);
			position: relative;
			overflow: hidden;
		}
		#hero-bg {
			position: absolute;
			inset: 0;
			pointer-events: none;
			z-index: 0;
		}
		.hero-inner {
			position: relative;
			z-index: 1;
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 60px;
			align-items: center;
		}
		.hero-text { max-width: 600px; }
		.hero-label {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: 0.85rem;
			font-weight: 600;
			color: var(--primary);
			background: var(--primary-subtle);
			padding: 6px 16px;
			border-radius: 100px;
			margin-bottom: 24px;
			letter-spacing: 0.03em;
		}
		.hero h1 {
			font-size: clamp(2.4rem, 5.5vw, 3.8rem);
			font-weight: 700;
			margin-bottom: 20px;
			letter-spacing: -0.03em;
		}
		.hero h1 .highlight {
			color: var(--primary);
		}
		.hero-subtitle {
			font-size: 1.15rem;
			color: var(--on-surface-secondary);
			margin-bottom: 36px;
			max-width: 480px;
			line-height: 1.8;
		}
		.btn-primary {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			padding: 16px 36px;
			background: var(--primary);
			color: var(--primary-on);
			font-weight: 600;
			font-size: 1rem;
			border-radius: var(--radius-xl);
			border: none;
			text-align: center;
			transition: background var(--transition), transform 0.15s ease, box-shadow var(--transition);
			box-shadow: var(--shadow-glow);
		}
		.btn-primary:hover {
			background: var(--primary-hover);
			transform: translateY(-2px);
			box-shadow: 0 0 40px rgba(45,212,191,0.25);
		}
		.btn-primary:active { transform: translateY(0); }
		.btn-primary .arrow {
			transition: transform var(--transition);
		}
		.btn-primary:hover .arrow { transform: translateX(3px); }

		/* Mascot placeholder */
		.mascot-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;
			flex-shrink: 0;
		}
		.mascot {
			width: 220px;
			height: 220px;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
			box-shadow: 0 8px 30px rgba(0,0,0,0.05), 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
			transition: transform 0.3s, box-shadow 0.3s;
		}
		.mascot.bean-docked {
			box-shadow: none;
		}
		.mascot {
			cursor: pointer;
		}
		.mascot:hover {
			transform: scale(1.05) rotate(2deg);
			box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 0 0 4px var(--primary), 0 0 25px color-mix(in srgb, var(--primary) 40%, transparent), 0 0 50px color-mix(in srgb, var(--primary) 20%, transparent);
		}
		.mascot img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.mascot-wrap { position: relative; }
		.sparkle {
			position: absolute;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: var(--primary);
			pointer-events: none;
			animation: sparkleFloat 1.2s ease-out forwards;
			box-shadow: 0 0 6px var(--primary);
		}
		@keyframes sparkleFloat {
			0% { opacity: 1; transform: scale(1) translate(0, 0); }
			100% { opacity: 0; transform: scale(0) translate(var(--dx, 0), var(--dy, -40px)); }
		}
		.speech-bubble {
			position: relative;
			background: var(--surface-card);
			border: 2px solid var(--primary);
			border-radius: var(--radius-lg);
			padding: 12px 20px;
			font-size: 0.9rem;
			font-weight: 500;
			color: var(--on-surface);
			max-width: 240px;
			text-align: center;
			box-shadow: 0 0 15px color-mix(in srgb, var(--primary) 20%, transparent);
		}
		.speech-bubble::before {
			content: '';
			position: absolute;
			top: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid var(--primary);
		}
		.speech-bubble::after {
			content: '';
			position: absolute;
			top: -7px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid var(--surface-card);
		}
		@keyframes bubblePop {
			0% { opacity: 0; transform: scale(0.7) translateY(10px); }
			100% { opacity: 1; transform: scale(1) translateY(0); }
		}
		.speech-bubble .typewriter-cursor {
			display: inline-block;
			width: 2px;
			height: 1em;
			background: var(--primary);
			margin-left: 2px;
			vertical-align: text-bottom;
			animation: blink 0.7s step-end infinite;
		}
		@keyframes blink {
			50% { opacity: 0; }
		}

		/* Pulsing CTA */
		@keyframes ctaPulse {
			0%, 100% { box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 30%, transparent); }
			50% { box-shadow: 0 6px 30px color-mix(in srgb, var(--primary) 50%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 20%, transparent); }
		}
		.btn-primary {
			animation: ctaPulse 2.5s ease-in-out infinite;
		}
		.pricing-cta-filled {
			animation: ctaPulse 2.5s ease-in-out infinite;
		}

		/* Feature tooltips */
		.pricing-features li {
			position: relative;
			cursor: pointer;
		}
		.pricing-features li .tooltip {
			position: absolute;
			top: 50%;
			transform: translateY(-50%) scale(0.95);
			background: var(--surface-card);
			color: var(--on-surface);
			font-size: 0.8rem;
			font-weight: 400;
			padding: 10px 14px;
			border-radius: 10px;
			border: 1.5px solid var(--primary);
			box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 20%, transparent);
			white-space: normal;
			width: 240px;
			text-align: left;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.2s, transform 0.2s;
			z-index: 10;
			line-height: 1.4;
		}
		/* Basis card (left) — tooltip on the left */
		#card-basis .pricing-features li .tooltip {
			right: calc(100% + 14px);
		}
		#card-basis .pricing-features li .tooltip::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 100%;
			transform: translateY(-50%);
			border: 6px solid transparent;
			border-left-color: var(--primary);
		}
		/* Groei card (right) — tooltip on the right */
		#card-groei .pricing-features li .tooltip {
			left: calc(100% + 14px);
		}
		#card-groei .pricing-features li .tooltip::after {
			content: '';
			position: absolute;
			top: 50%;
			right: 100%;
			transform: translateY(-50%);
			border: 6px solid transparent;
			border-right-color: var(--primary);
		}
		/* Tooltips hidden — Bean delivers them instead */
		.pricing-features li:hover .tooltip {
			opacity: 0;
			pointer-events: none;
		}
		.bean-float-bubble.docked-mode {
			font-size: 0.95rem;
			font-weight: 500;
			padding: 12px 20px;
			border-width: 2px;
			border-radius: var(--radius-lg);
			width: 280px;
			text-align: center;
		}
		.bean-float.at-tooltip {
			pointer-events: none;
		}
		/* Tooltip mode: bubble beside Bean */
		.bean-float-bubble.tooltip-mode {
			white-space: normal;
			width: 240px;
			text-align: left;
			font-size: 0.8rem;
			line-height: 1.4;
		}

		@media (max-width: 768px) {
			.hero { padding-top: 92px; padding-bottom: 100px; }
			.hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
			.hero-subtitle { font-size: 0.95rem; margin-left: auto; margin-right: auto; }
			.hero-inner {
				grid-template-columns: 1fr;
				text-align: center;
				gap: 16px;
			}
			.mascot-wrap { margin: 0 auto; }
			.hero-label { margin-left: auto; margin-right: auto; }
			.hero .btn-primary { display: none; }
			.mobile-cta {
				display: flex !important;
			}
		}

		/* ═══════════════════════════════════════════
			 SECTION LABEL
			 ═══════════════════════════════════════════ */
		.section-label {
			display: inline-block;
			font-size: 0.78rem;
			font-weight: 600;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--primary);
			margin-bottom: 16px;
		}
		.section-title {
			font-size: clamp(1.8rem, 3.5vw, 2.6rem);
			font-weight: 700;
			margin-bottom: 16px;
			letter-spacing: -0.025em;
		}
		.section-subtitle {
			font-size: 1.05rem;
			color: var(--on-surface-secondary);
			max-width: 560px;
			line-height: 1.7;
		}
		.section-header {
			margin-bottom: 56px;
		}
		@media (max-width: 768px) {
			.section-header { margin-bottom: 40px; }
		}

		/* ═══════════════════════════════════════════
			 HOW IT WORKS
			 ═══════════════════════════════════════════ */
		.how-it-works {
			background: var(--surface-warm);
		}
		.steps-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 32px;
		}
		.step-card {
			background: var(--surface-card);
			border-radius: var(--radius-lg);
			padding: 36px 28px;
			border: 1px solid var(--border);
			transition: border-color var(--transition), box-shadow var(--transition), transform 0.2s ease;
		}
		.step-card {
			cursor: pointer;
			transition: border-color var(--transition), box-shadow var(--transition), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
		}
		.step-card:hover {
			border-color: var(--border-hover);
			box-shadow: var(--shadow-lg), 0 30px 60px rgba(0,0,0,0.18);
			transform: translateY(-10px) scale(1.03);
		}
		.step-card.neon-step {
			border-color: var(--primary);
			box-shadow:
				0 0 5px color-mix(in srgb, var(--primary) 50%, transparent),
				0 0 20px color-mix(in srgb, var(--primary) 25%, transparent),
				inset 0 0 15px color-mix(in srgb, var(--primary) 6%, transparent);
		}
		.step-card.neon-step:hover {
			box-shadow:
				0 0 8px var(--primary),
				0 0 30px color-mix(in srgb, var(--primary) 40%, transparent),
				inset 0 0 20px color-mix(in srgb, var(--primary) 10%, transparent);
		}
		.step-number {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			background: var(--primary);
			color: var(--primary-on);
			font-family: var(--font-heading);
			font-weight: 700;
			font-size: 1.15rem;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			box-shadow: 0 4px 16px rgba(45,212,191,0.2);
		}
		.step-card h3 {
			font-size: 1.15rem;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.step-card p {
			color: var(--on-surface-secondary);
			font-size: 0.95rem;
			line-height: 1.7;
		}
		.step-cta {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			margin-top: 16px;
			padding: 12px 24px;
			border-radius: 12px;
			background: var(--primary);
			color: var(--primary-on);
			font-weight: 600;
			font-size: 0.9rem;
			cursor: pointer;
			transition: background 0.25s, box-shadow 0.25s;
			animation: ctaPulse 2.5s ease-in-out infinite;
		}
		.step-cta:hover {
			background: var(--primary-hover);
		}

		/* Makeover overlay */
		.makeover-overlay {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 10000;
			background: rgba(0,0,0,0.6);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			justify-content: center;
			align-items: center;
		}
		.makeover-overlay.active { display: flex; }
		html.overlay-open, html.overlay-open body { overflow: hidden; }
		@keyframes slideFromLeft {
			0% { opacity: 0; transform: translateX(-100vw); }
			70% { transform: translateX(15px); }
			85% { transform: translateX(-5px); }
			100% { opacity: 1; transform: translateX(0); }
		}
		@keyframes slideFromRight {
			0% { opacity: 0; transform: translateX(100vw); }
			70% { transform: translateX(-15px); }
			85% { transform: translateX(5px); }
			100% { opacity: 1; transform: translateX(0); }
		}
		.makeover-overlay.active .makeover-left {
			animation: slideFromLeft 375ms cubic-bezier(0.22, 1, 0.36, 1) both;
		}
		.makeover-overlay.active .makeover-right {
			animation: slideFromRight 375ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
		}
		.overlay-bean {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 1rem;
		}
		.overlay-bean .mascot-small {
			width: 210px;
			height: 210px;
			min-width: 210px;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 0 0 3px var(--primary), 0 0 20px color-mix(in srgb, var(--primary) 25%, transparent);
		}
		.overlay-bean .mascot-small img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.overlay-bean .bean-overlay-speech {
			position: relative;
			font-size: 0.95rem;
			color: var(--on-surface);
			text-align: center;
			min-width: 180px;
			background: var(--surface-card);
			border: 1.5px solid var(--primary);
			border-radius: 14px;
			padding: 10px 16px;
			box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 15%, transparent);
		}
		.overlay-bean .bean-overlay-speech::before {
			content: '';
			position: absolute;
			left: -8px;
			top: 50%;
			transform: translateY(-50%);
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-right: 8px solid var(--primary);
		}
		.overlay-bean .bean-overlay-speech::after {
			content: '';
			position: absolute;
			left: -5px;
			top: 50%;
			transform: translateY(-50%);
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
			border-right: 6px solid var(--surface-card);
		}
		.makeover-inner {
			display: flex;
			align-items: center;
			gap: 12rem;
			transition: gap 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.makeover-inner.bean-gone {
			gap: 0;
		}
		.makeover-inner.bean-gone .makeover-right {
			width: 0;
			overflow: hidden;
			transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.makeover-left {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.makeover-right {
			flex-shrink: 0;
			width: 280px;
			display: flex;
			align-items: center;
			transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
		@keyframes ufoGlow {
			0%, 100% { box-shadow: 0 0 150px color-mix(in srgb, var(--primary) 15%, transparent); }
			50% { box-shadow: 0 0 300px color-mix(in srgb, var(--primary) 40%, transparent); }
		}
		.makeover-card {
			position: relative;
			background: var(--surface-card);
			border-radius: var(--radius-xl);
			padding: 2.5rem;
			width: 440px;
			border: 2px solid var(--primary);
			animation: ufoGlow 12s ease-in-out infinite;
		}
		.makeover-right {
			opacity: 0;
		}
		@media (max-width: 768px) {
			.makeover-inner { flex-direction: column; }
			.makeover-left, .makeover-right { width: 100%; padding: 1rem; }
			.makeover-right { display: none; }
			.makeover-card { width: 100%; }
		}
		.makeover-card h3 {
			font-family: var(--font-heading);
			font-size: 1.3rem;
			margin-bottom: 1.5rem;
			color: var(--on-surface);
		}
		.makeover-close {
			position: fixed;
			top: 1.5rem;
			right: 1.5rem;
			z-index: 10001;
			color: var(--on-surface-tertiary);
			font-size: 2rem;
			cursor: pointer;
			line-height: 1;
		}
		.makeover-card .form-group {
			margin-bottom: 1rem;
		}
		.makeover-card label {
			display: block;
			font-size: 0.8rem;
			font-weight: 600;
			color: var(--on-surface-secondary);
			margin-bottom: 4px;
		}
		.makeover-card input {
			width: 100%;
			padding: 10px 14px;
			border-radius: 10px;
			border: 1px solid var(--border);
			background: var(--surface);
			color: var(--on-surface);
			font-family: var(--font-body);
			font-size: 0.95rem;
			transition: border-color 0.3s;
		}
		.makeover-card input:focus {
			outline: none;
			border-color: var(--primary);
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
		}
		.makeover-card .btn-primary {
			width: 100%;
			margin-top: 0.5rem;
			text-align: center;
		}
		/* Disabled submit */
		.btn-primary:disabled {
			opacity: 0.4;
			cursor: not-allowed;
			animation: none;
			box-shadow: none;
		}

		/* Submit sparkle wrapper */
		.submit-wrap {
			position: relative;
			display: inline-block;
			width: 100%;
		}

		/* Exit animations */
		@keyframes slideOutLeft {
			0% { opacity: 1; transform: translateX(0); }
			100% { opacity: 0; transform: translateX(-100vw); }
		}
		@keyframes slideOutRight {
			0% { opacity: 1; transform: translateX(0); }
			100% { opacity: 0; transform: translateX(100vw); }
		}
		.makeover-left.exit {
			animation: slideOutLeft 400ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
		}
		.makeover-right.exit {
			animation: slideOutRight 400ms cubic-bezier(0.55, 0, 1, 0.45) 100ms forwards;
		}

		/* Fireworks particles */
		.firework-particle {
			position: absolute;
			pointer-events: none;
		}
		.firework-dot {
			border-radius: 50%;
			animation: fireworkBurst var(--fw-dur, 1.5s) cubic-bezier(0, 0.6, 0.4, 1) forwards;
			animation-delay: var(--fw-delay, 0s);
			opacity: 0;
		}
		.firework-paw {
			background-color: var(--primary);
			-webkit-mask: url('images/dog-paw.svg') center/contain no-repeat;
			mask: url('images/dog-paw.svg') center/contain no-repeat;
			animation: fireworkBurst var(--fw-dur, 2s) cubic-bezier(0, 0.6, 0.4, 1) forwards;
			animation-delay: var(--fw-delay, 0s);
			opacity: 0;
		}
		@keyframes fireworkBurst {
			0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
			60% { opacity: 1; }
			100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.2) rotate(var(--fr)); }
		}

		/* Giant stamp paw */
		.stamp-paw {
			position: absolute;
			width: 300px;
			height: 300px;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(15);
			background-color: var(--primary);
			-webkit-mask: url('images/dog-paw.svg') center/contain no-repeat;
			mask: url('images/dog-paw.svg') center/contain no-repeat;
			opacity: 0;
			pointer-events: none;
			z-index: 5;
		}
		@keyframes pawStamp {
			0% { opacity: 0.6; transform: translate(-50%, -50%) scale(15); }
			70% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
			85% { transform: translate(-50%, -50%) scale(0.95); }
			100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
		}

		/* Referral card — inside overlay */
		.referral-wrap {
			position: absolute;
			inset: 0;
			display: none;
			align-items: center;
			justify-content: center;
			z-index: 4;
		}
		.referral-wrap.active { display: flex; }
		/* Fireworks — behind card */
		.fireworks-behind {
			position: absolute;
			inset: 0;
			z-index: 1;
			pointer-events: none;
			overflow: hidden;
		}
		.referral-card {
			background: var(--surface-card);
			border: 2px solid var(--primary);
			border-radius: var(--radius-xl);
			padding: 3rem 4rem;
			text-align: center;
			box-shadow: 0 0 40px color-mix(in srgb, var(--primary) 30%, transparent);
			position: relative;
			z-index: 2;
			opacity: 0;
			transform: scale(0.8);
			transition: opacity 0.5s, transform 0.5s;
		}
		.referral-card.active {
			opacity: 1;
			transform: scale(1);
		}
		.referral-card h3 {
			font-family: var(--font-heading);
			font-size: 1.5rem;
			margin-bottom: 0.5rem;
		}
		.referral-stamp {
			position: relative;
			min-height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 1.5rem 0;
		}
		.referral-stamp .paw-imprint {
			position: absolute;
			width: 300px;
			height: 300px;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(30deg);
			background-color: var(--on-surface);
			-webkit-mask: url('images/dog-paw.svg') center/contain no-repeat;
			mask: url('images/dog-paw.svg') center/contain no-repeat;
			opacity: 0.016;
			pointer-events: none;
			z-index: 0;
		}
		.referral-code-wrap {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			cursor: pointer;
			opacity: 0;
		}
		.referral-code-wrap.visible { opacity: 1; }
		.referral-code {
			font-family: var(--font-heading);
			font-size: 2.2rem;
			font-weight: 700;
			color: var(--primary);
			letter-spacing: 0.12em;
			background: var(--primary-subtle);
			padding: 14px 28px;
			border-radius: 14px;
			display: inline-flex;
			align-items: center;
			gap: 12px;
		}
		.referral-copy {
			width: 24px;
			height: 24px;
			color: var(--primary);
			flex-shrink: 0;
		}
		.referral-copied {
			font-size: 0.85rem;
			font-weight: 600;
			color: var(--primary);
			opacity: 0;
			transition: opacity 0.2s;
		}
		.referral-copied.show { opacity: 1; }
		.referral-card p {
			color: var(--on-surface-secondary);
			font-size: 0.95rem;
		}
		.submit-another {
			display: inline-block;
			margin-top: 1.5rem;
			font-size: 0.8rem;
			color: var(--on-surface-tertiary);
			text-decoration: underline;
			cursor: pointer;
			opacity: 0;
			transition: opacity 0.5s ease, color 0.3s;
			pointer-events: none;
		}
		.submit-another.visible {
			opacity: 1;
			pointer-events: auto;
		}
		.submit-another:hover { color: var(--primary); }
		.stamp-paw {
			transform: translate(-50%, -50%) scale(15) rotate(30deg);
		}
		@keyframes pawStamp {
			0% { opacity: 0.6; transform: translate(-50%, -50%) scale(15) rotate(30deg); }
			70% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1) rotate(30deg); }
			85% { transform: translate(-50%, -50%) scale(0.95) rotate(30deg); }
			100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(30deg); }
		}
		/* Bean stamp — hidden initially, scales from huge to final position */
		.referral-wrap .makeover-right.bean-hidden {
			opacity: 0 !important;
			pointer-events: none;
		}
		.referral-wrap .makeover-right .bean-overlay-speech {
			display: none;
		}
		.referral-wrap .makeover-right.bean-can-talk .bean-overlay-speech {
			display: block;
			animation: fadeIn 0.3s ease both;
		}
		@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}
		@keyframes beanStamp {
			0% { opacity: 1; transform: translateX(-120%) scale(12) rotate(25deg); }
			70% { transform: translateX(-120%) scale(1.1) rotate(-5deg); }
			85% { transform: translateX(-120%) scale(0.95) rotate(3deg); }
			100% { opacity: 1; transform: translateX(-120%) scale(1) rotate(8deg); }
		}
		@keyframes beanSettle {
			0% { transform: translateX(-120%) rotate(8deg); }
			100% { transform: translateX(0) rotate(0deg); }
		}
		@keyframes beanSpin {
			0% { transform: rotateY(0deg); }
			100% { transform: rotateY(1080deg); }
		}
		@keyframes beanVibrate {
			0%, 100% { transform: translate(0,0) rotate(0); }
			5% { transform: translate(-1.2px,0.8px) rotate(-0.8deg); }
			10% { transform: translate(1.2px,-0.6px) rotate(0.6deg); }
			15% { transform: translate(-1px,-0.8px) rotate(-0.6deg); }
			20% { transform: translate(0.8px,1px) rotate(0.8deg); }
			25% { transform: translate(-0.6px,-0.6px) rotate(-0.4deg); }
			30% { transform: translate(1px,0.4px) rotate(0.6deg); }
			35% { transform: translate(-0.8px,0.6px) rotate(-0.6deg); }
			40% { transform: translate(0.6px,-0.8px) rotate(0.4deg); }
			45% { transform: translate(-0.4px,0.6px) rotate(-0.4deg); }
			50% { transform: translate(0.8px,-0.4px) rotate(0.4deg); }
			55% { transform: translate(-0.6px,0.4px) rotate(-0.2deg); }
			60% { transform: translate(0.4px,-0.4px) rotate(0.2deg); }
			65% { transform: translate(-0.4px,0.2px) rotate(-0.2deg); }
			70% { transform: translate(0.2px,-0.2px) rotate(0.2deg); }
			75% { transform: translate(-0.2px,0.2px) rotate(0); }
			80% { transform: translate(0.2px,0) rotate(0); }
		}
		@keyframes beanRocket {
			0% { transform: translateY(0) scale(1); opacity: 1; }
			30% { transform: translateY(10px) scale(1.1); }
			40% { transform: translateY(5px) scale(1.05); }
			100% { transform: translateY(-150vh) scale(0.3); opacity: 0; }
		}
		@keyframes beanIdle {
			0% { transform: translate(0,0) rotate(0deg); }
			8% { transform: translate(-3px, 1px) rotate(-2.5deg); }
			16% { transform: translate(4px, -1px) rotate(3deg); }
			24% { transform: translate(-5px, 0.5px) rotate(-2deg); }
			32% { transform: translate(3px, -0.5px) rotate(2.5deg); }
			40% { transform: translate(-4px, 1px) rotate(-3deg); }
			48% { transform: translate(5px, 0px) rotate(2deg); }
			56% { transform: translate(-3px, -1px) rotate(-2.5deg); }
			64% { transform: translate(4px, 0.5px) rotate(3deg); }
			72% { transform: translate(-5px, 0px) rotate(-2deg); }
			80% { transform: translate(3px, 1px) rotate(1.5deg); }
			88% { transform: translate(-2px, -0.5px) rotate(-1deg); }
			100% { transform: translate(0,0) rotate(0deg); }
		}
		@keyframes beanPutter {
			0% { transform: translateX(0) rotate(0deg); }
			10% { transform: translateX(12px) rotate(2deg); }
			25% { transform: translateX(-8px) rotate(-3deg); }
			35% { transform: translateX(15px) rotate(1.5deg); }
			50% { transform: translateX(-12px) rotate(-2deg); }
			60% { transform: translateX(6px) rotate(3deg); }
			75% { transform: translateX(-15px) rotate(-1deg); }
			85% { transform: translateX(10px) rotate(2.5deg); }
			100% { transform: translateX(0) rotate(0deg); }
		}
		@keyframes beanIdleSpin {
			0% { transform: rotateY(0deg); }
			100% { transform: rotateY(360deg); }
		}
		@keyframes beanLanding {
			0% { transform: translateY(-150vh) scale(0.3) rotate(0); opacity: 0; }
			10% { opacity: 1; }
			30% { transform: translateY(-60vh) scale(0.6) rotate(3deg); }
			40% { transform: translateY(-40vh) scale(0.7) rotate(-2deg); }
			50% { transform: translateY(-25vh) scale(0.8) rotate(3deg); }
			60% { transform: translateY(-12vh) scale(0.9) rotate(-2deg); }
			70% { transform: translateY(-5vh) scale(0.95) rotate(1deg); }
			80% { transform: translateY(2vh) scale(1.02) rotate(-1deg); }
			85% { transform: translateY(-1vh) scale(1) rotate(0.5deg); }
			90% { transform: translateY(0.5vh) scale(1) rotate(-0.3deg); }
			95% { transform: translateY(-0.2vh) scale(1) rotate(0.1deg); }
			100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
		}

		@keyframes cardShake {
			0% { transform: translate(0,0) rotate(0) scale(1); }
			2.5% { transform: translate(-14px,8px) rotate(-9deg) scale(1.08); }
			5% { transform: translate(12px,-10px) rotate(8deg) scale(1.06); }
			7.5% { transform: translate(-10px,-8px) rotate(-8deg) scale(1.07); }
			10% { transform: translate(14px,6px) rotate(9deg) scale(1.05); }
			12.5% { transform: translate(-12px,10px) rotate(-7deg) scale(1.06); }
			15% { transform: translate(10px,-8px) rotate(7deg) scale(1.05); }
			17.5% { transform: translate(-14px,4px) rotate(-8deg) scale(1.04); }
			20% { transform: translate(12px,-6px) rotate(8deg) scale(1.04); }
			22.5% { transform: translate(-10px,8px) rotate(-7deg) scale(1.03); }
			25% { transform: translate(8px,-10px) rotate(6deg) scale(1.03); }
			30% { transform: translate(-12px,6px) rotate(-6deg) scale(1.03); }
			35% { transform: translate(10px,-4px) rotate(6deg) scale(1.02); }
			40% { transform: translate(-8px,6px) rotate(-5deg) scale(1.02); }
			45% { transform: translate(8px,-6px) rotate(5deg) scale(1.02); }
			50% { transform: translate(-6px,4px) rotate(-4deg) scale(1.02); }
			55% { transform: translate(6px,-4px) rotate(4deg) scale(1.01); }
			60% { transform: translate(-4px,4px) rotate(-3deg) scale(1.01); }
			65% { transform: translate(4px,-2px) rotate(3deg) scale(1.01); }
			70% { transform: translate(-3px,2px) rotate(-2deg) scale(1); }
			75% { transform: translate(2px,-2px) rotate(1deg) scale(1); }
			80% { transform: translate(-1px,1px) rotate(-0.5deg) scale(1); }
			85% { transform: translate(0.5px,0) rotate(0.3deg) scale(1); }
			90% { transform: translate(0,0) rotate(0) scale(1); }
			100% { transform: translate(0,0) rotate(0) scale(1); }
		}

		.makeover-success {
			display: none;
			text-align: center;
		}
		.makeover-success.active { display: block; }
		.makeover-success .mascot-small {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			overflow: hidden;
			margin: 0 auto 1rem;
			box-shadow: 0 0 0 3px var(--primary), 0 0 20px color-mix(in srgb, var(--primary) 25%, transparent);
		}
		.makeover-success .mascot-small img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.makeover-success .typewriter-text {
			font-size: 1rem;
			color: var(--on-surface);
			line-height: 1.6;
			min-height: 3rem;
		}

		/* Step 2 status */
		.step-status {
			margin-top: 12px;
			padding: 10px 16px;
			border-radius: 10px;
			background: var(--primary-subtle);
			font-size: 0.9rem;
			font-weight: 500;
			color: var(--primary);
			display: none;
		}
		.step-status.active { display: block; }
		.step-status.pulse {
			animation: statusPulse 2s ease-in-out infinite;
		}
		@keyframes statusPulse {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.6; }
		}

		.hidden { display: none !important; }

		/* Floating Bean buddy */
		.bean-float {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 800;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 8px;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.4s;
			will-change: transform;
			transform-origin: 0 0;
		}
		.bean-float.visible {
			opacity: 1;
		}
		.bean-float.visible:not(.bean-is-docked) .bean-float-img {
			animation: beanVibrate 0.3s linear infinite;
		}
		.bean-float-bubble {
			position: fixed;
			z-index: 801;
			background: var(--surface-card);
			border: 1.5px solid var(--primary);
			border-radius: 14px;
			padding: 8px 14px;
			font-size: 0.8rem;
			color: var(--on-surface);
			width: 240px;
			text-align: left;
			box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 15%, transparent);
			pointer-events: none;
			opacity: 0;
			transform: scale(0.8);
			transition: opacity 0.3s, transform 0.3s;
		}
		.bean-float-bubble.show {
			opacity: 1;
			transform: scale(1);
		}
		.bean-float-bubble::after { display: none; }
		.bean-bubble-arrow {
			pointer-events: none;
			overflow: visible;
		}
		.bean-bubble-arrow svg {
			width: 100%;
			height: 100%;
			display: block;
			overflow: visible;
		}
		.bean-float-img {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 0 0 2px var(--primary), 0 4px 15px rgba(0,0,0,0.2);
			cursor: pointer;
			pointer-events: auto;
			transition: transform 0.2s;
		}
		.bean-float-img:hover {
			transform: scale(1.1);
		}
		.bean-float-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		/* Mobile: rest position handled by JS getRestPos() */

		.mobile-cta {
			display: none;
			position: fixed;
			bottom: 1.5rem;
			left: 50%;
			transform: translateX(-50%);
			z-index: 900;
			padding: 14px 32px;
			border-radius: var(--radius-xl);
			background: var(--primary);
			color: var(--primary-on);
			font-weight: 700;
			font-size: 1rem;
			text-align: center;
			box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 40%, transparent);
			animation: ctaPulse 2.5s ease-in-out infinite;
			cursor: pointer;
			white-space: nowrap;
		}
		@media (max-width: 768px) {
			.steps-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}
		}

		/* ═══════════════════════════════════════════
			 PRICING
			 ═══════════════════════════════════════════ */
		/* Pricing toggle */
		.pricing-toggle {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0;
			margin: 2rem auto 2.5rem;
			background: var(--surface-card);
			border-radius: 100px;
			padding: 4px;
			width: fit-content;
			border: 1px solid var(--border);
		}
		.pricing-toggle button {
			padding: 10px 28px;
			border-radius: 100px;
			font-size: 0.9rem;
			font-weight: 600;
			color: var(--on-surface-secondary);
			transition: all 0.25s;
		}
		.pricing-toggle button.active {
			background: var(--primary);
			color: #fff;
			box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 40%, transparent);
		}
		.pricing-toggle .save-badge {
			font-size: 0.75rem;
			font-weight: 600;
			color: var(--primary);
			margin-left: 6px;
		}
		.pricing-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 32px;
			max-width: 880px;
			margin: 0 auto;
		}
		.pricing-card {
			background: var(--surface-card);
			border-radius: var(--radius-lg);
			padding: 40px 32px;
			border: 2px solid var(--border);
			position: relative;
			overflow: visible;
			transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
		}
		.pricing-card.featured {
			border-color: var(--primary);
			box-shadow:
				0 0 8px color-mix(in srgb, var(--primary) 40%, transparent),
				0 0 25px color-mix(in srgb, var(--primary) 20%, transparent),
				inset 0 0 15px color-mix(in srgb, var(--primary) 6%, transparent);
		}
		.pricing-card::before {
			content: '';
			position: absolute;
			inset: -2px;
			border-radius: var(--radius-lg);
			padding: 2px;
			background: linear-gradient(135deg, var(--neon-a), var(--neon-b));
			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			opacity: 0;
			transition: opacity 0.4s ease;
			pointer-events: none;
		}
		.pricing-card:hover::before {
			opacity: 1;
		}
		.pricing-card {
			transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
		}
		.pricing-card:hover {
			border-color: transparent;
			box-shadow: 0 0 30px var(--neon-a), var(--shadow-lg), 0 30px 60px rgba(0,0,0,0.18);
			transform: translateY(-10px) scale(1.03);
		}
		.pricing-badge {
			display: inline-block;
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--primary);
			background: var(--primary-subtle);
			padding: 5px 14px;
			border-radius: 100px;
			margin-bottom: 20px;
		}
		.pricing-card .price {
			font-family: var(--font-heading);
			font-size: 2.8rem;
			font-weight: 700;
			color: var(--on-surface);
			line-height: 1;
			margin-bottom: 4px;
		}
		.pricing-card .price-period {
			font-size: 1rem;
			font-weight: 400;
			color: var(--on-surface-tertiary);
		}
		.pricing-card .price-note {
			font-size: 0.9rem;
			color: var(--on-surface-secondary);
			margin-top: 8px;
			margin-bottom: 24px;
			line-height: 1.6;
		}
		.pricing-card .price-sub { display: block; }
		.pricing-card .price-once { display: none; }
		.pricing-card.show-once .price-sub { display: none; }
		.pricing-card.show-once .price-once { display: block; }
		.pricing-cta {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			text-align: center;
			padding: 14px;
			border-radius: 12px;
			font-weight: 600;
			font-size: 0.95rem;
			margin: 24px 0;
			transition: all 0.25s;
			text-decoration: none;
			cursor: pointer;
		}
		.pricing-cta-filled {
			background: var(--primary);
			color: #fff;
		}
		.pricing-cta-filled:hover {
			box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 40%, transparent);
		}
		.pricing-cta-outline {
			border: 2px solid var(--border);
			color: var(--primary);
		}
		.pricing-cta-outline:hover {
			border-color: var(--primary);
			background: var(--primary-subtle);
		}
		.pricing-features {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
		.pricing-features li {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			font-size: 0.88rem;
			color: var(--on-surface-secondary);
			line-height: 1.5;
		}
		.pricing-features li .check {
			color: var(--primary);
			font-weight: 700;
			flex-shrink: 0;
			margin-top: 2px;
		}
		.pricing-features li .cross {
			color: var(--on-surface-tertiary);
			font-weight: 700;
			flex-shrink: 0;
			margin-top: 2px;
			opacity: 0.5;
		}
		.pricing-features li.disabled {
			opacity: 0.45;
		}
		.pricing-extra {
			text-align: center;
			margin-top: 2rem;
			font-size: 0.9rem;
			color: var(--on-surface-tertiary);
		}
		@media (max-width: 640px) {
			.pricing-grid {
				grid-template-columns: 1fr;
			}
		}

		/* ═══════════════════════════════════════════
			 ABOUT
			 ═══════════════════════════════════════════ */
		.about-section {
			background: var(--surface-warm);
		}
		.about-content {
			max-width: 680px;
		}
		.about-content p {
			font-size: 1.05rem;
			color: var(--on-surface-secondary);
			line-height: 1.8;
		}

		/* ═══════════════════════════════════════════
			 CONTACT
			 ═══════════════════════════════════════════ */
		.contact-form-wrap {
			max-width: 600px;
			margin: 0 auto;
			background: var(--surface-card);
			border-radius: var(--radius-lg);
			padding: 40px;
			border: 1px solid var(--border);
			box-shadow: var(--shadow-md);
		}
		.form-group {
			margin-bottom: 20px;
		}
		.form-group label {
			display: block;
			font-size: 0.85rem;
			font-weight: 500;
			color: var(--on-surface);
			margin-bottom: 6px;
		}
		.form-group label .optional {
			color: var(--on-surface-tertiary);
			font-weight: 400;
		}
		.form-input {
			width: 100%;
			padding: 12px 16px;
			border: 1px solid var(--border);
			border-radius: var(--radius-sm);
			background: var(--surface);
			color: var(--on-surface);
			font-family: var(--font-body);
			font-size: 0.95rem;
			transition: border-color var(--transition), box-shadow var(--transition);
			outline: none;
		}
		.form-input:focus {
			border-color: var(--primary);
			box-shadow: 0 0 0 3px rgba(45,212,191,0.15);
		}
		.form-input::placeholder {
			color: var(--on-surface-tertiary);
		}
		select.form-input {
			padding-right: 40px;
			appearance: auto;
			-webkit-appearance: auto;
		}
		textarea.form-input {
			resize: vertical;
			min-height: 120px;
		}
		.form-turnstile.hidden {
			display: none;
		}
		.form-turnstile {
			margin-bottom: 24px;
		}
		.form-submit {
			width: 100%;
		}
		.form-status {
			margin-top: 16px;
			padding: 12px 16px;
			border-radius: var(--radius-sm);
			font-size: 0.9rem;
			display: none;
		}
		.form-status.success {
			display: block;
			background: var(--primary-subtle);
			color: #0d9488;
			border: 1px solid rgba(45,212,191,0.3);
		}
		.form-status.error {
			display: block;
			background: #fef2f2;
			color: #dc2626;
			border: 1px solid rgba(220,38,38,0.2);
		}
		[data-theme="dark"] .form-status.error {
			background: rgba(220,38,38,0.1);
			color: #fca5a5;
			border-color: rgba(220,38,38,0.3);
		}
		[data-theme="dark"] .form-status.success {
			color: #5eead4;
		}
		@media (max-width: 640px) {
			.contact-form-wrap { padding: 28px 20px; }
		}

		/* ═══════════════════════════════════════════
			 FOOTER
			 ═══════════════════════════════════════════ */
		.footer {
			padding: 32px 0;
			border-top: 1px solid var(--border);
			text-align: center;
			font-size: 0.85rem;
			color: var(--on-surface-tertiary);
		}

		/* ═══════════════════════════════════════════
			 REVEAL ANIMATIONS
			 ═══════════════════════════════════════════ */
		.reveal {
			opacity: 0;
			transform: translateY(24px);
			transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		}
		.reveal.visible {
			opacity: 1;
			transform: translateY(0);
		}
		.reveal-d1 { transition-delay: 0.1s; }
		.reveal-d2 { transition-delay: 0.2s; }
		.reveal-d3 { transition-delay: 0.3s; }
		.reveal-d4 { transition-delay: 0.4s; }

		/* ═══════════════════════════════════════════
			 SCROLLBAR
			 ═══════════════════════════════════════════ */
		::-webkit-scrollbar { width: 8px; }
		::-webkit-scrollbar-track { background: var(--surface); }
		::-webkit-scrollbar-thumb {
			background: var(--border);
			border-radius: 4px;
		}
		::-webkit-scrollbar-thumb:hover { background: var(--on-surface-tertiary); }

		/* ═══════════════════════════════════════════
			 REDUCED MOTION
			 ═══════════════════════════════════════════ */
		@media (prefers-reduced-motion: reduce) {
			*, *::before, *::after {
				animation-duration: 0.01ms !important;
				transition-duration: 0.01ms !important;
			}
			html { scroll-behavior: auto; }
			.reveal { opacity: 1; transform: none; }
		}