:root {
				--moss: #ff6b5e;
				--moss-light: #e14b3f;
				--moss-soft: #ffe8e5;
				--earth: #1c1b18;
				--earth-mid: #3a3830;
				--sand: #fff4f2;
				--sand-warm: #ede9e0;
				--sand-border: #e0dad0;
				--text-main: #1c1b18;
				--text-muted: #5a5650;
				--text-soft: #5e5a56;
				--white: #fdfcfa;
				--radius-lg: 20px;
				--radius-md: 14px;
				--radius-sm: 10px;
			}

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

			#why-chompi,
			#features,
			#app,
			#waitlist {
				scroll-margin-top: 80px;
			}

			html {
				scroll-behavior: smooth;
				background: var(--sand);
				overflow-x: hidden;
			}

			body {
				margin: 0;
				font-family: "Plus Jakarta Sans", sans-serif;
				background: var(--sand);
				color: var(--text-main);
				-webkit-font-smoothing: antialiased;
				overflow-x: hidden;
			}

			.skip-nav {
				position: absolute;
				top: -100%;
				left: 0;
				background: var(--moss);
				color: #fff;
				padding: 12px 24px;
				font-weight: 700;
				font-size: 14px;
				text-decoration: none;
				z-index: 9999;
				transition: top 0.2s;
			}
			.skip-nav:focus {
				top: 0;
			}

			/* ══════════════════════════════
			   NAV
			══════════════════════════════ */
			nav {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 100;
				padding: 0 40px;
				height: 68px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: rgba(247, 245, 241, 0.92);
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
				border-bottom: 1px solid var(--sand-border);
				animation: fadeDown 0.6s ease both;
			}

			.nav-logo {
				display: flex;
				align-items: center;
				gap: 10px;
				text-decoration: none;
			}

			.nav-links {
				display: flex;
				align-items: center;
				gap: 32px;
			}

			.nav-links a {
				font-size: 14px;
				font-weight: 400;
				color: var(--text-muted);
				text-decoration: none;
				transition: color 0.2s;
			}
			.nav-links a:hover {
				color: var(--text-main);
			}

			.nav-cta {
				background: var(--moss);
				color: #fff !important;
				padding: 9px 20px;
				border-radius: 40px;
				font-size: 14px !important;
				font-weight: 600 !important;
				text-decoration: none !important;
				min-height: 44px;
				display: inline-flex;
				align-items: center;
				transition:
					background 0.2s,
					transform 0.15s !important;
			}
			.nav-cta:hover {
				background: var(--moss-light) !important;
				transform: translateY(-1px);
				color: #fff !important;
			}

			/* ══════════════════════════════
	   HERO
	══════════════════════════════ */
			.hero {
				min-height: 100vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				padding: 120px 24px 80px;
				position: relative;
				overflow: hidden;
				background: var(--sand);
			}

			.hero-blob {
				position: absolute;
				border-radius: 50%;
				filter: blur(80px);
				pointer-events: none;
			}
			.blob-1 {
				width: 500px;
				height: 500px;
				background: radial-gradient(
					circle,
					rgba(255, 107, 94, 0.12) 0%,
					transparent 70%
				);
				top: -100px;
				left: -100px;
			}
			.blob-2 {
				width: 400px;
				height: 400px;
				background: radial-gradient(
					circle,
					rgba(225, 75, 63, 0.08) 0%,
					transparent 70%
				);
				bottom: 0;
				right: -80px;
			}

			.hero-badge {
				display: inline-flex;
				align-items: center;
				gap: 10px;
				background: var(--moss-light);
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				letter-spacing: 0.2px;
				padding: 10px 22px;
				border-radius: 40px;
				margin-bottom: 32px;
				animation: fadeUp 0.7s 0.1s ease both;
			}

			.hero h1 {
				font-size: clamp(44px, 7vw, 80px);
				font-weight: 700;
				letter-spacing: -2.5px;
				line-height: 1.05;
				color: var(--text-main);
				max-width: 780px;
				margin-bottom: 24px;
				animation: fadeUp 0.7s 0.2s ease both;
			}
			.hero h1 em {
				font-style: normal;
				color: var(--moss);
			}

			.hero-sub {
				font-size: clamp(16px, 2vw, 19px);
				font-weight: 400;
				color: var(--text-muted);
				max-width: 500px;
				line-height: 1.65;
				margin-bottom: 20px;
				animation: fadeUp 0.7s 0.3s ease both;
			}

			.vs-compare {
				display: flex;
				align-items: stretch;
				gap: 0;
				margin-bottom: 14px;
				animation: fadeUp 0.7s 0.35s ease both;
			}

			.vs-card {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 22px 28px;
				border-radius: 18px;
				min-width: 210px;
				text-align: center;
			}

			.vs-card--neutral {
				background: #d8d3cc;
				color: var(--text-main);
			}

			.vs-card--coral {
				background: var(--moss);
				color: #fff;
			}

			.vs-brand {
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 1.5px;
				color: var(--text-muted);
				height: 28px;
				display: flex;
				align-items: center;
				margin-bottom: 6px;
			}

			.vs-logo {
				height: 28px;
				width: auto;
				margin-bottom: 6px;
				opacity: 0.92;
				object-fit: contain;
			}

			.vs-pct {
				font-size: 52px;
				font-weight: 800;
				letter-spacing: -2px;
				line-height: 1;
				margin-bottom: 2px;
			}

			.vs-card--neutral .vs-pct {
				color: var(--text-main);
			}
			.vs-card--coral .vs-pct {
				color: #fff;
			}

			.vs-label {
				font-size: 12px;
				font-weight: 400;
				margin-bottom: 14px;
				opacity: 0.65;
			}

			.vs-pills {
				display: flex;
				flex-direction: column;
				gap: 6px;
				width: 100%;
			}

			.vs-pill {
				font-size: 12px;
				font-weight: 600;
				padding: 5px 14px;
				border-radius: 40px;
				white-space: nowrap;
				width: 100%;
				box-sizing: border-box;
			}

			.vs-pill--bad {
				background: #e8e5e0;
				color: var(--text-muted);
			}

			.vs-pill--good {
				background: rgba(255, 255, 255, 0.25);
				color: #fff;
			}

			.vs-divider {
				font-size: 13px;
				font-weight: 700;
				color: var(--text-soft);
				padding: 0 16px;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.vs-source {
				font-size: 10px;
				color: var(--text-soft);
				margin-bottom: 36px;
				animation: fadeUp 0.7s 0.35s ease both;
			}

			/* ══════════════════════════════
			   HOW IT WORKS
			══════════════════════════════ */
			section {
				padding: 100px 24px;
				max-width: 1100px;
				margin: 0 auto;
			}

			.section-eyebrow {
				font-size: 11px;
				font-weight: 600;
				letter-spacing: 2.5px;
				text-transform: uppercase;
				color: var(--moss);
				margin-bottom: 14px;
			}

			.section-title {
				font-size: clamp(36px, 5.5vw, 64px);
				font-weight: 700;
				letter-spacing: -2px;
				line-height: 1.05;
				color: var(--text-main);
				margin-bottom: 16px;
			}

			.section-sub {
				font-size: 17px;
				color: var(--text-muted);
				max-width: 460px;
				line-height: 1.65;
				margin-bottom: 60px;
			}

			/* Steps */
			.steps {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 40px 24px;
			}

			.step-card {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				padding: 0 16px;
				background: none;
				border: none;
				border-radius: 0;
			}

			.step-icon-wrap {
				width: 180px;
				height: 180px;
				border-radius: 50%;
				background: radial-gradient(circle at 38% 32%, #ffe8e5, #ffbdb8);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 28px;
				position: relative;
				transition: transform 0.3s ease;
			}

			.step-card:hover .step-icon-wrap {
				transform: translateY(-6px);
			}

			/* Accent spark top-right */
			.step-icon-wrap::before {
				content: "";
				position: absolute;
				top: -6px;
				right: 22px;
				width: 10px;
				height: 10px;
				background: var(--moss);
				clip-path: polygon(
					50% 0%,
					61% 35%,
					98% 35%,
					68% 57%,
					79% 91%,
					50% 70%,
					21% 91%,
					32% 57%,
					2% 35%,
					39% 35%
				);
				opacity: 0.7;
			}

			/* Accent spark bottom-left */
			.step-icon-wrap::after {
				content: "";
				position: absolute;
				bottom: 4px;
				left: -4px;
				width: 8px;
				height: 8px;
				background: var(--moss-light);
				clip-path: polygon(
					50% 0%,
					61% 35%,
					98% 35%,
					68% 57%,
					79% 91%,
					50% 70%,
					21% 91%,
					32% 57%,
					2% 35%,
					39% 35%
				);
				opacity: 0.55;
			}

			.step-num {
				font-size: 12px;
				font-weight: 700;
				letter-spacing: 1.5px;
				color: var(--moss-light);
				margin-bottom: 10px;
				display: block;
			}
			.step-num::after {
				display: none;
			}

			.step-card h3 {
				font-size: 18px;
				font-weight: 600;
				letter-spacing: -0.4px;
				margin-bottom: 10px;
				color: var(--text-main);
			}

			.step-card p {
				font-size: 14px;
				color: var(--text-muted);
				line-height: 1.65;
				max-width: 240px;
			}

			/* ══════════════════════════════
			   APP PROMO SECTION
			══════════════════════════════ */
			.app-section-wrap {
				background: var(--earth);
				padding: 110px 24px 0;
				overflow: hidden;
				position: relative;
				z-index: 1;
			}

			.app-section {
				max-width: 1100px;
				margin: 0 auto;
				display: grid;
				grid-template-columns: 1fr 420px;
				gap: 100px;
				align-items: start;
				position: relative;
			}

			.app-section .section-eyebrow {
				color: #ff8a82;
			}
			.app-section .section-title {
				color: #ede9e0;
			}
			.app-section .section-sub {
				color: #8a8278;
				margin-bottom: 40px;
			}
			.phone-blob {
				position: absolute;
				top: 50%;
				right: -10px;
				transform: translateY(-50%) rotate(-8deg);
				width: 400px;
				height: 620px;
				background: rgba(255, 107, 94, 0.42);
				border-radius: 60px 90px 70px 50px / 70px 50px 90px 65px;
				pointer-events: none;
				z-index: 0;
			}

			.phone-glow {
				position: absolute;
				bottom: -20px;
				left: 50%;
				transform: translateX(-50%);
				width: 220px;
				height: 40px;
				background: rgba(106, 138, 86, 0.3);
				filter: blur(24px);
				border-radius: 50%;
				pointer-events: none;
			}

			.app-store-btns {
				display: flex;
				gap: 12px;
				flex-wrap: wrap;
			}

			.store-btn {
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 13px 22px;
				background: rgba(255, 255, 255, 0.07);
				border: 1px solid rgba(255, 255, 255, 0.1);
				border-radius: var(--radius-md);
				text-decoration: none;
				transition:
					background 0.2s,
					border-color 0.2s;
				position: relative;
				cursor: default;
			}
			.store-btn:hover {
				background: rgba(255, 255, 255, 0.1);
				border-color: rgba(255, 255, 255, 0.18);
			}

			.store-btn-soon {
				position: absolute;
				top: -9px;
				right: 10px;
				background: var(--moss-light);
				color: #fff;
				font-size: 8px;
				font-weight: 700;
				letter-spacing: 1px;
				padding: 3px 8px;
				border-radius: 20px;
				text-transform: uppercase;
			}

			.store-btn-text span:first-child {
				display: block;
				font-size: 9px;
				color: rgba(255, 255, 255, 0.45);
				letter-spacing: 0.3px;
			}
			.store-btn-text span:last-child {
				display: block;
				font-size: 15px;
				color: #fff;
				font-weight: 600;
				letter-spacing: -0.4px;
			}

			.app-feature-perks {
				display: flex;
				flex-wrap: wrap;
				gap: 16px;
				margin-top: 20px;
			}

			.app-feature-perks span {
				font-size: 13px;
				font-weight: 700;
				color: var(--moss);
				letter-spacing: -0.1px;
			}

			/* Mock phone */
			.phone-mock {
				position: relative;
				display: flex;
				justify-content: center;
				margin-bottom: 0;
			}

			.phone-frame {
				position: relative;
				z-index: 1;
				background: #161412;
				border-radius: 48px;
				padding: 10px;
				border: 2px solid #0a0908;
				box-shadow:
					0 60px 100px rgba(0, 0, 0, 0.7),
					0 0 0 1px rgba(255, 255, 255, 0.07),
					inset 0 1px 0 rgba(255, 255, 255, 0.12),
					6px 0 0 #0f0d0b,
					12px 6px 0 #080706,
					18px 12px 0 rgba(0, 0, 0, 0.3),
					24px 18px 28px rgba(0, 0, 0, 0.35);
				transform: perspective(900px) rotateY(-22deg) rotateX(4deg);
				transform-origin: center center;
			}

			.phone-frame::before {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
				background: linear-gradient(
					110deg,
					rgba(255, 255, 255, 0.07) 0%,
					transparent 45%
				);
				pointer-events: none;
			}

			.phone-mock::after {
				content: none;
			}

			.phone-btn {
				position: absolute;
				background: #161412;
				border: 1.5px solid #0a0908;
			}

			.phone-btn-mute {
				left: -5px;
				top: 118px;
				width: 4px;
				height: 28px;
				border-radius: 2px 0 0 2px;
				border-right: none;
			}

			.phone-btn-vol-up {
				left: -5px;
				top: 164px;
				width: 4px;
				height: 54px;
				border-radius: 2px 0 0 2px;
				border-right: none;
			}

			.phone-btn-vol-down {
				left: -5px;
				top: 228px;
				width: 4px;
				height: 54px;
				border-radius: 2px 0 0 2px;
				border-right: none;
			}

			.phone-btn-power {
				right: -5px;
				top: 186px;
				width: 4px;
				height: 78px;
				border-radius: 0 2px 2px 0;
				border-left: none;
			}

			.phone-shell {
				width: 300px;
				height: 540px;
				background: #2a2820;
				border-radius: 38px;
				border: 2px solid #2a2820;
				overflow: hidden;
				position: relative;
			}

			.phone-screen {
				width: 100%;
				height: 540px;
				background: var(--sand);
				display: flex;
				flex-direction: column;
				overflow: hidden;
			}

			.phone-status {
				flex-shrink: 0;
				height: 48px;
				background: var(--sand);
				display: flex;
				align-items: flex-start;
				justify-content: center;
				padding-top: 10px;
				border-bottom: none;
				position: relative;
			}

			.phone-status-time {
				position: absolute;
				left: 16px;
				top: 50%;
				transform: translateY(-50%);
				margin-top: -2px;
				font-size: 9px;
				font-weight: 700;
				color: var(--text-main);
				letter-spacing: -0.3px;
			}

			.phone-status-icons {
				position: absolute;
				right: 14px;
				top: 50%;
				transform: translateY(-50%);
				margin-top: -2px;
				display: flex;
				align-items: center;
				gap: 3px;
			}

			.phone-notch {
				width: 100px;
				height: 28px;
				background: #1a1814;
				border-radius: 999px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 10px;
			}

			.phone-camera {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: #2d2b26;
				border: 1px solid rgba(255, 255, 255, 0.12);
			}

			.phone-content {
				flex: 1;
				padding: 20px 16px;
				display: flex;
				flex-direction: column;
				gap: 12px;
				overflow: hidden;
			}

			.phone-header {
				font-size: 15px;
				font-weight: 700;
				letter-spacing: -0.5px;
				color: var(--text-main);
				margin-bottom: 4px;
			}

			.phone-sub {
				font-size: 10px;
				color: var(--text-soft);
				margin-bottom: 8px;
			}

			.phone-card {
				background: var(--white);
				border-radius: 12px;
				padding: 14px;
				border: 1px solid var(--sand-border);
			}

			.phone-card-row {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.phone-avatar {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.phone-card-info {
				flex: 1;
			}
			.phone-card-name {
				font-size: 11px;
				font-weight: 600;
				color: var(--text-main);
			}
			.phone-card-detail {
				font-size: 9px;
				color: var(--text-soft);
				margin-top: 2px;
			}

			.phone-pill {
				font-size: 8px;
				font-weight: 600;
				padding: 3px 8px;
				border-radius: 20px;
				background: #d4f7d4;
				color: #2a6e2a;
			}

			.phone-bar {
				height: 6px;
				border-radius: 6px;
				background: var(--sand-border);
				overflow: hidden;
			}
			.phone-bar-fill {
				height: 100%;
				background: var(--moss-light);
				border-radius: 6px;
			}

			.phone-tag {
				font-size: 9px;
				color: var(--text-soft);
				margin-top: 6px;
			}

			/* ══════════════════════════════
			   FEATURES GRID
			══════════════════════════════ */
			/* ══════════════════════════════
			   FEATURES SECTION
			══════════════════════════════ */
			.features-section {
				background: var(--sand-warm);
				padding: 100px 24px 80px;
			}
			.features-inner {
				max-width: 1100px;
				margin: 0 auto;
			}
			.features-header {
				text-align: center;
				margin-bottom: 48px;
			}
			.features-eyebrow {
				display: inline-block;
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 3px;
				text-transform: uppercase;
				color: var(--moss);
				margin-bottom: 20px;
			}
			.features-heading {
				font-size: clamp(36px, 5.5vw, 64px);
				font-weight: 700;
				letter-spacing: -2px;
				line-height: 1.05;
				color: var(--text-main);
				margin-bottom: 16px;
			}
			.features-heading em {
				font-style: normal;
				color: var(--moss);
			}
			.features-sub {
				font-size: 15px;
				color: var(--text-muted);
				margin-bottom: 0;
			}

			/* Feature columns (all 4 visible at once) */
			.feat-columns {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 0;
				margin-bottom: 48px;
				border: 1px solid var(--sand-border);
				border-radius: var(--radius-lg);
				overflow: hidden;
			}
			.feat-cta {
				grid-column: 1 / -1;
				background: var(--moss);
				padding: 18px 28px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 16px;
			}
			.feat-cta-text {
				font-size: 14px;
				font-weight: 600;
				color: #fff;
				letter-spacing: -0.2px;
			}
			.feat-cta-text em {
				font-style: normal;
				opacity: 0.8;
				font-weight: 400;
			}
			.feat-cta-link {
				font-size: 13px;
				font-weight: 700;
				color: #fff;
				text-decoration: none;
				white-space: nowrap;
				border: 1.5px solid rgba(255, 255, 255, 0.5);
				border-radius: 999px;
				padding: 7px 18px;
				transition:
					background 0.15s,
					border-color 0.15s;
			}
			.feat-cta-link:hover {
				background: rgba(255, 255, 255, 0.15);
				border-color: #fff;
			}
			.feat-column {
				display: flex;
				flex-direction: column;
				border-right: 1px solid var(--sand-border);
				background: var(--white);
			}
			.feat-column:last-child {
				border-right: none;
			}
			.feat-column-label {
				font-size: 12px;
				font-weight: 800;
				letter-spacing: 1.5px;
				text-transform: uppercase;
				color: var(--moss);
				padding: 18px 20px 16px;
				border-bottom: 1px solid var(--sand-border);
				background: var(--white);
			}
			.feat-card {
				display: flex;
				align-items: baseline;
				gap: 10px;
				padding: 13px 20px;
				background: var(--white);
				transition: background 0.15s;
			}
			.feat-card:hover {
				background: var(--sand);
			}
			.feat-card::before {
				content: "–";
				color: var(--moss);
				font-weight: 700;
				font-size: 13px;
				flex-shrink: 0;
				line-height: 1.5;
			}
			.feat-card h3 {
				font-size: 13px;
				font-weight: 600;
				letter-spacing: -0.1px;
				color: var(--text-main);
				line-height: 1.5;
				margin: 0;
			}
			.feat-card p {
				display: none;
			}
			@media (max-width: 900px) {
				.feat-columns {
					grid-template-columns: repeat(2, 1fr);
					border-radius: var(--radius-md);
				}
				.feat-column:nth-child(2) {
					border-right: none;
				}
				.feat-column:nth-child(3) {
					border-right: 1px solid var(--sand-border);
				}
			}
			@media (max-width: 540px) {
				.feat-columns {
					grid-template-columns: 1fr;
				}
				.feat-column {
					border-right: none;
				}
				.feat-column:not(:last-child) {
					border-bottom: 1px solid var(--sand-border);
				}
			}

			/* ══════════════════════════════
			   FOOTER
			══════════════════════════════ */
			footer {
				background: var(--earth);
				padding: 48px 40px 32px;
				display: flex;
				flex-direction: column;
				gap: 40px;
			}

			.footer-top {
				display: flex;
				align-items: flex-start;
			}

			.footer-logo {
				display: flex;
				align-items: center;
				text-decoration: none;
				flex-shrink: 0;
			}
			.footer-logo-img {
				height: 44px;
				width: auto;
			}

			.footer-links {
				display: flex;
				gap: 48px;
				margin: 0 auto;
			}
			.footer-group {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
			.footer-group h3 {
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 0.1em;
				text-transform: uppercase;
				color: #c0b8b0;
				margin: 0 0 4px;
			}
			.footer-links a {
				font-size: 13px;
				color: #a09890;
				text-decoration: none;
				font-weight: 400;
				transition: color 0.2s;
			}
			.footer-links a:hover {
				color: #a09890;
			}

			.footer-copy {
				font-size: 12px;
				color: #8a8480;
				font-weight: 400;
				padding-top: 24px;
				border-top: 1px solid #2a2926;
			}

			/* ══════════════════════════════
			   ANIMATIONS
			══════════════════════════════ */
			@keyframes fadeDown {
				from {
					opacity: 0;
					transform: translateY(-12px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			@keyframes fadeUp {
				from {
					opacity: 0;
					transform: translateY(20px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			@keyframes dotRipple {
				0% {
					transform: scale(1);
					opacity: 0.7;
				}
				100% {
					transform: scale(3.5);
					opacity: 0;
				}
			}

			/* ══════════════════════════════
			   BURGER MENU
			══════════════════════════════ */
			.nav-burger {
				display: none;
				flex-direction: column;
				justify-content: center;
				gap: 5px;
				cursor: pointer;
				padding: 6px;
				border: none;
				background: none;
				-webkit-tap-highlight-color: transparent;
			}
			.nav-burger span {
				display: block;
				width: 22px;
				height: 2px;
				background: var(--text-main);
				border-radius: 2px;
				transition:
					transform 0.28s ease,
					opacity 0.28s ease;
			}
			.nav-burger.open span:nth-child(1) {
				transform: translateY(7px) rotate(45deg);
			}
			.nav-burger.open span:nth-child(2) {
				opacity: 0;
				transform: scaleX(0);
			}
			.nav-burger.open span:nth-child(3) {
				transform: translateY(-7px) rotate(-45deg);
			}

			.nav-mobile-menu {
				display: none;
				position: fixed;
				top: 68px;
				left: 0;
				right: 0;
				background: rgba(247, 245, 241, 0.97);
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
				border-bottom: 1px solid var(--sand-border);
				padding: 8px 24px 24px;
				flex-direction: column;
				z-index: 99;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
			}
			.nav-mobile-menu.open {
				display: flex;
			}
			.nav-mobile-menu a {
				font-size: 17px;
				font-weight: 500;
				color: var(--text-muted);
				text-decoration: none;
				padding: 14px 0;
				border-bottom: 1px solid var(--sand-border);
				transition: color 0.2s;
			}
			.nav-mobile-menu a:last-child {
				border-bottom: none;
				margin-top: 12px;
				background: var(--moss);
				color: #fff !important;
				text-align: center;
				border-radius: 40px;
				padding: 14px;
				font-weight: 600;
				font-size: 15px;
			}
			.nav-mobile-menu a:hover {
				color: var(--text-main);
			}

			/* ══════════════════════════════
			   RESPONSIVE
			══════════════════════════════ */
			@media (max-width: 768px) {
				nav {
					padding: 0 20px;
				}
				.nav-links {
					display: none;
				}
				.nav-burger {
					display: flex;
				}
				.hero-mobile-cta {
					display: flex;
					justify-content: center;
					margin-bottom: 8px;
				}
				.hero-mobile-cta-btn {
					display: inline-flex;
					background: var(--moss);
					color: #fff;
					text-decoration: none;
					font-size: 15px;
					font-weight: 600;
					padding: 14px 28px;
					border-radius: 40px;
					transition: background 0.2s;
				}
				.hero-mobile-cta-btn:hover {
					background: var(--moss-light);
				}
				.mini-cta {
					display: none;
				}
				.vs-compare {
					display: none;
				}
				.vs-source {
					display: none;
				}
				.scroll-hint {
					display: none !important;
				}
				.hero {
					padding: 96px 20px 56px;
				}
				.hero h1 {
					font-size: 34px;
					letter-spacing: -1px;
					margin-bottom: 16px;
				}
				.hero-sub {
					margin-bottom: 24px;
				}
				.pet-shapes-row {
					margin-bottom: 32px;
				}
				.hero-badge {
					font-size: 12px;
					padding: 8px 16px;
				}
				.steps {
					grid-template-columns: 1fr;
				}
				.app-section {
					grid-template-columns: 1fr;
					gap: 48px;
				}
				.app-section-wrap {
					padding: 44px 20px 52px;
					overflow: hidden;
				}
				.phone-glow {
					display: none;
				}
				.app-section .section-sub {
					margin-bottom: 24px;
					font-size: 15px;
				}
				.app-store-btns {
					gap: 8px;
				}
				.store-btn {
					padding: 11px 16px;
					flex: 1;
				}
				.phone-mock {
					display: none;
				}
				.phone-blob {
					display: none;
				}
				section {
					padding: 64px 20px;
				}
				.built-section {
					padding: 48px 20px 40px;
				}
				.footer-top {
					flex-direction: column;
					gap: 28px;
				}
				.footer-links {
					flex-wrap: wrap;
					gap: 32px;
					margin: 0;
				}
				footer {
					padding: 40px 24px 28px;
				}
				.pullquote-section {
					padding: 64px 24px;
				}
				.waitlist-section {
					padding: 64px 20px 36px;
				}
				.meet-section-wrap {
					padding: 64px 20px;
				}
			}

			@media (max-width: 560px) {
				.vs-card {
					min-width: 0;
					flex: 1;
					padding: 16px 12px;
					border-radius: 14px;
				}
				.vs-pct {
					font-size: 36px;
					letter-spacing: -1px;
				}
				.vs-brand {
					font-size: 9px;
					height: 20px;
				}
				.vs-logo {
					height: 20px;
				}
				.vs-label {
					font-size: 10px;
					margin-bottom: 10px;
				}
				.vs-pills {
					gap: 4px;
				}
				.vs-pill {
					font-size: 10px;
					padding: 4px 8px;
				}
				.waitlist-form {
					padding-left: 16px;
				}
				.waitlist-form button {
					padding: 12px 16px;
					font-size: 13px;
				}
				.mini-form button {
					padding: 10px 14px;
					font-size: 12px;
				}
			}

			/* ══════════════════════════════
			   MEET MARK
			══════════════════════════════ */
			.meet-section-wrap {
				background: var(--white);
				padding: 96px 24px;
				border-top: 1px solid var(--sand-border);
				border-bottom: 1px solid var(--sand-border);
			}

			.meet-section {
				max-width: 1060px;
				margin: 0 auto;
				display: grid;
				grid-template-columns: 420px 1fr;
				gap: 72px;
				align-items: center;
				background: #ffe0dc;
				border: 1.5px solid rgba(78, 102, 64, 0.22);
				border-radius: 32px;
				padding: 56px 64px 56px 56px;
				box-shadow:
					0 8px 40px rgba(78, 102, 64, 0.1),
					0 2px 8px rgba(78, 102, 64, 0.06);
			}

			/* ── Visual / Photo card ── */
			.meet-photo-card {
				position: relative;
				border-radius: 28px;
				overflow: visible;
			}

			.meet-photo {
				width: 100%;
				aspect-ratio: 4/4.6;
				border-radius: 28px;
				overflow: hidden;
				background: #ffd5d0;
				box-shadow:
					0 2px 0 var(--sand-border),
					0 24px 64px rgba(0, 0, 0, 0.1),
					0 4px 16px rgba(0, 0, 0, 0.06);
			}

			/* Floating stat chips */
			.meet-chip {
				position: absolute;
				background: var(--white);
				border: 1px solid var(--sand-border);
				border-radius: 14px;
				padding: 10px 16px;
				box-shadow:
					0 8px 24px rgba(0, 0, 0, 0.1),
					0 2px 6px rgba(0, 0, 0, 0.06);
				display: flex;
				flex-direction: column;
				gap: 1px;
				z-index: 2;
				backdrop-filter: blur(8px);
			}

			.meet-chip-val {
				font-size: 17px;
				font-weight: 700;
				letter-spacing: -0.5px;
				color: var(--text-main);
				line-height: 1;
			}

			.meet-chip-label {
				font-size: 10px;
				font-weight: 400;
				color: var(--text-soft);
				letter-spacing: 0.2px;
			}

			.meet-chip-1 {
				top: 24px;
				right: -22px;
				animation: floatA 5s ease-in-out infinite;
			}
			.meet-chip-2 {
				bottom: 80px;
				right: -28px;
				animation: floatB 6s ease-in-out infinite;
			}
			.meet-chip-3 {
				bottom: 24px;
				left: -22px;
				animation: floatA 7s ease-in-out infinite reverse;
			}

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

			.meet-heading {
				font-size: clamp(28px, 3vw, 40px);
				font-weight: 700;
				letter-spacing: -1px;
				color: var(--text-main);
				line-height: 1.1;
				margin-bottom: 10px;
			}

			.meet-location {
				display: inline-flex;
				align-items: center;
				gap: 5px;
				font-size: 13px;
				font-weight: 400;
				color: var(--moss-light);
				margin-bottom: 22px;
			}

			.meet-bio {
				font-size: 16px;
				color: var(--text-muted);
				line-height: 1.7;
				margin-bottom: 28px;
				max-width: 460px;
			}

			/* Review card */
			.meet-review-card {
				background: var(--white);
				border: 1px solid rgba(78, 102, 64, 0.12);
				border-radius: var(--radius-md);
				padding: 22px 24px;
				margin-bottom: 24px;
			}

			.meet-stars {
				font-size: 14px;
				color: #d4973a;
				letter-spacing: 1px;
				margin-bottom: 10px;
			}

			.meet-review-text {
				font-size: 14px;
				color: var(--text-main);
				line-height: 1.65;
				font-style: italic;
				margin-bottom: 16px;
			}

			.meet-reviewer {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.meet-reviewer-avatar {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: var(--moss);
				color: #fff;
				font-size: 11px;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}

			.meet-reviewer-name {
				font-size: 13px;
				font-weight: 600;
				color: var(--text-main);
			}

			.meet-reviewer-detail {
				font-size: 11px;
				color: var(--text-soft);
				margin-top: 1px;
			}

			.meet-verified {
				margin-left: auto;
				display: flex;
				align-items: center;
				gap: 4px;
				font-size: 11px;
				font-weight: 600;
				color: #c0392b;
			}

			.meet-cta {
				display: inline-flex;
				align-items: center;
				gap: 6px;
				font-size: 14px;
				font-weight: 600;
				color: #fff;
				text-decoration: none;
				background: var(--moss);
				padding: 11px 24px;
				border-radius: 40px;
				transition:
					background 0.2s,
					transform 0.15s;
			}
			.meet-cta:hover {
				background: var(--moss-light);
				transform: translateY(-1px);
			}

			@media (max-width: 900px) {
				.meet-section {
					grid-template-columns: 1fr;
					gap: 48px;
					padding: 32px 28px;
				}
				.meet-photo-card {
					max-width: 320px;
					margin: 0 auto;
				}
				.meet-chip-1,
				.meet-chip-2,
				.meet-chip-3 {
					display: none;
				}
			}

			/* Intersection observer fade-in */
			.reveal {
				opacity: 0;
				transform: translateY(24px);
				transition:
					opacity 0.6s ease,
					transform 0.6s ease;
			}
			.reveal.visible {
				opacity: 1;
				transform: translateY(0);
			}
			/* ══════════════════════════════
			   SCROLL INDICATOR
			══════════════════════════════ */
			.scroll-hint {
				position: absolute;
				bottom: 32px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 6px;
				opacity: 0;
				animation: fadeIn 0.8s ease 1.2s forwards;
				cursor: pointer;
			}

			.scroll-hint-label {
				font-size: 11px;
				font-weight: 600;
				letter-spacing: 2px;
				text-transform: uppercase;
				color: var(--text-soft);
			}

			.scroll-hint-arrow {
				font-size: 20px;
				color: var(--text-soft);
				animation: arrowPulse 1.8s ease-in-out infinite;
				line-height: 1;
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}

			@keyframes arrowPulse {
				0%,
				100% {
					transform: translateY(0);
					opacity: 0.4;
				}
				50% {
					transform: translateY(5px);
					opacity: 1;
				}
			}

			/* ══════════════════════════════
			   WAITLIST SECTION
			══════════════════════════════ */
			.waitlist-section {
				background: #f5efe8;
				padding: 100px 24px;
				text-align: center;
			}

			.waitlist-inner {
				max-width: 540px;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 0;
			}

			.waitlist-badge {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				background: var(--moss);
				color: #fff;
				font-size: 13px;
				font-weight: 700;
				padding: 7px 18px;
				border-radius: 40px;
				margin-bottom: 32px;
			}

			.waitlist-title {
				font-size: clamp(36px, 5.5vw, 64px);
				font-weight: 700;
				letter-spacing: -2px;
				line-height: 1.05;
				color: var(--text-main);
				margin-bottom: 20px;
			}

			.waitlist-title em {
				font-style: normal;
				color: var(--moss);
			}

			.waitlist-sub {
				font-size: 17px;
				font-weight: 400;
				color: var(--text-muted);
				line-height: 1.6;
				margin-bottom: 32px;
			}

			@keyframes formPulse {
				0%,
				100% {
					box-shadow: 0 0 0 0 rgba(255, 107, 94, 0);
					border-color: #d0c8be;
				}
				50% {
					box-shadow: 0 0 0 5px rgba(255, 107, 94, 0.12);
					border-color: rgba(255, 107, 94, 0.45);
				}
			}

			.waitlist-form {
				display: flex;
				gap: 10px;
				align-items: center;
				background: var(--white);
				border: 2px solid #d0c8be;
				border-radius: 50px;
				padding: 7px 7px 7px 22px;
				width: 100%;
				max-width: 480px;
				margin-bottom: 20px;
				overflow: hidden;
				animation: formPulse 2.8s ease-in-out infinite;
				transition:
					border-color 0.2s,
					box-shadow 0.2s;
			}

			.waitlist-form:focus-within {
				border-color: var(--moss-light);
				box-shadow:
					0 4px 24px rgba(255, 107, 94, 0.12),
					0 0 0 3px rgba(255, 107, 94, 0.08);
			}

			.waitlist-form input {
				flex: 1;
				border: none;
				outline: none;
				background: transparent;
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 15px;
				color: var(--text-main);
				min-width: 0;
			}

			.waitlist-form input::placeholder {
				color: var(--text-soft);
			}

			.waitlist-form button {
				flex-shrink: 0;
				background: var(--moss);
				color: #fff;
				border: none;
				cursor: pointer;
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 14px;
				font-weight: 600;
				padding: 12px 24px;
				border-radius: 40px;
				min-height: 44px;
				transition:
					background 0.2s,
					transform 0.15s;
				white-space: nowrap;
			}

			.waitlist-form button:hover {
				background: var(--moss-light);
				transform: scale(1.02);
			}
			.waitlist-email-error {
				font-size: 12px;
				color: #c0392b;
				margin-top: 8px;
				text-align: center;
			}

			.waitlist-perks {
				display: flex;
				gap: 20px;
				flex-wrap: wrap;
				justify-content: center;
				font-size: 13px;
				font-weight: 600;
				color: var(--moss);
				margin-bottom: 12px;
			}

			.waitlist-disclaimer {
				font-size: 12px;
				color: var(--text-soft);
				margin-bottom: 32px;
			}

			.waitlist-rating {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				background: var(--white);
				border: 2px solid var(--sand-border);
				padding: 10px 20px;
				border-radius: 40px;
				font-size: 14px;
				color: var(--text-muted);
			}

			.waitlist-rating strong {
				color: var(--text-main);
			}

			/* ══════════════════════════════
			   BUILT FOR PETS SECTION
			══════════════════════════════ */
			.built-section {
				padding: 100px 24px;
				max-width: 1060px;
				margin: 0 auto;
				text-align: center;
			}

			.built-eyebrow {
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 3px;
				text-transform: uppercase;
				color: var(--moss);
				margin-bottom: 20px;
			}

			.built-heading {
				font-size: clamp(36px, 5.5vw, 64px);
				font-weight: 700;
				letter-spacing: -2px;
				line-height: 1.05;
				color: var(--text-main);
				margin-bottom: 16px;
			}

			.built-heading em {
				font-style: normal;
				color: var(--moss);
			}

			.built-sub {
				font-size: 15px;
				color: var(--text-muted);
				margin-bottom: 52px;
			}

			.built-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 16px;
				text-align: left;
			}

			.built-card {
				background: #fff;
				border: 1px solid var(--sand-border);
				border-radius: 20px;
				padding: 32px 28px;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
				transition:
					transform 0.22s ease,
					box-shadow 0.22s ease;
				display: flex;
				flex-direction: column;
			}

			.built-card:hover {
				transform: translateY(-5px);
				box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
			}

			.built-card.featured {
				background: var(--earth);
				border-color: transparent;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
			}

			.built-card-icon {
				margin-bottom: 20px;
				display: block;
				width: 48px;
				height: 48px;
			}

			.built-card-icon svg {
				width: 48px;
				height: 48px;
			}

			.built-card-icon--photo {
				width: 72px;
				height: 72px;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
				flex-shrink: 0;
			}

			.built-card-icon--photo img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center 18%;
				border-radius: 50%;
				-webkit-user-drag: none;
				user-select: none;
				-webkit-user-select: none;
				pointer-events: none;
				display: block;
			}

			.built-card-icon--photo::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: 50%;
				z-index: 1;
			}

			.built-card-tagline {
				font-size: 13px;
				font-weight: 600;
				color: #ff6b5e !important;
				margin-top: 12px;
				margin-bottom: 0;
			}

			.built-card h3 {
				font-size: 17px;
				font-weight: 700;
				color: var(--text-main);
				margin-bottom: 10px;
				letter-spacing: -0.3px;
			}

			.built-card.featured h3 {
				color: var(--moss);
			}

			.built-card p {
				font-size: 13px;
				color: var(--text-muted);
				line-height: 1.65;
			}

			.built-card.featured p {
				color: rgba(255, 255, 255, 0.62);
			}

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

			/* ══════════════════════════════
			   PULL QUOTE SECTION
			══════════════════════════════ */
			.pullquote-section {
				background: var(--moss);
				padding: 80px 40px;
				text-align: center;
				position: relative;
				overflow: hidden;
			}

			.pullquote-mark {
				position: absolute;
				top: -20px;
				left: 40px;
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 200px;
				color: rgba(255, 255, 255, 0.15);
				line-height: 1;
				pointer-events: none;
				user-select: none;
			}

			.pullquote-text {
				font-style: italic;
				font-size: clamp(22px, 3.5vw, 38px);
				font-weight: 700;
				color: #fff;
				max-width: 760px;
				margin: 0 auto 28px;
				line-height: 1.45;
				position: relative;
				z-index: 1;
			}

			.pullquote-logo {
				height: 1.35em;
				width: auto;
				vertical-align: middle;
				display: inline-block;
				position: relative;
				top: -0.05em;
				pointer-events: none;
				user-select: none;
				-webkit-user-drag: none;
			}

			.pullquote-attr {
				display: inline-flex;
				align-items: center;
				gap: 10px;
				font-size: 13px;
				color: rgba(255, 255, 255, 0.65);
				letter-spacing: 0.3px;
				position: relative;
				z-index: 1;
			}

			.pullquote-avatar {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				object-fit: cover;
				object-position: center top;
				border: 2px solid rgba(255, 255, 255, 0.5);
				flex-shrink: 0;
			}

			/* ── Pet shapes row ── */
			.pet-shapes-row {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				gap: 12px;
				margin-bottom: 44px;
				animation: fadeUp 0.7s 0.3s ease both;
			}

			.pet-shape {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}

			.pet-shape svg {
				display: block;
			}

			.pet-emoji {
				position: absolute;
				font-size: 32px;
				line-height: 1;
				filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
			}

			@media (max-width: 500px) {
				.pet-shapes-row {
					gap: 5px;
				}
				.pet-shape {
					flex: 1;
					min-width: 0;
				}
				.pet-shape svg {
					width: 100%;
					height: auto;
				}
				.pet-emoji {
					font-size: 20px;
				}
			}

			/* ══════════════════════════════
			   CONTENT VISIBILITY — below-fold sections skip render until needed
			══════════════════════════════ */
			.services-banner,
			.photo-section,
			.features-section,
			.pullquote-section,
			.meet-section-wrap,
			.waitlist-section {
				content-visibility: auto;
				contain-intrinsic-size: 0 500px;
			}

			/* ══════════════════════════════
			   SERVICES BANNER
			══════════════════════════════ */
			.services-banner {
				background: var(--sand);
				border-top: 1px solid var(--sand-border);
				border-bottom: 1px solid var(--sand-border);
				padding: 56px 24px;
			}

			.services-container {
				max-width: 1100px;
				margin: 0 auto;
			}

			.services-head {
				text-align: center;
				margin-bottom: 40px;
			}

			.services-eyebrow {
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 2.5px;
				text-transform: uppercase;
				color: var(--moss);
				margin-bottom: 12px;
			}

			.services-title {
				font-size: clamp(36px, 5.5vw, 64px);
				font-weight: 700;
				letter-spacing: -2px;
				color: var(--text-main);
				margin-bottom: 12px;
			}

			.services-title em {
				font-style: normal;
				color: var(--moss);
			}

			.services-sub {
				font-size: 15px;
				color: var(--text-muted);
				line-height: 1.6;
			}

			.services-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 16px;
			}

			.service-card {
				background: #ffffff;
				border: 1px solid var(--sand-border);
				border-radius: var(--radius-md);
				padding: 28px 24px 26px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 12px;
				box-shadow: 0 2px 10px rgba(28, 27, 24, 0.05);
				transition:
					box-shadow 0.2s,
					transform 0.2s;
			}

			.service-card:hover {
				box-shadow: 0 6px 20px rgba(28, 27, 24, 0.1);
				transform: translateY(-2px);
			}

			.service-img {
				width: 72px;
				height: 72px;
				border-radius: 50%;
				object-fit: cover;
				flex-shrink: 0;
				display: block;
			}

			.service-name {
				font-size: 15px;
				font-weight: 700;
				color: var(--text-main);
				letter-spacing: -0.3px;
			}

			.service-desc {
				font-size: 13px;
				color: var(--text-muted);
				line-height: 1.5;
				margin: 0;
			}

			@media (max-width: 640px) {
				.services-grid {
					grid-template-columns: repeat(2, 1fr);
				}
				.services-banner {
					padding: 40px 16px;
				}
			}

			/* ══════════════════════════════
			   PHOTO STRIP SECTION
			══════════════════════════════ */
			.photo-section {
				padding: 72px 0 80px;
				text-align: center;
				background: var(--sand);
				overflow: hidden;
			}

			.photo-section-head {
				padding: 0 24px;
				margin-bottom: 40px;
			}

			.photo-eyebrow {
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 2.5px;
				text-transform: uppercase;
				color: var(--moss);
				margin-bottom: 12px;
			}

			.photo-heading {
				font-size: clamp(36px, 5.5vw, 64px);
				font-weight: 700;
				letter-spacing: -2px;
				color: var(--text-main);
				margin-bottom: 8px;
			}

			.photo-heading em {
				font-style: normal;
				color: var(--moss);
			}

			.photo-heading .heading-logo {
				height: 1.2em;
				vertical-align: middle;
				display: inline-block;
				margin-left: 6px;
				position: relative;
				top: -0.05em;
			}

			.photo-sub {
				font-size: 15px;
				color: var(--text-muted);
				line-height: 1.6;
				max-width: 480px;
				margin: 0 auto;
			}

			.photo-strip-wrap {
				overflow: hidden;
				position: relative;
				margin-bottom: 40px;
			}

			.photo-strip-wrap::before,
			.photo-strip-wrap::after {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100px;
				z-index: 2;
				pointer-events: none;
			}
			.photo-strip-wrap::before {
				left: 0;
				background: linear-gradient(to right, var(--sand), transparent);
			}
			.photo-strip-wrap::after {
				right: 0;
				background: linear-gradient(to left, var(--sand), transparent);
			}

			.photo-strip {
				display: flex;
				gap: 16px;
				padding: 12px 60px;
				animation: scrollStrip 35s linear infinite;
				width: max-content;
				will-change: transform;
			}

			.photo-strip:hover {
				animation-play-state: paused;
			}

			@keyframes scrollStrip {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(calc(-216px * 14));
				}
			}

			.photo-card {
				width: 200px;
				height: 240px;
				border-radius: 20px;
				overflow: hidden;
				flex-shrink: 0;
				position: relative;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
				transition: transform 0.3s ease;
			}

			.photo-card:hover {
				transform: scale(1.04) rotate(-1deg);
			}
			.photo-card:nth-child(even) {
				margin-top: 24px;
			}

			.photo-card img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				pointer-events: none;
				user-select: none;
				-webkit-user-select: none;
				-webkit-user-drag: none;
			}

			.photo-card::after {
				content: "";
				position: absolute;
				inset: 0;
				z-index: 1;
			}

			.photo-pet-name {
				position: absolute;
				bottom: 10px;
				z-index: 2;
				left: 10px;
				background: rgba(255, 255, 255, 0.92);
				backdrop-filter: blur(8px);
				padding: 4px 10px;
				border-radius: 20px;
				font-size: 11px;
				font-weight: 700;
				color: var(--text-main);
			}

			/* Mobile-only hero CTA — hidden on desktop */
			.hero-mobile-cta {
				display: none;
			}

			/* Mini inline CTA */
			.mini-cta {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 24px;
				padding: 56px 24px;
			}

			.mini-cta p {
				font-size: clamp(22px, 3vw, 32px);
				color: var(--text-main);
				font-weight: 800;
				letter-spacing: -0.5px;
				line-height: 1.1;
			}

			.mini-cta p em {
				font-style: normal;
				color: var(--moss);
			}

			@keyframes miniFormPulse {
				0%,
				100% {
					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
					border-color: var(--sand-border);
				}
				50% {
					box-shadow:
						0 4px 16px rgba(0, 0, 0, 0.06),
						0 0 0 5px rgba(255, 107, 94, 0.1);
					border-color: rgba(255, 107, 94, 0.4);
				}
			}

			.mini-form {
				display: flex;
				gap: 8px;
				background: var(--white);
				border: 2px solid var(--sand-border);
				border-radius: 50px;
				padding: 6px 6px 6px 20px;
				width: 100%;
				max-width: 440px;
				animation: miniFormPulse 2.8s ease-in-out infinite;
				animation-delay: 1.4s;
				transition: border-color 0.2s;
			}
			.mini-form:focus-within {
				border-color: var(--moss-light);
			}
			.mini-form input {
				flex: 1;
				border: none;
				outline: none;
				background: transparent;
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 14px;
				color: var(--text-main);
			}
			.mini-form input::placeholder {
				color: var(--text-soft);
			}
			.mini-form button {
				background: var(--moss);
				color: white;
				border: none;
				cursor: pointer;
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 13px;
				font-weight: 600;
				padding: 10px 20px;
				border-radius: 40px;
				min-height: 44px;
				white-space: nowrap;
				flex-shrink: 0;
				transition: background 0.2s;
			}
			.mini-form button:hover {
				background: var(--moss-light);
			}

			/* ══════════════════════════════
			   GRAIN TEXTURE (dark backgrounds)
			══════════════════════════════ */
			.app-section-wrap,
			.built-card.featured,
			footer {
				position: relative;
			}

			.app-section-wrap::after,
			.built-card.featured::after,
			footer::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
				background-repeat: repeat;
				background-size: 200px 200px;
				opacity: 0.06;
				pointer-events: none;
				z-index: 0;
			}

			/* Ensure content inside dark sections sits above grain */
			.app-section-wrap > *,
			.built-card.featured > *,
			footer > * {
				position: relative;
				z-index: 1;
			}

			.floating-tab {
				position: fixed;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				writing-mode: vertical-rl;
				text-orientation: mixed;
				background: #ff6b5e;
				color: #fff;
				text-decoration: none;
				font-size: 13px;
				font-weight: 800;
				letter-spacing: 0.08em;
				padding: 22px 13px;
				border-radius: 16px 0 0 16px;
				z-index: 9999;
				box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
				transition:
					background 0.2s ease,
					padding 0.2s ease;
				white-space: nowrap;
				overflow: hidden;
			}
			.floating-tab::after {
				content: "";
				position: absolute;
				top: -80%;
				left: 0;
				width: 100%;
				height: 50%;
				background: linear-gradient(
					to bottom,
					transparent,
					rgba(255, 255, 255, 0.38),
					transparent
				);
				animation: tab-shine 2.8s ease-in-out infinite;
				pointer-events: none;
			}
			@keyframes tab-shine {
				0% {
					top: -80%;
				}
				100% {
					top: 180%;
				}
			}
			.floating-tab:hover {
				background: #e85a4e;
				padding: 26px 13px;
			}
			@media (max-width: 768px) {
				.floating-tab {
					display: none;
				}
			}

			/* ── Carbon badge ── */
			.footer-copy {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 12px;
			}
			.carbon-badge {
				display: inline-flex;
				align-items: center;
				gap: 7px;
				text-decoration: none;
				color: #8a8480;
				font-size: 12px;
				transition: color 0.2s;
			}
			.carbon-badge:hover { color: #c8c4c0; }
			.carbon-badge-grade {
				width: 22px;
				height: 22px;
				background: #6dbf67;
				border-radius: 50%;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
				font-size: 11px;
				line-height: 1;
				color: #1c1b18;
				flex-shrink: 0;
			}

			/* ── Language selector ── */
			.lang-select-wrap {
				display: flex;
				align-items: center;
				gap: 6px;
			}
			.lang-select-wrap svg { flex-shrink: 0; opacity: 0.5; }
			#lang-select {
				background: #1c1b18;
				border: 1px solid #3a3830;
				border-radius: 6px;
				color: #8a8480;
				font-size: 12px;
				font-family: inherit;
				padding: 3px 6px;
				cursor: pointer;
				transition: border-color 0.2s, color 0.2s;
				appearance: none;
				-webkit-appearance: none;
			}
			#lang-select:hover, #lang-select:focus {
				border-color: #8a8480;
				color: #c8c4c0;
				outline: none;
			}

			/* ── RTL overrides (Urdu) ── */
			html[dir="rtl"] nav,
			html[dir="rtl"] .footer-top,
			html[dir="rtl"] .footer-links { flex-direction: row-reverse; }
			html[dir="rtl"] .footer-copy { flex-direction: row-reverse; }
			html[dir="rtl"] body { font-family: 'Noto Nastaliq Urdu', serif; }
			html[dir="rtl"] * { letter-spacing: 0; }

/* ══ HOW IT WORKS ══ */
.hiw-section { padding: 64px 24px; background: #fff; }
.hiw-inner { max-width: 1040px; margin: 0 auto; }
.hiw-box {
	background: transparent;
	border-radius: 32px;
	padding: 56px 48px 52px;
}
.hiw-header { text-align: center; margin-bottom: 44px; }
.hiw-steps {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.hiw-step {
	background: #fff;
	border-radius: 20px;
	padding: 36px 24px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.hiw-step-badge {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #FF6B5E;
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	flex-shrink: 0;
}
.hiw-step-icon {
	width: 44px; height: 44px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	flex-shrink: 0;
}
.hiw-step h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; letter-spacing: -0.3px; line-height: 1.3; }
.hiw-step p { font-size: 14px; color: #666; line-height: 1.65; margin: 0; }
@media (max-width: 720px) {
	.hiw-box { padding: 36px 20px 32px; border-radius: 24px; }
	.hiw-steps { grid-template-columns: 1fr; gap: 12px; }
	.hiw-step { padding: 28px 20px; }
}