/* ===== Bootstrap 5.3.3 subset (inlined to eliminate CDN round-trip) ===== */
		*,
		::after,
		::before {
			box-sizing: border-box;
		}

		.container {
			--bs-gutter-x: 1.5rem;
			width: 100%;
			padding-right: calc(var(--bs-gutter-x) * .5);
			padding-left: calc(var(--bs-gutter-x) * .5);
			margin-right: auto;
			margin-left: auto;
		}

		@media (min-width: 576px) {
			.container {
				max-width: 540px;
			}
		}

		@media (min-width: 768px) {
			.container {
				max-width: 720px;
			}
		}

		@media (min-width: 992px) {
			.container {
				max-width: 960px;
			}
		}

		@media (min-width: 1200px) {
			.container {
				max-width: 1140px;
			}
		}

		@media (min-width: 1400px) {
			.container {
				max-width: 1320px;
			}
		}

		.row {
			--bs-gutter-x: 1.5rem;
			--bs-gutter-y: 0;
			display: flex;
			flex-wrap: wrap;
			margin-top: calc(-1 * var(--bs-gutter-y));
			margin-right: calc(-.5 * var(--bs-gutter-x));
			margin-left: calc(-.5 * var(--bs-gutter-x));
		}

		.row>* {
			flex-shrink: 0;
			width: 100%;
			max-width: 100%;
			padding-right: calc(var(--bs-gutter-x) * .5);
			padding-left: calc(var(--bs-gutter-x) * .5);
			margin-top: var(--bs-gutter-y);
		}

		.col-6 {
			flex: 0 0 auto;
			width: 50%;
		}

		@media (min-width: 768px) {
			.col-md-6 {
				flex: 0 0 auto;
				width: 50%;
			}
		}

		@media (min-width: 992px) {
			.col-lg-4 {
				flex: 0 0 auto;
				width: 33.333333%;
			}
		}

		.g-3 {
			--bs-gutter-x: 1rem;
			--bs-gutter-y: 1rem;
		}

		.g-4 {
			--bs-gutter-x: 1.5rem;
			--bs-gutter-y: 1.5rem;
		}

		.mt-2 {
			margin-top: 0.5rem !important;
		}

		.mt-3 {
			margin-top: 1rem !important;
		}

		.mt-4 {
			margin-top: 1.5rem !important;
		}

		.mb-1 {
			margin-bottom: 0.25rem !important;
		}

		.mb-2 {
			margin-bottom: 0.5rem !important;
		}

		.mb-3 {
			margin-bottom: 1rem !important;
		}

		.mb-4 {
			margin-bottom: 1.5rem !important;
		}

		.text-center {
			text-align: center !important;
		}

		.text-start {
			text-align: start !important;
		}

		.text-light {
			color: #f8f9fa !important;
		}

		.text-decoration-none {
			text-decoration: none !important;
		}

		.position-relative {
			position: relative !important;
		}

		.bg-dark {
			background-color: #212529 !important;
		}

		/* ===== Viewport toggle classes ===== */
		.d-only {
			display: none;
		}

		@media (min-width: 768px) {
			.m-only {
				display: none !important;
			}

			.d-only {
				display: block;
			}
		}

		/* ===== Base (mobile-first) ===== */
		html {
			scroll-behavior: smooth;
		}

		body {
			background-color: #0a0a0f;
			color: #f0f0f5;
			font-family: 'Space Grotesk', sans-serif;
			overflow-x: hidden;
			padding-bottom: 70px;
			/* Space for sticky CTA */
		}

		.hero {
			background: radial-gradient(circle at top left, #9a1aff, #13022e);
			padding: 1rem 1rem 2rem;
			text-align: center;
			position: relative;
			overflow: hidden;
		}

		.hero-logo-bg {
			position: absolute;
			top: 1rem;
			left: 1rem;
			opacity: 0.8;
			z-index: 0;
			pointer-events: none;
			user-select: none;
			transition: all 0.3s ease;
			width: 250px;
		}

		.hero-content {
			position: relative;
			z-index: 1;
			max-width: 800px;
			margin: 0 auto;
			padding-top: 0.5rem;
		}

		.hero h1 {
			font-family: 'Rubik Mono One', sans-serif;
			font-size: 1.5rem;
			font-weight: 900;
			letter-spacing: 0.5px;
			color: #ffffff;
			margin-top: 0;
			margin-bottom: 0.5rem;
			line-height: 1.3;
		}

		.hero p.hero-subtitle {
			font-size: 1.25rem;
			margin: 20px 0;
			color: #d1c9ff;
			animation: fadeInUp 1.2s ease-out forwards;
		}

		/* Mobile subtitle row (inline logo + text) */
		.subtitle-row {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			margin: 0.5rem 0 1rem;
		}

		.subtitle-row .logo-inline {
			width: 48px;
			height: auto;
			flex-shrink: 0;
		}

		.subtitle-row p.subtitle {
			font-size: 1rem;
			margin: 0;
			color: #d1c9ff;
			text-align: left;
		}

		/* Demo preview */
		.demo-preview {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;
			margin: 1rem 0;
			padding: 0 0.5rem;
		}

		.demo-preview .before-after {
			display: flex;
			align-items: center;
			gap: 0.25rem;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 12px;
			padding: 0.5rem;
		}

		.demo-preview img,
		.demo-preview video {
			width: 120px;
			height: 120px;
			object-fit: cover;
			border-radius: 8px;
		}

		.demo-preview .arrow {
			color: #c029ff;
			font-size: 1.5rem;
		}

		/* CTA button (mobile default) */
		.cta-btn {
			background: linear-gradient(135deg, #c029ff, #7f00ff);
			border: none;
			color: white;
			padding: 16px 32px;
			font-size: 1.2rem;
			font-weight: 600;
			border-radius: 12px;
			animation: pulse 2s infinite;
			box-shadow: 0 0 12px rgba(192, 41, 255, 0.6);
			transition: transform 0.2s ease;
			text-decoration: none;
			display: inline-block;
			width: 100%;
			max-width: 300px;
		}

		.cta-btn:hover {
			transform: scale(1.05);
			color: white;
		}

		.cta-subtext {
			font-size: 0.85rem;
			color: #b8a8d9;
			margin-top: 0.5rem;
		}

		/* Social proof */
		.social-proof {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1rem;
			margin: 1rem 0;
			font-size: 0.9rem;
			color: #d1c9ff;
		}

		.social-proof .stat {
			display: flex;
			align-items: center;
			gap: 0.25rem;
		}

		.social-proof .stat i {
			color: #ffc107;
		}

		/* Feature strip (mobile only) */
		.feature-strip {
			background: #ffd54f;
			padding: 0.75rem 0;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
		}

		.feature-strip::-webkit-scrollbar {
			display: none;
		}

		.feature-strip-inner {
			display: flex;
			gap: 0.75rem;
			padding: 0 1rem;
			min-width: max-content;
		}

		.feature-item {
			background: white;
			border-radius: 12px;
			padding: 0.5rem;
			min-width: 100px;
			text-align: center;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		.feature-item img {
			width: 80px;
			height: 80px;
			object-fit: cover;
			border-radius: 8px;
		}

		.feature-item p {
			font-size: 0.7rem;
			color: #333;
			margin: 0.25rem 0 0;
			font-weight: 500;
		}

		/* App Store secondary */
		.app-store-secondary {
			margin-top: 1.5rem;
			padding-top: 1rem;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		.app-store-secondary p {
			font-size: 0.85rem;
			color: #a89cc8;
			margin-bottom: 0.5rem;
		}

		.app-store-secondary img {
			height: 44px;
			opacity: 0.9;
		}

		/* Sticky mobile CTA */
		.sticky-cta {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(to top, #0a0a0f 80%, transparent);
			padding: 1rem;
			z-index: 1000;
			display: flex;
			justify-content: center;
		}

		.sticky-cta .cta-btn {
			padding: 14px 24px;
			font-size: 1rem;
			animation: none;
			max-width: none;
			width: auto;
		}

		.sticky-cta.hidden {
			transform: translateY(100%);
			transition: transform 0.3s ease;
		}

		.sticky-cta.visible {
			transform: translateY(0);
			transition: transform 0.3s ease;
		}

		/* Sections */
		.section {
			padding: 40px 16px;
			text-align: center;
		}

		.example-img {
			width: 100%;
			max-width: 200px;
			object-fit: cover;
			border-radius: 12px;
			margin-bottom: 0.5rem;
			box-shadow: 0 0 20px rgba(144, 64, 255, 0.3);
			transition: transform 0.3s ease;
		}

		.example-img:hover {
			transform: scale(1.03);
		}

		.iphone-screenshots {
			width: 100%;
			max-width: 400px;
			object-fit: cover;
			border-radius: 18px;
			margin: 1rem 0;
		}

		.pricing-card {
			background: linear-gradient(135deg, #1e0033, #29004a);
			padding: 16px;
			border-radius: 12px;
			color: #e6dbff;
			margin-bottom: 16px;
			box-shadow: 0 0 20px rgba(160, 64, 255, 0.3);
		}

		/* Mobile compact examples grid */
		.examples-compact {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
			padding: 0 0.5rem;
		}

		.example-pair {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.example-pair .example-img {
			max-width: 100%;
			height: auto;
			aspect-ratio: 1;
		}

		.example-pair p {
			font-size: 0.8rem;
			margin-top: 0.5rem;
		}

		/* Desktop demo examples */
		.demo-examples {
			display: flex;
			justify-content: center;
			gap: 2.5rem;
			flex-wrap: wrap;
			margin: 2rem 0;
		}

		.demo-example {
			text-align: center;
		}

		.demo-example .demo-preview {
			margin: 0;
		}

		.demo-prompt {
			margin-top: 0.75rem;
			font-size: 1rem;
			color: #d1c9ff;
			max-width: 200px;
		}

		/* Magic section / How it works */
		.magic-section {
			background-color: #1a1a2e;
			color: white;
			padding: 1.5rem 1rem;
			border-radius: 1rem;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			max-width: 600px;
			margin: 1.5rem auto;
			text-align: center;
			font-size: 1rem;
			line-height: 1.5;
		}

		.how-it-works-wrapper {
			display: flex;
			justify-content: center;
			padding: 1rem;
		}

		.how-it-works {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			list-style: decimal inside;
			max-width: 700px;
			text-align: left;
		}

		/* Testimonials */
		.testimonials {
			background-color: #1a1a2e;
			color: white;
			padding: 2rem 1rem;
			text-align: center;
		}

		.testimonials h2 {
			font-size: 1.5rem;
			margin-bottom: 1.5rem;
		}

		.testimonial-list {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			max-width: 900px;
			margin: 0 auto;
		}

		.testimonial-list blockquote {
			background-color: #2e2e48;
			padding: 1rem;
			border-radius: 1rem;
			font-style: italic;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
			font-size: 0.95rem;
		}

		.testimonial-list footer {
			margin-top: 0.75rem;
			font-weight: bold;
			color: #a0aec0;
			font-style: normal;
			padding: 0;
		}

		/* Mobile use case cards */
		.card-preview-m {
			display: flex;
			align-items: center;
			gap: 0.3rem;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 6px;
			padding: 0.3rem;
			margin-bottom: 0.5rem;
		}

		.card-preview-m img,
		.card-preview-m video {
			width: 50px;
			height: 50px;
			object-fit: cover;
			border-radius: 4px;
		}

		.card-preview-m .arrow {
			font-size: 0.7rem;
		}

		.use-case-card-m {
			padding: 10px;
			border-radius: 12px;
			text-align: center;
		}

		.use-case-card-m h5 {
			font-size: 0.85rem;
			margin-bottom: 0.4rem;
		}

		.use-case-card-m.valentine {
			background: linear-gradient(135deg, #450a0a, #6b1010);
		}

		.use-case-card-m.valentine h5 {
			color: #e63946;
		}

		.use-case-card-m.valentine .arrow {
			color: #e63946;
		}

		.use-case-card-m.ancestor {
			background: linear-gradient(135deg, #1a1208, #2d2010);
		}

		.use-case-card-m.ancestor h5 {
			color: #8b7355;
		}

		.use-case-card-m.ancestor .arrow {
			color: #8b7355;
		}

		.use-case-card-m.social {
			background: linear-gradient(135deg, #2d0a2e, #4a0e4e);
		}

		.use-case-card-m.social h5 {
			color: #ff6b9d;
		}

		.use-case-card-m.social .arrow {
			color: #ff6b9d;
		}

		.use-case-card-m.pet {
			background: linear-gradient(135deg, #2a1a10, #3d2010);
		}

		.use-case-card-m.pet h5 {
			color: #ff6b35;
		}

		.use-case-card-m.pet .arrow {
			color: #ff6b35;
		}

		.use-case-card-m.wedding {
			background: linear-gradient(135deg, #2e0515, #4a0a25);
		}

		.use-case-card-m.wedding h5 {
			color: #e8a4b8;
		}

		.use-case-card-m.wedding .arrow {
			color: #e8a4b8;
		}

		.use-case-card-m.memorial {
			background: linear-gradient(135deg, #1e1033, #29004a);
		}

		.use-case-card-m.memorial h5 {
			color: #8b5cf6;
		}

		.use-case-card-m.memorial .arrow {
			color: #8b5cf6;
		}

		.use-case-card-m.faith {
			background: linear-gradient(135deg, #2e1a05, #4a2c0a);
		}

		.use-case-card-m.faith h5 {
			color: #d4a853;
		}

		.use-case-card-m.faith .arrow {
			color: #d4a853;
		}

		/* Desktop use case cards */
		.use-case-card {
			background: rgba(0, 0, 0, 0.4);
			border-radius: 16px;
			padding: 1rem;
			transition: transform 0.3s ease;
			cursor: pointer;
			text-align: center;
		}

		.use-case-card:hover {
			transform: scale(1.03);
		}

		.use-case-card h5 {
			margin-bottom: 0.75rem;
		}

		.card-preview {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 12px;
			padding: 0.75rem;
			margin-bottom: 0.75rem;
		}

		.card-preview img,
		.card-preview video {
			width: 90px;
			height: 90px;
			object-fit: cover;
			border-radius: 8px;
		}

		.card-preview .arrow {
			font-size: 1rem;
		}

		.card-desc {
			font-size: 0.85rem;
			color: #a0a0a0;
			margin-bottom: 0.5rem;
		}

		.card-cta {
			font-size: 0.85rem;
			font-weight: 500;
		}

		.use-case-card.valentine {
			background: linear-gradient(135deg, #450a0a, #6b1010);
		}

		.use-case-card.valentine h5,
		.use-case-card.valentine .card-cta {
			color: #e63946;
		}

		.use-case-card.valentine .arrow {
			color: #e63946;
		}

		.use-case-card.ancestor {
			background: linear-gradient(135deg, #1a1208, #2d2010);
		}

		.use-case-card.ancestor h5,
		.use-case-card.ancestor .card-cta {
			color: #8b7355;
		}

		.use-case-card.ancestor .arrow {
			color: #8b7355;
		}

		.use-case-card.social {
			background: linear-gradient(135deg, #2d0a2e, #4a0e4e);
		}

		.use-case-card.social h5,
		.use-case-card.social .card-cta {
			color: #ff6b9d;
		}

		.use-case-card.social .arrow {
			color: #ff6b9d;
		}

		.use-case-card.pet {
			background: linear-gradient(135deg, #2a1a10, #3d2010);
		}

		.use-case-card.pet h5,
		.use-case-card.pet .card-cta {
			color: #ff6b35;
		}

		.use-case-card.pet .arrow {
			color: #ff6b35;
		}

		.use-case-card.wedding {
			background: linear-gradient(135deg, #2e0515, #4a0a25);
		}

		.use-case-card.wedding h5,
		.use-case-card.wedding .card-cta {
			color: #e8a4b8;
		}

		.use-case-card.wedding .arrow {
			color: #e8a4b8;
		}

		.use-case-card.memorial {
			background: linear-gradient(135deg, #1e1033, #29004a);
		}

		.use-case-card.memorial h5,
		.use-case-card.memorial .card-cta {
			color: #8b5cf6;
		}

		.use-case-card.memorial .arrow {
			color: #8b5cf6;
		}

		.use-case-card.faith {
			background: linear-gradient(135deg, #2e1a05, #4a2c0a);
		}

		.use-case-card.faith h5,
		.use-case-card.faith .card-cta {
			color: #d4a853;
		}

		.use-case-card.faith .arrow {
			color: #d4a853;
		}

		/* Footer (mobile default: 2-column grid) */
		footer {
			background-color: #0a0a0f;
			border-top: 1px solid #222;
			padding: 2rem 1.5rem;
			font-size: 0.85rem;
			color: #888;
		}

		.footer-col h4 {
			color: #ccc;
			font-size: 0.8rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			margin-bottom: 0.5rem;
		}

		.footer-col a {
			color: #999;
			text-decoration: none;
			display: block;
			padding: 0.15rem 0;
			font-size: 0.8rem;
		}

		.footer-col a:hover {
			color: #fff;
		}

		.footer-grid-m {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1.5rem;
			margin-bottom: 1.5rem;
			text-align: left;
		}

		.footer-grid-d {
			display: flex;
			justify-content: center;
			gap: 4rem;
			max-width: 900px;
			margin: 0 auto 2rem;
			text-align: left;
		}

		.footer-bottom {
			text-align: center;
			padding-top: 1rem;
			border-top: 1px solid #1a1a1a;
			font-size: 0.75rem;
		}

		.footer-bottom a {
			color: #888;
			text-decoration: none;
			margin: 0 0.25rem;
		}

		.footer-bottom a:hover {
			color: #fff;
		}

		footer a:hover {
			color: #fff;
		}

		/* Animations */
		@keyframes pulse {
			0% {
				box-shadow: 0 0 12px rgba(192, 41, 255, 0.6);
			}

			50% {
				box-shadow: 0 0 24px rgba(192, 41, 255, 0.9);
			}

			100% {
				box-shadow: 0 0 12px rgba(192, 41, 255, 0.6);
			}
		}

		@keyframes fadeInUp {
			0% {
				opacity: 0;
				transform: translateY(20px);
			}

			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}

		h5 {
			color: rgb(23, 192, 23)
		}

		.brand {
			font-family: Pacifico, cursive;
			font-size: 32px;
			font-weight: 600;
			letter-spacing: -0.3px;
		}

		.brand-s {
			font-size: 10px;
			font-weight: 700;
			text-transform: uppercase;
			color: var(--text-primary);
			font-family: var(--font-primary);
		}

		/* ===== Desktop overrides (>=768px) ===== */
		@media (min-width: 768px) {
			body {
				padding-bottom: 0;
			}

			.hero {
				padding: 4rem 1rem;
			}

			.hero h1 {
				font-size: 2.5rem;
				letter-spacing: 1px;
				animation: fadeInUp 1s ease-out forwards;
			}

			.hero-content {
				padding-top: 0.2rem;
			}

			.demo-preview {
				gap: 1rem;
				margin: 1.5rem 0;
				padding: 0 1rem;
			}

			.demo-preview .before-after {
				gap: 0.5rem;
				border-radius: 16px;
				padding: 0.75rem;
			}

			.demo-preview img,
			.demo-preview video {
				width: 180px;
				height: 270px;
				border-radius: 12px;
			}

			.demo-preview .arrow {
				font-size: 2rem;
			}

			.cta-btn {
				padding: 14px 28px;
				font-size: 1.1rem;
				border-radius: 10px;
				width: auto;
				max-width: none;
			}

			.cta-btn:hover {
				transform: scale(1.1);
			}

			.cta-subtext {
				font-size: 0.95rem;
				margin-top: 0.75rem;
			}

			.social-proof {
				gap: 1.5rem;
				margin: 1.5rem 0;
				font-size: 1rem;
			}

			.social-proof .stat {
				gap: 0.3rem;
			}

			.app-store-secondary {
				margin-top: 2rem;
				padding-top: 1.5rem;
			}

			.app-store-secondary p {
				font-size: 0.95rem;
				margin-bottom: 0.75rem;
			}

			.app-store-secondary img {
				height: 48px;
			}

			.section {
				padding: 60px 20px;
			}

			.example-img {
				max-width: 240px;
				margin-bottom: 1rem;
			}

			.iphone-screenshots {
				max-width: 500px;
			}

			.pricing-card {
				padding: 20px;
				margin-bottom: 20px;
				transition: transform 0.3s ease;
				cursor: pointer;
			}

			.pricing-card:hover {
				transform: scale(1.05);
			}

			.magic-section {
				padding: 2rem 1.5rem;
				margin: 2rem auto;
				font-size: 1.1rem;
				line-height: 1.6;
			}

			.testimonials {
				padding: 3rem 1.5rem;
			}

			.testimonials h2 {
				font-size: 1.75rem;
				margin-bottom: 2rem;
			}

			.testimonial-list {
				flex-direction: row;
				justify-content: space-between;
				gap: 1.5rem;
			}

			.testimonial-list blockquote {
				width: 30%;
				padding: 1.5rem;
			}

			.sticky-cta {
				display: none;
			}

			footer {
				padding: 3rem 2rem 2rem;
				font-size: 0.9rem;
			}

			.footer-col h4 {
				font-size: 0.85rem;
				margin-bottom: 0.75rem;
			}

			.footer-col a {
				padding: 0.2rem 0;
				font-size: 0.85rem;
			}

			.footer-bottom {
				padding-top: 1.5rem;
				font-size: 0.8rem;
			}

			.footer-bottom a {
				margin: 0 0.5rem;
			}
		}