/*--------------------------------------------------------------
# Eroticorp Brand Styles
# Single-page experience for the L.O.V.E. Bot product site
--------------------------------------------------------------*/

@font-face {
	font-family: 'BTTF';
	src: url('../fonts/BTTF.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--brand-maroon: #7B1B1B;
	--brand-maroon-dark: #5C1414;
	--brand-coral: #D94F4F;
	--brand-coral-light: #E87878;
	--brand-cream: #FBF4EC;
	--brand-cream-dark: #F2E6D5;
	--brand-ink: #2A1414;
	--brand-muted: #6B5454;
	--brand-gold: #C9A24B;
	--shadow-soft: 0 10px 40px rgba(123, 27, 27, 0.15);
	--shadow-strong: 0 20px 60px rgba(123, 27, 27, 0.3);
	--font-display: 'Audiowide', 'Cooper Black', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset / base overrides ---------- */
html {
	/* Offset anchor scrolling so sections clear the sticky header */
	scroll-padding-top: 110px;
}
body {
	background: var(--brand-cream);
	color: var(--brand-ink);
	font-family: var(--font-body);
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--brand-maroon);
	text-decoration: none;
	transition: color 0.2s ease;
}
a:visited { color: var(--brand-maroon); }
a:hover, a:focus { color: var(--brand-coral); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--brand-maroon);
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }

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

button { font-family: inherit; cursor: pointer; }

/* ---------- Header ---------- */
.site-header {
background: var(--brand-cream);
    border-bottom: 2px solid var(--brand-maroon);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(123, 27, 27, 0.08);
    flex-direction: row;
}
.site-branding { display: flex; align-items: center; }
.site-branding img,
.site-branding .custom-logo {
	max-height: 56px;
	width: auto;
}
.site-title, .site-description { display: none; }

.main-navigation ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	flex-direction: row;
    justify-content: center;
	position: relative;
}
.main-navigation a {
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-maroon);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.menu-underline {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--brand-coral);
	border-radius: 2px;
	pointer-events: none;
	opacity: 0;
	transition:
		left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease;
}
.menu-underline.is-visible { opacity: 1; }
@media (max-width: 640px) {
	.menu-underline { display: none; }
}
.menu-toggle {
	background: var(--brand-maroon);
	color: var(--brand-cream);
	border: none;
	border-radius: 4px;
	padding: 8px 14px;
	font-weight: 600;
	display: none;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	background: var(--brand-maroon);
	color: var(--brand-cream) !important;
	border: none;
	border-radius: 6px;
	padding: 16px 32px;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
	box-shadow: var(--shadow-soft);
	text-decoration: none;
}
.btn:hover {
	background: var(--brand-coral);
	transform: translateY(-2px);
	box-shadow: var(--shadow-strong);
	color: var(--brand-cream) !important;
}
.btn-large { padding: 22px 48px; font-size: 1.15rem; }
.btn-ghost {
	background: transparent;
	color: var(--brand-maroon) !important;
	border: 2px solid var(--brand-maroon);
	box-shadow: none;
}
.btn-ghost:hover {
	background: var(--brand-maroon);
	color: var(--brand-cream) !important;
}

/* ---------- Hero ---------- */
.hero {
	background:
		radial-gradient(ellipse at 70% 30%, rgba(217, 79, 79, 0.18), transparent 60%),
		linear-gradient(180deg, var(--brand-cream) 0%, var(--brand-cream-dark) 100%);
	padding: 100px 32px 120px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero-inner {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.hero-eyebrow {
	display: inline-block;
	background: var(--brand-maroon);
	color: var(--brand-cream);
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 24px;
}
.hero h1 {
	font-size: clamp(2.6rem, 6vw, 5rem);
	margin-bottom: 0.3em;
}
.hero h1 .accent { color: var(--brand-coral); font-style: italic; }
.hero-subtitle {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	color: var(--brand-muted);
	max-width: 720px;
	margin: 0 auto 40px;
	line-height: 1.5;
}
.hero-cta-group {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.hero-trust {
	margin-top: 40px;
	font-size: 0.85rem;
	color: var(--brand-muted);
	letter-spacing: 0.05em;
}
.hero-trust strong { color: var(--brand-maroon); }

/* ---------- Section base ---------- */
.section {
	padding: 96px 32px;
}
.section-inner {
	max-width: 1100px;
	margin: 0 auto;
}
.section-eyebrow {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-coral);
	margin-bottom: 12px;
	text-align: center;
}
.section-title {
	text-align: center;
	margin-bottom: 16px;
}
.section-lede {
	text-align: center;
	font-size: 1.15rem;
	color: var(--brand-muted);
	max-width: 680px;
	margin: 0 auto 64px;
}

.product-content .section-eyebrow {
	text-align: left;
} 

/* ---------- Features grid ---------- */
.features {
	background: var(--brand-cream);
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
}
.feature-card {
	background: #fff;
	border: 1px solid var(--brand-cream-dark);
	border-radius: 14px;
	padding: 36px 28px;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
}
.feature-icon {
	font-size: 2.2rem;
	margin-bottom: 16px;
	display: block;
}
.feature-card h3 {
	font-size: 1.2rem;
	margin-bottom: 10px;
}
.feature-card p {
	color: var(--brand-muted);
	font-size: 0.95rem;
	margin: 0;
}

.features-more {
	text-align: center;
	margin: 40px auto 0;
	font-style: italic;
	color: var(--brand-muted);
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

/* Add-ons divider */
.addons-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--brand-cream-dark) 20%, var(--brand-cream-dark) 80%, transparent);
	margin: 80px 0 56px;
}

/* Add-on card variant */
.addon-card {
	position: relative;
}
.addon-price {
	display: none;
}
.addon-card sup {
	color: var(--brand-coral);
	font-size: 0.7rem;
	margin-left: 1px;
}

/* ---------- Product / Order section ---------- */
.product {
	background: linear-gradient(180deg, var(--brand-cream-dark) 0%, var(--brand-cream) 100%);
}
.product-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.product-gallery {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.product-gallery-stage {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--brand-maroon);
	box-shadow: var(--shadow-strong);
}
.product-gallery-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.product-gallery-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.product-gallery-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.product-gallery-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 28px 24px;
	color: var(--brand-cream);
	background: linear-gradient(to top, rgba(42, 20, 20, 0.92) 0%, rgba(42, 20, 20, 0.5) 60%, transparent 100%);
}
.product-gallery-caption .label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	opacity: 0.85;
	margin-bottom: 6px;
}
.product-gallery-caption h3 {
	font-family: var(--font-display);
	color: var(--brand-cream);
	font-size: 2.2rem;
	margin: 0 0 6px;
	line-height: 1;
}
.product-gallery-caption .tagline {
	font-style: italic;
	opacity: 0.9;
	margin: 0;
	font-size: 0.95rem;
}

.product-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 12px;
}
.product-gallery-thumb {
	padding: 0;
	background: transparent;
	border: 3px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	transition: border-color 0.2s ease, transform 0.15s ease;
}
.product-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.85);
	transition: filter 0.2s ease;
}
.product-gallery-thumb:hover { transform: translateY(-2px); }
.product-gallery-thumb:hover img { filter: saturate(1); }
.product-gallery-thumb.is-active {
	border-color: var(--brand-coral);
}
.product-gallery-thumb.is-active img { filter: saturate(1); }
.product-content h2 { margin-bottom: 24px; }
.product-content .price {
	font-family: var(--font-display);
	font-size: 3rem;
	color: var(--brand-coral);
	font-weight: 700;
	margin: 16px 0 8px;
}
.product-content .price-note {
	color: var(--brand-muted);
	font-size: 0.9rem;
	margin-bottom: 28px;
}
.product-list {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
}
.product-list li {
	padding: 10px 0 10px 28px;
	position: relative;
	border-bottom: 1px solid rgba(123, 27, 27, 0.12);
}
.product-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--brand-coral);
	font-weight: 700;
}

/* ---------- Quantity selector ---------- */
.order-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.qty-control {
	display: inline-flex;
	border: 2px solid var(--brand-maroon);
	border-radius: 6px;
	overflow: hidden;
}
.qty-btn {
	background: var(--brand-cream);
	color: var(--brand-maroon);
	border: none;
	width: 44px;
	height: 48px;
	font-size: 1.4rem;
	font-weight: 700;
}
.qty-btn:hover { background: var(--brand-maroon); color: var(--brand-cream); }
.qty-input {
	width: 60px;
	text-align: center;
	border: none;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--brand-maroon);
	background: #fff;
	-moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Disclaimer / fine print ---------- */
.disclaimer {
	background: var(--brand-maroon);
	color: var(--brand-cream);
	padding: 56px 32px;
	text-align: center;
}
.disclaimer-inner { max-width: 900px; margin: 0 auto; }
.disclaimer h3 {
	color: var(--brand-cream);
	font-size: 1.6rem;
	margin-bottom: 12px;
}
.disclaimer p {
	font-size: 0.95rem;
	opacity: 0.9;
	margin: 0;
	line-height: 1.6;
}
.disclaimer .small {
	display: block;
	margin-top: 18px;
	font-size: 0.75rem;
	opacity: 0.7;
	letter-spacing: 0.05em;
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--brand-cream); }
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}
.testimonial {
	background: #fff;
	border-radius: 14px;
	padding: 32px;
	border-left: 4px solid var(--brand-coral);
	box-shadow: 0 4px 20px rgba(123, 27, 27, 0.06);
}
.testimonial blockquote {
	margin: 0 0 18px;
	font-style: italic;
	color: var(--brand-ink);
	font-size: 1.05rem;
	line-height: 1.5;
}
.testimonial cite {
	font-style: normal;
	font-weight: 700;
	color: var(--brand-maroon);
	font-size: 0.9rem;
}
.testimonial .stars { color: var(--brand-gold); margin-bottom: 12px; letter-spacing: 2px; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--brand-maroon-dark);
	color: var(--brand-cream);
	padding: 56px 32px 28px;
}
.site-footer a { color: var(--brand-cream); }
.site-footer a:hover { color: var(--brand-coral-light); }
.footer-grid {
	max-width: 1100px;
	margin: 0 auto 32px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
}
.footer-grid h4 {
	color: var(--brand-cream);
	font-family: var(--font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 6px 0; font-size: 0.95rem; }
.footer-tagline {
	font-size: 0.95rem;
	opacity: 0.85;
	max-width: 320px;
	line-height: 1.6;
}
.footer-bottom {
	max-width: 1100px;
	margin: 0 auto;
	border-top: 1px solid rgba(251, 244, 236, 0.15);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.8rem;
	opacity: 0.7;
}

/* ---------- Quiz Modal ---------- */
.quiz-modal {
	position: fixed;
	inset: 0;
	background: rgba(42, 20, 20, 0.85);
	backdrop-filter: blur(6px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
	animation: fadeIn 0.2s ease;
}
.quiz-modal.is-open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.quiz-dialog {
	background: var(--brand-cream);
	border-radius: 20px;
	width: 100%;
	max-width: 960px;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	position: relative;
	animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.quiz-header {
	background: var(--brand-maroon);
	color: var(--brand-cream);
	padding: 10px 42px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.quiz-header h3 {
	color: var(--brand-cream);
	font-family: var(--font-body);
	margin: 0;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}
.quiz-close {
	background: transparent;
	border: none;
	color: var(--brand-cream);
	font-size: 2.4rem;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 6px;
	transition: background 0.15s;
}
.quiz-close:hover { background: rgba(251, 244, 236, 0.15); }

.quiz-progress {
	height: 9px;
	background: var(--brand-cream-dark);
	overflow: hidden;
}
.quiz-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--brand-coral), var(--brand-maroon));
	width: 0%;
	transition: width 0.3s ease;
}

.quiz-body {
	padding: 0 48px 48px;
	overflow-y: auto;
	flex: 1;
}
.quiz-counter {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--brand-muted);
	font-weight: 700;
	margin-bottom: 21px;
}
.quiz-question {
	font-family: var(--font-display);
	color: var(--brand-maroon);
	font-size: 2.55rem;
	line-height: 1.25;
	margin-bottom: 42px;
}
.quiz-options {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.quiz-option {
	background: #fff;
	border: 3px solid var(--brand-cream-dark);
	color: var(--brand-ink);
	padding: 24px 30px;
	border-radius: 14px;
	text-align: left;
	font-size: 1.5rem;
	font-weight: 500;
	transition: all 0.15s ease;
	font-family: inherit;
}
.quiz-option:hover {
	border-color: var(--brand-coral);
	background: var(--brand-cream);
	transform: translateX(6px);
}
.quiz-textarea {
	width: 100%;
	min-height: 180px;
	border: 3px solid var(--brand-cream-dark);
	border-radius: 14px;
	padding: 21px 24px;
	font-family: inherit;
	font-size: 1.5rem;
	resize: vertical;
}
.quiz-textarea:focus { outline: none; border-color: var(--brand-coral); }
.quiz-helper {
	font-size: 1.25rem;
	color: var(--brand-muted);
	margin-top: 12px;
}
.quiz-actions {
	display: flex;
	gap: 18px;
	justify-content: flex-end;
	margin-top: 30px;
}

/* Quiz modal scales up the shared .btn for visual punch on screen */
.quiz-modal .btn {
	padding: 24px 48px;
	font-size: 1.5rem;
}
.quiz-modal .btn.btn-large {
	padding: 30px 60px;
	font-size: 1.7rem;
}

/* Completion screen */
.quiz-complete {
	text-align: center;
	/* padding: 18px 0 6px; */
}
.quiz-complete .badge {
	display: inline-block;
	background: var(--brand-coral);
	color: #fff;
	padding: 9px 21px;
	border-radius: 999px;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 21px;
}
.quiz-complete h2 {
	font-size: 2.7rem;
	margin-bottom: 12px;
}
.quiz-complete p {
	color: var(--brand-muted);
	font-size: 1.5rem;
	margin-bottom: 30px;
	max-width: 690px;
	margin-left: auto;
	margin-right: auto;
}

.bot-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 21px;
	margin-bottom: 12px;
}
.bot-preview-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	align-items: flex-start;
}
.bot-preview-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.bot-preview-frame {
	width: 300px;
	height: 360px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--brand-maroon);
	box-shadow: 0 18px 45px rgba(123, 27, 27, 0.28);
	border: 4px solid var(--brand-cream-dark);
	transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
	position: relative;
}
/* Multi-bot mode shrinks frames so up to 5 fit comfortably in the dialog */
.bot-preview.is-multi .bot-preview-frame {
	width: 150px;
	height: 190px;
	border-radius: 12px;
	border-width: 3px;
}

.bot-randomize-mini {
	background: transparent;
	border: 2px solid var(--brand-maroon);
	color: var(--brand-maroon);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease, color 0.15s ease;
}
.bot-randomize-mini:hover {
	background: var(--brand-maroon);
	color: var(--brand-cream);
}
.bot-randomize-mini:disabled {
	opacity: 0.5;
	cursor: wait;
}

/* Overflow indicator: "+N more" pill */
.bot-overflow {
	align-self: center;
	background: var(--brand-coral);
	color: #fff;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.04em;
	box-shadow: 0 6px 20px rgba(217, 79, 79, 0.3);
	white-space: nowrap;
	margin: auto 0;
}
.bot-preview-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	visibility: hidden;
}
.bot-preview-img.is-active {
	visibility: visible;
}
.bot-preview-frame.is-cycling {
	border-color: var(--brand-coral-light);
	box-shadow:
		0 12px 30px rgba(123, 27, 27, 0.25),
		0 0 0 6px rgba(217, 79, 79, 0.18);
}
.bot-preview-frame.is-locked {
	border-color: var(--brand-coral);
	transform: scale(1.04);
	box-shadow:
		0 16px 40px rgba(123, 27, 27, 0.35),
		0 0 0 6px rgba(217, 79, 79, 0.25);
}
.bot-randomize,
.play-god-btn {
	font-size: 1.25rem !important;
	padding: 15px 30px !important;
}
.bot-randomize:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- Order processing (between Place Order and confirmation) ---------- */
.order-processing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 42px;
	padding: 48px 0 24px;
	min-height: 420px;
	justify-content: center;
}
.processing-emblem {
	position: relative;
	width: 165px;
	height: 165px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.emblem-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 5px solid rgba(217, 79, 79, 0.2);
	border-top-color: var(--brand-coral);
	animation: emblem-spin 1.2s linear infinite;
}
.emblem-ring-2 {
	inset: 18px;
	border-color: rgba(123, 27, 27, 0.15);
	border-bottom-color: var(--brand-maroon);
	animation: emblem-spin 1.6s linear infinite reverse;
}
.emblem-heart {
	font-size: 3rem;
	color: var(--brand-coral);
	animation: emblem-pulse 1s ease-in-out infinite;
	line-height: 1;
}
@keyframes emblem-spin { to { transform: rotate(360deg); } }
@keyframes emblem-pulse {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50% { transform: scale(1.18); opacity: 1; }
}
.processing-status {
	min-height: 1.6em;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--brand-maroon);
	letter-spacing: 0.02em;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.processing-status.is-shown {
	opacity: 1;
	transform: translateY(0);
}
.processing-bar {
	width: 80%;
	max-width: 540px;
	height: 9px;
	background: var(--brand-cream-dark);
	border-radius: 999px;
	overflow: hidden;
}
.processing-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--brand-coral), var(--brand-maroon));
	border-radius: inherit;
	transition: width 0.5s cubic-bezier(0.5, 0, 0.5, 1);
}

/* ---------- Heart burst (radial particle explosion) ---------- */
.heart-burst {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 50;
	overflow: hidden;
}
.heart {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	margin-top: -12px;
	font-size: 1.4rem;
	line-height: 1;
	transform-origin: center;
	animation: heart-fly 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay, 0s) forwards;
	will-change: transform, opacity;
}
@keyframes heart-fly {
	0% {
		transform: rotate(var(--angle)) translateY(0) scale(0);
		opacity: 0;
	}
	15% {
		opacity: 1;
		transform: rotate(var(--angle)) translateY(-10px) scale(var(--scale));
	}
	100% {
		transform: rotate(var(--angle)) translateY(calc(-1 * var(--distance))) scale(0.4);
		opacity: 0;
	}
}

/* ---------- White-flash overlay on the dialog at the moment of reveal ---------- */
.dialog-flash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95), rgba(251, 244, 236, 0.4) 60%, transparent 100%);
	z-index: 40;
	animation: dialog-flash 0.7s ease-out forwards;
}
@keyframes dialog-flash {
	0% { opacity: 0; }
	20% { opacity: 1; }
	100% { opacity: 0; }
}

/* ---------- Order confirmation (final screen after Place Order) ---------- */
.order-confirmation {
	text-align: center;
	padding: 18px 0 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.order-logo {
	width: 330px;
	max-width: 80%;
	height: auto;
	display: block;
}
.order-portraits {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
.order-portrait {
	width: 270px;
	height: 330px;
	border-radius: 20px;
	overflow: hidden;
	border: 4px solid var(--brand-coral);
	box-shadow: 0 24px 60px rgba(123, 27, 27, 0.32);
	background: var(--brand-maroon);
}
.order-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Multi-portrait mode shrinks each portrait so the lineup fits */
.order-portraits.is-multi .order-portrait {
	width: 130px;
	height: 160px;
	border-radius: 12px;
	border-width: 3px;
	box-shadow: 0 12px 30px rgba(123, 27, 27, 0.28);
}
.order-confirmation h2 {
	font-size: 3rem;
	margin: 6px 0 0;
}
.order-message {
	color: var(--brand-ink);
	font-size: 1.7rem;
	margin: 0;
}
/* Staggered reveal animations for the confirmation screen */
.is-revealing .reveal-1,
.is-revealing .reveal-2,
.is-revealing .reveal-3,
.is-revealing .reveal-4,
.is-revealing .reveal-5 {
	opacity: 0;
	animation: reveal-in 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.is-revealing .reveal-1 { animation-delay: 0.05s; transform: scale(0.6); }
.is-revealing .reveal-2 { animation-delay: 0.35s; transform: scale(0.85); }
.is-revealing .reveal-3 { animation-delay: 0.7s; transform: translateY(-12px); }
.is-revealing .reveal-4 { animation-delay: 0.95s; transform: translateY(-8px); }
.is-revealing .reveal-5 { animation-delay: 1.25s; transform: translateY(-4px); }
@keyframes reveal-in {
	from { opacity: 0; }
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Bot portrait: reveal-in first, then ongoing soft glow pulse.
   Both animations declared together so neither clobbers the other. */
.is-revealing .order-portrait {
	animation:
		reveal-in 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) 0.35s forwards,
		portrait-glow 2.4s ease-in-out 1.4s infinite;
}
@keyframes portrait-glow {
	0%, 100% { box-shadow: 0 16px 40px rgba(123, 27, 27, 0.3), 0 0 0 0 rgba(217, 79, 79, 0); }
	50% { box-shadow: 0 16px 40px rgba(123, 27, 27, 0.3), 0 0 0 12px rgba(217, 79, 79, 0.15); }
}

/* ---------- Cloud Access section ---------- */
.cloud {
	background: linear-gradient(180deg, var(--brand-cream) 0%, var(--brand-cream-dark) 100%);
}
.cloud-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 56px;
	align-items: stretch;
}
.cloud-tier {
	background: #fff;
	border: 1px solid var(--brand-cream-dark);
	border-radius: 16px;
	padding: 36px 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cloud-tier:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-soft);
}
.cloud-tier.is-featured {
	border: 2px solid var(--brand-coral);
	transform: translateY(-12px);
	box-shadow: 0 14px 50px rgba(123, 27, 27, 0.18);
	z-index: 1;
}
.cloud-tier.is-featured:hover {
	transform: translateY(-15px);
}
.cloud-tier.is-premium {
	background: linear-gradient(160deg, var(--brand-maroon) 0%, var(--brand-maroon-dark) 100%);
	color: var(--brand-cream);
	border: none;
}
.cloud-tier.is-premium .cloud-eyebrow,
.cloud-tier.is-premium .cloud-features li,
.cloud-tier.is-premium .cloud-price-note,
.cloud-tier.is-premium h3 {
	color: var(--brand-cream);
}
.cloud-tier.is-premium .cloud-price {
	color: var(--brand-gold);
}
.cloud-tier.is-premium .cloud-features li::before {
	color: var(--brand-gold);
}
.cloud-tier.is-premium sup {
	color: var(--brand-gold);
	font-size: 0.6rem;
	margin-left: 2px;
}

.cloud-ribbon {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--brand-coral);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(217, 79, 79, 0.35);
	white-space: nowrap;
}

.cloud-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-bottom: 1px dashed var(--brand-cream-dark);
	padding-bottom: 16px;
}
.cloud-tier.is-premium .cloud-head {
	border-bottom-color: rgba(251, 244, 236, 0.18);
}
.cloud-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--brand-muted);
}
.cloud-head h3 {
	margin: 0;
	font-size: 1.6rem;
	color: var(--brand-maroon);
}

.cloud-price {
	font-family: var(--font-display);
	font-size: 2.2rem;
	color: var(--brand-coral);
	font-weight: 700;
	margin: 0;
	line-height: 1;
}
.cloud-price-note {
	color: var(--brand-muted);
	font-size: 0.85rem;
	margin: -10px 0 0;
	font-style: italic;
}

.cloud-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}
.cloud-features li {
	color: var(--brand-ink);
	font-size: 0.92rem;
	line-height: 1.45;
	padding-left: 22px;
	position: relative;
}
.cloud-features li::before {
	content: "\2713";
	color: var(--brand-coral);
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.cloud-cta {
	margin-top: auto;
	width: 100%;
	text-align: center;
}
.cloud-tier.is-premium .btn {
	background: var(--brand-gold);
	color: var(--brand-ink) !important;
}
.cloud-tier.is-premium .btn:hover {
	background: var(--brand-cream);
	color: var(--brand-maroon) !important;
}

.cloud-foot {
	text-align: center;
	margin: 48px auto 0;
	font-style: italic;
	color: var(--brand-muted);
	font-size: 0.95rem;
	max-width: 720px;
}

/* ---------- Security Patches section ---------- */
.security {
	background: linear-gradient(180deg, var(--brand-cream-dark) 0%, var(--brand-cream) 100%);
}
.patch-feed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 48px;
}
.patch-card {
	background: #fff;
	border: 1px solid var(--brand-cream-dark);
	border-left: 4px solid var(--brand-cream-dark);
	border-radius: 14px;
	padding: 22px 24px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}
.patch-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-soft);
}
.patch-card:has(.is-critical) { border-left-color: var(--brand-maroon); }
.patch-card:has(.is-high)     { border-left-color: var(--brand-coral); }
.patch-card:has(.is-medium)   { border-left-color: var(--brand-gold); }
.patch-card:has(.is-pending)  { border-left-color: var(--brand-muted); border-left-style: dashed; }
.patch-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.patch-severity {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}
.patch-severity.is-critical { background: var(--brand-maroon); }
.patch-severity.is-high     { background: var(--brand-coral); }
.patch-severity.is-medium   { background: var(--brand-gold); color: var(--brand-ink); }
.patch-severity.is-pending {
	background: transparent;
	color: var(--brand-maroon);
	border: 1px dashed var(--brand-maroon);
	padding: 3px 9px;
}
.patch-version {
	font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
	font-size: 0.85rem;
	color: var(--brand-muted);
	font-weight: 700;
}
.patch-cve {
	font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
	font-size: 0.72rem;
	color: var(--brand-coral);
	letter-spacing: 0.05em;
	margin-top: -4px;
}
.patch-title {
	font-size: 1.2rem;
	margin: 0;
	color: var(--brand-maroon);
}
.patch-body {
	color: var(--brand-muted);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
	flex-grow: 1;
}
.patch-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px dashed var(--brand-cream-dark);
	padding-top: 12px;
	margin-top: 6px;
	font-size: 0.78rem;
	color: var(--brand-muted);
}
.patch-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4caf50;
	box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.18);
}
.patch-status.is-pending .status-dot {
	background: var(--brand-gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22);
	animation: status-pulse 1.4s ease-in-out infinite;
}
@keyframes status-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(0.85); }
}
.patch-date {
	font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
	font-size: 0.74rem;
}
.patch-foot {
	text-align: center;
	margin: 40px auto 0;
	font-style: italic;
	color: var(--brand-muted);
	font-size: 0.95rem;
}
.patch-foot sup { color: var(--brand-coral); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.product-grid { grid-template-columns: 1fr; gap: 40px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.section { padding: 72px 24px; }
	.hero { padding: 72px 24px 80px; }
	.cloud-grid { grid-template-columns: 1fr; gap: 32px; }
	.cloud-tier.is-featured { transform: none; }
	.cloud-tier.is-featured:hover { transform: translateY(-3px); }
}

@media (max-width: 640px) {
	html { scroll-padding-top: 150px; }
	.site-header { padding: 14px 20px; }
	.main-navigation { display: flex; flex-direction: column; align-items: center; width: 100%; }
	.main-navigation ul { display: none; flex-direction: column; gap: 12px; width: 100%; padding-top: 14px; }
	.main-navigation.toggled ul { display: flex; }
	.menu-toggle { display: block; }
	.footer-grid { grid-template-columns: 1fr; }

	/* Quiz modal — go full-screen on mobile; body scrolls if content is tall */
	.quiz-modal { padding: 0; }
	.quiz-dialog {
		max-width: 100%;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}
	.quiz-header { padding: 8px 22px; }
	.quiz-header h3 { font-size: 1rem; }
	.quiz-body { padding: 22px 22px 26px; }
	.quiz-counter { font-size: 0.95rem; margin-bottom: 14px; }
	.quiz-question { font-size: 1.6rem; }
	.quiz-option { font-size: 1rem; padding: 14px 18px; }
	.quiz-modal .btn { padding: 16px 30px; font-size: 1.15rem; }
	.quiz-modal .btn.btn-large { padding: 18px 32px; font-size: 1.3rem; }
	.bot-randomize, .play-god-btn { padding: 10px 22px !important; font-size: 1rem !important; }
	.bot-preview-frame { width: 200px; height: 240px; }
	.bot-randomize-mini { font-size: 0.75rem; padding: 5px 12px; }
	.quiz-complete .badge { font-size: 0.7rem; padding: 6px 14px; }
	.quiz-complete h2 { font-size: 2rem; }
	.order-portrait { width: 180px; height: 220px; }
	.order-logo { width: 220px; }
	.order-confirmation h2 { font-size: 2rem; }
	.order-message { font-size: 1.15rem; }
}

/* ---------- "Or Play God" manual picker ---------- */
.bot-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
}
.bot-pick-row {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--brand-cream-dark);
}
.bot-preview.is-picking .bot-pick-row {
	display: flex;
}
.bot-pick-thumb {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid transparent;
	background: none;
	padding: 0;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.bot-pick-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bot-pick-thumb:hover,
.bot-pick-thumb:focus {
	border-color: var(--brand-coral);
	transform: scale(1.06);
}

/* ---------- BTC price ticker ---------- */
[data-usd].is-ticking {
	animation: btc-tick 1.2s ease-out;
}
@keyframes btc-tick {
	0%   { text-shadow: 0 0 12px rgba(217, 79, 79, 0.55); }
	100% { text-shadow: 0 0 0 rgba(217, 79, 79, 0); }
}