/* =========================
   ROOT VARIABLES
========================= */

:root {
	/* Brand Colors */
	--yellow: #f9c436;
	--green: #19965a;
	--blue: #1a75c4;
	--red: #ea352e;

	/* Text */
	--text-primary: #222222;
	--text-inverse: #ffffff;

	/* Backgrounds */
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--bg-dark: #1c1c1c;

	/* Font */
	--font-main: "Bungee", sans-serif;
}

/* =========================
   BASE
========================= */

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

html {
	font-size: 16px;
}

@media (max-width: 1024px) {
	html {
		font-size: 15px;
	}
}

@media (max-width: 768px) {
	html {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	html {
		font-size: 14px;
	}
}

body {
	font-family: var(--font-main);
	text-transform: uppercase;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.4;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4 {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

p {
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* =========================
   HERO SECTION LAYOUT
========================= */

.hero-section {
	position: relative;
	width: 100%;
	min-height: 100vh; /* Full viewport height */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden; /* Prevents scrollbars if images stick out */
	padding: 2rem;
	border: 20px solid var(--bg-primary);
}

@media (max-width: 768px) {
	.hero-section {
		padding: 1.5rem;
		border: 10px solid var(--bg-primary);
		min-height: 100vh;
	}
}

@media (max-width: 480px) {
	.hero-section {
		padding: 1rem;
		border: 5px solid var(--bg-primary);
	}
}

/* Background Layering */
.hero-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -3; /* Furthest back */
}

.hero-bg-image img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures image covers screen without stretch */
	opacity: 0.5; /* Slight fade to make text pop */
}

/* Side Decor Bricks */
.decor-brick {
	position: absolute;
	bottom: 0;
	z-index: -2;
	width: 15vw; /* Responsive width */
	max-width: 300px;
}

.decor-brick img {
	width: 100%;
	display: block;
}

.decor-brick.left {
	left: 0;
}

.decor-brick.right {
	right: 0;
}

/* =========================
   HERO CONTENT
========================= */

.hero-content {
	text-align: center;
	z-index: 10; /* sits on top of images */
	max-width: 800px;
	width: 100%;
}

/* The Big Logo */
.main-logo {
	font-size: 6rem; /* Very big */
	line-height: 1;
	margin-bottom: 1rem;
	/* Hard Drop Shadow for that Retro Cartoon feel */
	text-shadow: 6px 6px 0px #000000;
	-webkit-text-stroke: 2px #000000; /* Black outline around letters */
}

/* Responsive Logo size */
@media (max-width: 1024px) {
	.main-logo {
		font-size: 5rem;
		text-shadow: 5px 5px 0px #000000;
		-webkit-text-stroke: 1.5px #000000;
	}
}

@media (max-width: 768px) {
	.main-logo {
		font-size: 4rem;
		text-shadow: 4px 4px 0px #000000;
		-webkit-text-stroke: 1.5px #000000;
	}
}

@media (max-width: 480px) {
	.main-logo {
		font-size: 3rem;
		text-shadow: 4px 4px 0px #000000;
		-webkit-text-stroke: 1.25px #000000;
		margin-bottom: 0.75rem;
	}
}

/* Coloring individual letters using classes */
.l-y {
	color: var(--yellow);
}
.l-r {
	color: var(--red);
}
.l-b {
	color: var(--blue);
}
.l-g {
	color: var(--green);
}

.hero-subtext {
	font-family: var(--font-main);
	font-size: 1.5rem;
	color: var(--text-primary);
	margin-bottom: 2.5rem;
	text-transform: uppercase;
	/* White text stroke/shadow to make it readable over busy backgrounds */
	text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff,
		-2px 2px 0 #fff, 4px 4px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
	.hero-subtext {
		font-size: 1.1rem;
		margin-bottom: 2rem;
	}
}

@media (max-width: 480px) {
	.hero-subtext {
		font-size: 1.05rem;
		margin-bottom: 1.75rem;
	}
}

/* =========================
   RETRO DUAL-BUTTON TOGGLE
========================= */

.hero-mode-selector {
	margin: 0.2rem 0;
	display: inline-block;
	perspective: 1000px;
}

.selector-base {
	background: #222; /* Dark heavy plastic base */
	padding: 15px 25px;
	border: 4px solid #000;
	border-radius: 12px;
	display: flex;
	gap: 20px;
	box-shadow: 0 10px 0 #000;
}

/* Hide the actual radio circles */
.hero-mode-selector input[type="radio"] {
	display: none;
}

/* THE BUTTON CONTAINER */
.mode-btn {
	position: relative;
	cursor: pointer;
	display: block;
	width: 120px;
	height: 60px;
}

/* THE PHYSICAL BUTTON FACE */
.btn-face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-main);
	font-weight: 900;
	font-size: 1.2rem;
	border: 4px solid #000;
	transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	user-select: none;
}

/* COLOR VARIANTS */
.btn-blue .btn-face {
	background: var(--blue);
	color: white;
}
.btn-green .btn-face {
	background: var(--green);
	color: white;
}

/* THE "UP" STATE (DEFAULT) */
.btn-face {
	/* Create the 3D side profile */
	transform: translateY(-12px);
	box-shadow: 0 4px 0 #000, 0 12px 0 rgba(0, 0, 0, 1); /* The 'wall' of the button */
}

/* THE "STUCK DOWN" STATE (CHECKED) */
#brix-mode:checked + .btn-blue .btn-face,
#coin-mode:checked + .btn-green .btn-face {
	transform: translateY(-2px); /* Pushed nearly flush */
	box-shadow: 0 2px 0 #000, 0 2px 0 rgba(0, 0, 0, 1);
	background-color: #555; /* Dim the color to show it's "off" or "pressed" */
	filter: brightness(0.8);
}

/* HOVER EFFECT (For the one that is sticking up) */
.mode-btn:hover .btn-face {
	filter: brightness(1.1);
}

/* Mechanical Vibration on Click */
.mode-btn:active .btn-face {
	transform: translateY(0);
}

/* GLOSSY DETAIL (Optional) */
.btn-face::after {
	content: "";
	position: absolute;
	top: 10%;
	left: 10%;
	width: 20%;
	height: 10%;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
}

/* =========================
   STATS BRICKS (Updated)
========================= */

.stats-container {
	display: flex;
	justify-content: center;
	gap: 3rem; /* More space for the bricks to breathe */
	flex-wrap: wrap;
	width: 100%;
	margin-top: 2rem;
}

@media (max-width: 768px) {
	.stats-container {
		gap: 1.5rem;
		margin-top: 1.5rem;
		flex-wrap: nowrap;
	}
}

@media (max-width: 480px) {
	.stats-container {
		gap: 1rem;
		margin-top: 1rem;
		align-items: center;
	}
}

.stat-brick {
	/* Dimensions - Adjust based on your actual brick image aspect ratio */
	width: 220px;
	height: 110px;

	/* Layout for text inside */
	display: flex;
	align-items: center;
	justify-content: center;

	/* BACKGROUND IMAGE SETTINGS */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%; /* Stretches image to fill div */
	background-color: transparent; /* No box color */

	/* SHADOWS & VIBE */
	/* This creates a hard shadow on the IMAGE shape, not the box */
	filter: drop-shadow(6px 6px 0px #000000);

	/* Animation settings */
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: pointer;
}

@media (max-width: 768px) {
	.stat-brick {
		width: 180px;
		height: 90px;
		filter: drop-shadow(5px 5px 0px #000000);
	}
}

@media (max-width: 480px) {
	.stat-brick {
		width: 140px;
		height: 70px;
		filter: drop-shadow(3px 3px 0px #000000);
	}
}

/* Assigning different Brick Images
   Replace the URLs below with your actual assets (e.g., assets/red-brick.png)
*/

/* Brick 1 (e.g., Red) */
.stat-brick:nth-child(1) {
	/* Using a placeholder visual for now */
	background-image: url("https://placehold.co/220x110/ea352e/ea352e.png?text=Brick+Shape+Image");
	color: white;
}

/* Brick 2 (e.g., Yellow) */
.stat-brick:nth-child(2) {
	background-image: url("https://placehold.co/220x110/f9c436/f9c436.png?text=Brick+Shape+Image");
	color: white;
}

/* Brick 3 (e.g., Green) */
.stat-brick:nth-child(3) {
	background-image: url("https://placehold.co/220x110/19965a/19965a.png?text=Brick+Shape+Image");
	color: white;
}

/* TEXT STYLING INSIDE BRICK */
.stat-content {
	display: flex;
	flex-direction: column;
	line-height: 1;
	/* Adjust padding to ensure text doesn't hit the edges of the brick image */
	padding-bottom: 5px;
}

.stat-number {
	font-size: 2.2rem;
	font-weight: bold;
	/* White stroke ensures text is readable on any brick color */
	-webkit-text-stroke: 1px black;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.stat-label {
	font-size: 0.9rem;
	margin-top: 2px;
	font-family: sans-serif; /* Readable secondary font */
	font-weight: 800;
	text-transform: uppercase;
	text-shadow: none;
}

@media (max-width: 768px) {
	.stat-number {
		font-size: 1.8rem;
	}

	.stat-label {
		font-size: 0.75rem;
	}
}

@media (max-width: 480px) {
	.stat-number {
		font-size: 1.6rem;
	}

	.stat-label {
		font-size: 0.75rem;
		margin-top: 2px;
	}
}

/* HOVER EFFECT: Pop up and wiggle */
.stat-brick:hover {
	transform: scale(1.15) rotate(-3deg);
	z-index: 20;
	/* On hover, we can make the shadow deeper slightly */
	filter: drop-shadow(10px 10px 0px #000000);
}

/* Variation for middle brick */
.stat-brick:nth-child(2):hover {
	transform: scale(1.15) rotate(3deg);
}

/* =========================
   ABOUT SECTION (Full Flex Layout)
========================= */

.about-section {
	position: relative;
	padding: 2rem;
	background-color: var(--bg-secondary);
	overflow: hidden;
}

@media (max-width: 768px) {
	.about-section {
		padding: 1.5rem 1rem;
	}
}

@media (max-width: 480px) {
	.about-section {
		padding: 1rem;
	}
}

/* Flex container to sandwich the grid between brick clusters */
.about-flex-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 150px; /* Space between clusters and the grid */
	max-width: 1450px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
}

@media (max-width: 1200px) {
	.about-flex-container {
		gap: 50px;
	}
}

@media (max-width: 768px) {
	.about-flex-container {
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.about-flex-container {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow-x: hidden;
		gap: 0;
		padding: 0;
	}
}

/* =========================
   MINI BRICK CLUSTERS
========================= */

.brick-cluster {
	display: flex;
	flex-direction: column;
	gap: 100px; /* Large vertical gap between bricks */
	flex-shrink: 0;
	z-index: 10;
}

.mini-brick {
	width: 70px; /* Small, accent-sized bricks */
	height: auto;
	filter: drop-shadow(4px 4px 0px #000);
	opacity: 0;
	pointer-events: none; /* Keeps them decorative */

	/* Combined entrance and idle floating animation */
	animation: brickPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
		miniBob 5s ease-in-out infinite;
}

/* =========================
   RANDOMIZED TRANSFORMS (Hand-Drawn Vibe)
   Assigning unique offsets and rotations to each brick
========================= */

/* Left Cluster Offsets */
.side-left .mini-brick:nth-child(1) {
	transform: translateX(30px) rotate(-15deg);
	animation-delay: 0.1s, 0.2s;
}
.side-left .mini-brick:nth-child(2) {
	transform: translateX(-30px) rotate(12deg);
	animation-delay: 0.3s, 0.5s;
}
.side-left .mini-brick:nth-child(3) {
	transform: translateX(20px) rotate(-8deg);
	animation-delay: 0.5s, 0.1s;
}

/* Right Cluster Offsets */
.side-right .mini-brick:nth-child(1) {
	transform: translateX(-15px) rotate(18deg);
	animation-delay: 0.2s, 0.4s;
}
.side-right .mini-brick:nth-child(2) {
	transform: translateX(35px) rotate(-10deg);
	animation-delay: 0.4s, 0.6s;
}
.side-right .mini-brick:nth-child(3) {
	transform: translateX(-25px) rotate(22deg);
	animation-delay: 0.6s, 0.3s;
}

/* =========================
   ABOUT GRID
========================= */

.about-grid {
	flex: 0 1 1100px; /* Grid takes priority but stays within 1100px */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	z-index: 5;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.about-grid {
		gap: 2rem;
	}
}

@media (max-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	.about-grid {
		gap: 1rem;
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
		min-width: 0;
		padding: 0;
	}
}

.about-cell {
	width: 100%;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 768px) {
	.about-cell {
		min-height: 280px;
	}
}

@media (max-width: 480px) {
	.about-cell {
		min-height: auto;
		max-width: 100%;
		overflow: hidden;
	}

	.about-cell img {
		width: 100%;
		height: auto;
		max-width: 100%;
		border: 3px solid #000000 !important;
		box-shadow: 4px 4px 0px #000000 !important;
	}
}

/* Text Bricks */
.text-brick {
	padding: 3rem;
	border: 4px solid #000000;
	box-shadow: 10px 10px 0px #000000;
	transition: transform 0.2s ease;
}

.text-brick:hover {
	transform: translate(-3px, -3px);
	box-shadow: 13px 13px 0px #000000;
}

.text-brick h3 {
	font-size: 2.2rem;
	margin-bottom: 1rem;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.text-brick p {
	font-family: sans-serif;
	font-weight: 600;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.text-brick {
		padding: 2rem;
		border: 3px solid #000000;
		box-shadow: 7px 7px 0px #000000;
	}

	.text-brick:hover {
		box-shadow: 10px 10px 0px #000000;
	}

	.text-brick h3 {
		font-size: 1.8rem;
		margin-bottom: 0.8rem;
	}

	.text-brick p {
		font-size: 0.95rem;
	}
}

@media (max-width: 480px) {
	.text-brick {
		padding: 1.5rem;
		border: 3px solid #000000;
		box-shadow: 5px 5px 0px #000000;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.text-brick:hover {
		box-shadow: 7px 7px 0px #000000;
	}

	.text-brick h3 {
		font-size: 1.6rem;
		margin-bottom: 0.8rem;
		word-wrap: break-word;
	}

	.text-brick p {
		font-size: 1rem;
		line-height: 1.6;
		word-wrap: break-word;
	}
}

/* Color Styles */
.brick-yellow {
	background-color: var(--yellow);
	color: var(--text-primary);
}
.brick-blue {
	background-color: var(--blue);
	color: var(--text-inverse);
}
.brick-red {
	background-color: var(--red);
	color: var(--text-inverse);
}
.brick-green {
	background-color: var(--green);
	color: var(--text-inverse);
}

/* Image Frames */
.image-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 4px solid #000000;
	box-shadow: 10px 10px 0px #000000;
	background-color: #fff;
}

/* =========================
   ANIMATION KEYFRAMES
========================= */

@keyframes brickPopIn {
	0% {
		opacity: 0;
		scale: 0.5;
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}

@keyframes miniBob {
	0%,
	100% {
		translate: 0px 35px;
	}
	50% {
		translate: 0px -35px;
	}
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px) {
	.brick-cluster {
		display: none;
	} /* Hide clusters to prioritize content on smaller screens */
	.about-flex-container {
		gap: 0;
	}
}

@media (max-width: 1650px) {
	.about-flex-container {
		gap: 0;
	}
}

@media (max-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr;
	}
	.stats-container {
		gap: 1rem;
	}
	.stat-brick {
		width: 180px;
		height: 90px;
	}

	/* Checkerboard reset for mobile vertical stack */
	.about-cell:nth-child(1) {
		order: 1;
	}
	.about-cell:nth-child(2) {
		order: 2;
	}
	.about-cell:nth-child(3) {
		order: 4;
	}
	.about-cell:nth-child(4) {
		order: 3;
	}
	.about-cell:nth-child(5) {
		order: 5;
	}
	.about-cell:nth-child(6) {
		order: 6;
	}
}

/* =========================
   BRIX STASH SECTION
========================= */

.stash-section {
	position: relative;
	min-height: 100vh;
	padding: 2rem;
	padding-bottom: 10rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}

@media (max-width: 768px) {
	.stash-section {
		padding: 4rem 1.5rem;
		flex-wrap: wrap;
	}

	.brick-cluster.stash-side-left,
	.brick-cluster.stash-side-right {
		display: none;
	}
}

@media (max-width: 480px) {
	.stash-section {
		padding: 3rem 1rem;
		min-height: auto;
		flex-wrap: wrap;
	}

	.brick-cluster.stash-side-left,
	.brick-cluster.stash-side-right {
		display: none;
	}
}

/* Background Image */
.stash-background {
	position: absolute;
	inset: 0;
	background-image: url("images/bricks-stash-bg.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	z-index: 0;
}

/* Dark Overlay */
.stash-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.7) 100%
	);
	z-index: 1;
}

/* =========================
   VAULT CONTENT
========================= */

.stash-content {
	position: relative;
	z-index: 5;
	max-width: 900px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 3rem;
	align-items: center;
}

.stash-title {
	font-family: var(--font-main);
	font-size: 3rem;
	color: var(--yellow);
	text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 8px 8px 0 rgba(249, 196, 54, 0.3);
	letter-spacing: 3px;
	margin-bottom: 2rem;
	animation: titleBounce 3s ease-in-out infinite;
}

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

@media (max-width: 768px) {
	.stash-title {
		font-size: 2.2rem;
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 480px) {
	.stash-title {
		font-size: 1.8rem;
		margin-bottom: 1rem;
	}
}

/* Vault Container */
.vault-container {
	position: relative;
	width: 100%;
	perspective: 1000px;
}

.vault-front {
	position: relative;
	background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%);
	border: 12px solid #000;
	border-radius: 25px;
	overflow: hidden;
	box-shadow: 0 25px 0 rgba(0, 0, 0, 0.8), inset 0 15px 40px rgba(0, 0, 0, 0.7),
		0 0 80px rgba(249, 196, 54, 0.15);
	animation: vaultPop 6s ease-in-out infinite;
}

@keyframes vaultPop {
	0%,
	100% {
		transform: translateY(0px) scale(1);
	}
	50% {
		transform: translateY(-25px) scale(1.02);
	}
}

/* Vault Top Hinge */
.vault-top {
	position: relative;
	background: linear-gradient(90deg, #4a4a4a 0%, #2a2a2a 50%, #4a4a4a 100%);
	padding: 1.5rem;
	border-bottom: 3px solid #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 50px;
}

.vault-hinge {
	width: 40px;
	height: 30px;
	background: radial-gradient(circle at 30% 30%, #666, #222);
	border: 2px solid #000;
	border-radius: 50%;
	box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.8),
		inset 2px 2px 5px rgba(255, 255, 255, 0.1);
}

.top-metallic {
	flex: 1;
	height: 8px;
	background: linear-gradient(90deg, #666, #999, #666);
	margin: 0 1rem;
	border-radius: 2px;
}

/* Vault Door */
.vault-door {
	position: relative;
	padding: 3rem 2rem;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

@media (max-width: 768px) {
	.vault-door {
		padding: 2.5rem 1.5rem;
		min-height: 350px;
	}
}

@media (max-width: 480px) {
	.vault-door {
		padding: 2rem 1rem;
		min-height: 300px;
	}
}

/* Lock Mechanism */
.vault-lock {
	position: absolute;
	top: 30px;
	right: 40px;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.lock-housing {
	width: 50px;
	height: 50px;
	background: radial-gradient(circle at 35% 35%, #888, #333);
	border: 3px solid #000;
	border-radius: 8px;
	position: relative;
	box-shadow: inset -3px -3px 8px rgba(0, 0, 0, 0.8),
		inset 2px 2px 5px rgba(255, 255, 255, 0.1);
}

.lock-keyhole {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 28px;
	background: #0a0a0a;
	border-radius: 10px 10px 5px 5px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.lock-bolt {
	width: 8px;
	height: 25px;
	background: linear-gradient(90deg, #888, #555, #888);
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	animation: lockSlide 4s ease-in-out infinite;
}

@keyframes lockSlide {
	0%,
	10%,
	90%,
	100% {
		transform: translateX(0);
	}
	45%,
	55% {
		transform: translateX(-12px);
	}
}

/* Rivets */
.rivet {
	position: absolute;
	width: 20px;
	height: 20px;
	background: radial-gradient(circle at 30% 30%, #aaa, #444);
	border-radius: 50%;
	border: 1px solid #000;
	box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.8),
		inset 1px 1px 3px rgba(255, 255, 255, 0.3);
}

.rivet-tl {
	top: 20px;
	left: 20px;
}
.rivet-tr {
	top: 20px;
	right: 20px;
}
.rivet-bl {
	bottom: 20px;
	left: 20px;
}
.rivet-br {
	bottom: 20px;
	right: 20px;
}

/* Display Screen */
.display-screen {
	position: relative;
	width: 100%;
	max-width: 400px;
}

.screen-bezel {
	background: #0a0a0a;
	border: 6px solid #333;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.9),
		0 0 40px rgba(249, 196, 54, 0.2);
}

.counter-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.counter-label {
	font-family: var(--font-main);
	font-size: 0.9rem;
	color: var(--yellow);
	letter-spacing: 2px;
	text-shadow: 0 0 8px var(--yellow);
}

.counter-value {
	font-family: "Courier New", monospace;
	font-size: 3rem;
	font-weight: 900;
	color: var(--yellow);
	text-shadow: 0 0 15px var(--yellow), 0 0 30px rgba(249, 196, 54, 0.5);
	letter-spacing: 2px;
	animation: countGlow 2s ease-in-out infinite;
}

@keyframes countGlow {
	0%,
	100% {
		text-shadow: 0 0 15px var(--yellow), 0 0 30px rgba(249, 196, 54, 0.5);
	}
	50% {
		text-shadow: 0 0 20px var(--yellow), 0 0 40px rgba(249, 196, 54, 0.8);
	}
}

.counter-sublabel {
	font-family: var(--font-main);
	font-size: 0.85rem;
	color: var(--red);
	letter-spacing: 2px;
	text-shadow: 0 0 6px var(--red);
}

@media (max-width: 768px) {
	.counter-value {
		font-size: 2.2rem;
	}

	.counter-label {
		font-size: 0.8rem;
	}
}

@media (max-width: 480px) {
	.counter-value {
		font-size: 1.8rem;
	}
}

/* Vault Bottom */
.vault-bottom {
	position: relative;
	background: linear-gradient(90deg, #4a4a4a 0%, #2a2a2a 50%, #4a4a4a 100%);
	padding: 1.5rem;
	border-top: 3px solid #000;
	min-height: 40px;
}

.bottom-metallic {
	width: 100%;
	height: 8px;
	background: linear-gradient(90deg, #666, #999, #666);
	border-radius: 2px;
}

/* Vault Glow */
.vault-glow {
	position: absolute;
	inset: -15px;
	background: radial-gradient(
		circle,
		rgba(249, 196, 54, 0.1) 0%,
		transparent 70%
	);
	border-radius: 30px;
	animation: glowPulse 4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes glowPulse {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.7;
	}
}

/* Brick Stack Display */
.brick-stack-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 180px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 3;
	overflow: hidden;
}

.brick-stack-image {
	width: 100%;
	height: 100%;
	background-image: url('images/bricks-stack-normal.png');
	background-size: contain;
	background-position: bottom;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

/* Brick Stack Size States */
.brick-stack-container.small {
	bottom: -70px;
}

.brick-stack-container.medium {
	bottom: 0;
}

.brick-stack-container.large {
	bottom: 0;
}

.brick-stack-container.large #brick-stack-image {
	position: absolute;
	bottom: 12px;
}

.brick-stack-container.large #brick-stack-image-extra {
	display: block !important;
}


@keyframes stackRise {
	0% {
		transform: translateY(100px) scale(0.9);
		opacity: 1;
	}
	100% {
		transform: translateY(0px) scale(1);
		opacity: 1;
	}
}

@keyframes stackIdle {
	0% {
		transform: scale(1) rotate(0deg) skewY(0deg);
		filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
	}
	20% {
		transform: scale(1.03) rotate(-1.5deg) skewY(-0.5deg);
		filter: drop-shadow(2px 12px 25px rgba(0, 0, 0, 0.6));
	}
	40% {
		transform: scale(1.05) rotate(1deg) skewY(0.3deg);
		filter: drop-shadow(4px 14px 28px rgba(0, 0, 0, 0.65));
	}
	60% {
		transform: scale(1.02) rotate(-0.8deg) skewY(-0.2deg);
		filter: drop-shadow(2px 12px 24px rgba(0, 0, 0, 0.58));
	}
	80% {
		transform: scale(1.04) rotate(0.6deg) skewY(0.4deg);
		filter: drop-shadow(3px 13px 26px rgba(0, 0, 0, 0.62));
	}
	100% {
		transform: scale(1) rotate(0deg) skewY(0deg);
		filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
	}
}

/* Dripping Bricks */
.dripping-bricks {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.drip-brick {
	position: absolute;
	width: 45px;
	height: 22px;
	object-fit: contain;
	opacity: 0;
	animation-timing-function: ease-in;
}

.drip-brick.drip-1 {
	left: 20%;
	animation: brickDrip 2.2s ease-in 1.5s infinite;
}

.drip-brick.drip-2 {
	left: 35%;
	animation: brickDrip 2.5s ease-in 3.2s infinite;
}

.drip-brick.drip-3 {
	left: 65%;
	animation: brickDrip 2.1s ease-in 2.8s infinite;
}

.drip-brick.drip-4 {
	left: 80%;
	animation: brickDrip 2.4s ease-in 4s infinite;
}

@keyframes brickDrip {
	0% {
		top: 0%;
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(15deg) scale(1);
	}
	100% {
		top: 100%;
		opacity: 0;
		transform: rotate(45deg) scale(0.7);
	}
}

/* Floating Assets */
.vault-debris {
	display: none;
}

/* Side Brick Clusters for Stash Section */

.brick-cluster.stash-side-left,
.brick-cluster.stash-side-right {
	display: flex;
	flex-direction: column;
	gap: 175px;
	flex-shrink: 0;
	z-index: 10;
}

.brick-cluster.stash-side-left .mini-brick,
.brick-cluster.stash-side-right .mini-brick {
	width: 70px;
	height: auto;
	filter: drop-shadow(4px 4px 0px #000);
	opacity: 0;
	pointer-events: none;
	animation: brickPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
		miniBob 5s ease-in-out infinite;
}

.brick-cluster.stash-side-left .mini-brick:nth-child(1) {
	transform: translateX(30px) rotate(-15deg);
	animation-delay: 0.1s, 0.2s;
}
.brick-cluster.stash-side-left .mini-brick:nth-child(2) {
	transform: translateX(-30px) rotate(12deg);
	animation-delay: 0.3s, 0.5s;
}
.brick-cluster.stash-side-left .mini-brick:nth-child(3) {
	transform: translateX(20px) rotate(-8deg);
	animation-delay: 0.5s, 0.1s;
}

.brick-cluster.stash-side-right .mini-brick:nth-child(1) {
	transform: translateX(-15px) rotate(18deg);
	animation-delay: 0.2s, 0.4s;
}
.brick-cluster.stash-side-right .mini-brick:nth-child(2) {
	transform: translateX(35px) rotate(-10deg);
	animation-delay: 0.4s, 0.6s;
}
.brick-cluster.stash-side-right .mini-brick:nth-child(3) {
	transform: translateX(-25px) rotate(22deg);
	animation-delay: 0.6s, 0.3s;
}

.floating-asset {
	position: absolute;
	width: 80px;
	height: 60px;
	opacity: 0.35;
	animation: float 8s ease-in-out infinite;
	filter: brightness(0.9) drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.6));
	object-fit: contain;
}

.asset-1 {
	top: 5%;
	left: 5%;
	width: 70px;
	animation-delay: 0s;
}

.asset-2 {
	top: 12%;
	right: 8%;
	width: 90px;
	animation-delay: 0.8s;
}

.asset-3 {
	top: 25%;
	left: 15%;
	width: 75px;
	animation-delay: 1.6s;
}

.asset-4 {
	top: 35%;
	right: 12%;
	width: 85px;
	animation-delay: 2.4s;
}

.asset-5 {
	top: 45%;
	left: 8%;
	width: 65px;
	animation-delay: 3.2s;
}

.asset-6 {
	top: 55%;
	right: 5%;
	width: 95px;
	animation-delay: 4s;
}

.asset-7 {
	top: 65%;
	left: 20%;
	width: 80px;
	animation-delay: 4.8s;
}

.asset-8 {
	top: 75%;
	right: 18%;
	width: 70px;
	animation-delay: 5.6s;
}

.asset-9 {
	bottom: 15%;
	left: 10%;
	width: 85px;
	animation-delay: 6.4s;
}

.asset-10 {
	bottom: 8%;
	right: 10%;
	width: 75px;
	animation-delay: 7.2s;
}

.asset-11 {
	top: 18%;
	left: 35%;
	width: 70px;
	animation-delay: 0.4s;
}

.asset-12 {
	top: 40%;
	left: 60%;
	width: 80px;
	animation-delay: 1.2s;
}

.asset-13 {
	top: 62%;
	right: 25%;
	width: 90px;
	animation-delay: 2s;
}

.asset-14 {
	top: 28%;
	right: 30%;
	width: 75px;
	animation-delay: 2.8s;
}

.asset-15 {
	bottom: 35%;
	left: 40%;
	width: 85px;
	animation-delay: 3.6s;
}

.asset-16 {
	bottom: 25%;
	right: 35%;
	width: 70px;
	animation-delay: 4.4s;
}

.asset-17 {
	top: 50%;
	left: 25%;
	width: 80px;
	animation-delay: 5.2s;
}

.asset-18 {
	top: 8%;
	left: 50%;
	width: 65px;
	animation-delay: 6s;
}

.asset-19 {
	bottom: 20%;
	left: 70%;
	width: 95px;
	animation-delay: 6.8s;
}

.asset-20 {
	top: 70%;
	left: 75%;
	width: 75px;
	animation-delay: 7.6s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}
	25% {
		transform: translateY(-40px) rotate(15deg);
	}
	50% {
		transform: translateY(-80px) rotate(-15deg);
	}
	75% {
		transform: translateY(-40px) rotate(15deg);
	}
}

/* =========================
   INFO CARDS
========================= */

.info-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

@media (max-width: 768px) {
	.info-cards {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.info-card {
	padding: 2.5rem 2rem;
	border: 5px solid #000;
	box-shadow: 12px 12px 0px #000;
	position: relative;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (max-width: 480px) {
	.info-card {
		padding: 2rem 1.5rem;
		border: 3px solid #000;
		box-shadow: 8px 8px 0px #000;
	}
}

.info-card:hover {
	transform: translate(-5px, -5px) rotate(-1deg);
	box-shadow: 17px 17px 0px #000;
}

.card-studs {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 30px;
	height: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.card-studs::before,
.card-studs::after {
	content: "";
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.3);
}

.info-card h3 {
	font-size: 2rem;
	margin-bottom: 1rem;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
	.info-card h3 {
		font-size: 1.6rem;
	}
}

.info-card p {
	font-family: sans-serif;
	font-weight: 700;
	line-height: 1.6;
	font-size: 1rem;
}

@media (max-width: 480px) {
	.info-card p {
		font-size: 0.95rem;
	}
}

.card-yellow {
	background-color: var(--yellow);
	color: var(--text-primary);
}

.card-blue {
	background-color: var(--blue);
	color: var(--text-inverse);
}

.card-red {
	background-color: var(--red);
	color: var(--text-inverse);
}

/* =========================
   HOW TO BUY (Assembly Line)
========================= */

.buy-section {
	padding: 2rem;
	background-color: #dcdcdc; /* Industrial metallic grey */
	text-align: center;
	overflow: hidden;
}

.buy-header {
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: 6rem;
	color: #000;
	text-transform: uppercase;
	font-family: var(--font-main);
	letter-spacing: -2px;
	transform: rotate(-1.5deg);
	text-shadow: 4px 4px 0px #fff;
}

/* THE CONVEYOR SYSTEM */
.factory-floor {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.conveyor-belt {
	display: flex;
	justify-content: center;
	gap: 100px;
	padding: 100px 40px;

	/* THE MOVING HAZARD STRIPES */
	background: repeating-linear-gradient(
		45deg,
		#1a1a1a,
		/* Dark Stripe */ #1a1a1a 40px,
		#2a2a2a 40px,
		/* Lighter Stripe */ #2a2a2a 80px
	);
	background-size: 113px 113px; /* Precise math for seamless loop */

	border-top: 10px solid #000;
	border-bottom: 10px solid #000;
	box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.6),
		0 15px 30px rgba(0, 0, 0, 0.2);

	/* Belt Animation */
	animation: beltScroll 1.5s linear infinite;
}

/* Keyframe for the infinite scrolling background */
@keyframes beltScroll {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 113px 0;
	}
}

/* =========================
   THE MECHANICAL STEPS
========================= */

.assembly-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Subtle mechanical sway as if the belt is moving them */
	animation: machineSway 3s ease-in-out infinite alternate;
}

.assembly-step:nth-child(2) {
	animation-delay: -0.8s;
}
.assembly-step:nth-child(3) {
	animation-delay: -1.6s;
}

@keyframes machineSway {
	0% {
		transform: translateX(-8px);
	}
	100% {
		transform: translateX(8px);
	}
}

/* THE MECHANICAL CLAW */
.mechanical-claw {
	width: 8px;
	height: 100px;
	background: #555;
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	border: 3px solid #000;
	z-index: 1;
}

/* The Pincer Head */
.mechanical-claw::after {
	content: "⊂ ⊃";
	font-family: monospace;
	font-weight: 900;
	font-size: 3rem;
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	color: #000;
	text-shadow: 2px 0 0 #555;
}

/* THE STEP BRICK */
.buy-brick {
	width: 300px;
	min-height: 200px;
	padding: 3rem 2rem;
	background: white;
	border: 5px solid #000;
	box-shadow: 15px 15px 0px #000;
	position: relative;
	z-index: 2;
}

.step-number {
	position: absolute;
	top: -25px;
	left: -25px;
	background: #000;
	color: var(--yellow);
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.2rem;
	border-radius: 50%;
	border: 4px solid var(--yellow);
	box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);
}

.buy-brick h3 {
	margin: 0.5rem 0 1rem;
	font-size: 1.8rem;
	color: #000;
	line-height: 1;
}

.buy-brick p {
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

/* COLOR ACCENTS */
.brick-blue {
	border-top: 15px solid var(--blue);
}
.brick-yellow {
	border-top: 15px solid var(--yellow);
}
.brick-red {
	border-top: 15px solid var(--red);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
	.conveyor-belt {
		flex-direction: column;
		align-items: center;
		gap: 120px;
		padding: 120px 20px;
	}

	.factory-floor {
		width: 100%;
		left: 0;
		margin-left: 0;
	}

	.mechanical-claw {
		height: 120px;
		top: -120px;
	}
}

/* =========================
   INSTAGRAM SECTION
========================= */

.instagram-section {
	position: relative;
	padding: 4rem 2rem;
	background-color: var(--yellow); /* Bright pop color for Insta */
	text-align: center;
	overflow: hidden;
}

@media (max-width: 768px) {
	.instagram-section {
		padding: 3rem 1.5rem;
	}
}

@media (max-width: 480px) {
	.instagram-section {
		padding: 2rem 0;
	}
}

/* Corner Decor (Static) */
.insta-corner {
	position: absolute;
	width: 250px; /* Adjust based on your asset size */
	z-index: 1;
}

.insta-corner.corner-bottom {
	bottom: 0;
}

.insta-corner.corner-top {
	top: 0;
	transform: scaleY(-1);
}

.insta-corner.corner-left {
	left: -40px;
}

.insta-corner.corner-right {
	right: 40px;
}

.insta-corner img {
	width: 140%;
	display: block;
}

/* Header Styling */
.insta-header {
	margin-bottom: 4rem;
	position: relative;
	z-index: 5;
}

@media (max-width: 480px) {
	.insta-header {
		margin-bottom: 2rem;
	}
}

.insta-logo-wrapper {
	margin-bottom: 1rem;
}

.insta-icon {
	width: 60px;
	height: 60px;
	color: var(--text-primary);
	filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
	.insta-icon {
		width: 50px;
		height: 50px;
	}
}

@media (max-width: 480px) {
	.insta-icon {
		width: 40px;
		height: 40px;
	}

	.insta-corner {
		display: none;
	}
}

.insta-title {
	font-size: 2.5rem;
	color: var(--text-primary);
	-webkit-text-stroke: 1px #000;
	text-shadow: 3px 3px 0px #fff;
}

@media (max-width: 768px) {
	.insta-title {
		font-size: 2rem;
	}
}

@media (max-width: 480px) {
	.insta-title {
		font-size: 1.5rem;
	}
}

/* Reels Layout */
.reels-container {
	display: flex;
	justify-content: center;
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}

.reel-card {
	flex: 1;
	max-width: 320px;
	aspect-ratio: 9 / 16; /* Tall Reel Format */
	background-color: var(--bg-dark);
	border: 5px solid #000;
	box-shadow: 12px 12px 0px #000;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 768px) {
	.reel-card {
		max-width: 280px;
		border: 4px solid #000;
		box-shadow: 10px 10px 0px #000;
	}
}

@media (max-width: 480px) {
	.reel-card {
		max-width: 100%;
		border: 3px solid #000;
		box-shadow: 6px 6px 0px #000;
	}
}

.reel-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Hover Effect - Makes them pop like a cartoon interaction */
.reel-card:hover {
	transform: scale(1.05) rotate(2deg);
	box-shadow: 18px 18px 0px #000;
	cursor: pointer;
}

.reel-card:nth-child(2):hover {
	transform: scale(1.05) rotate(-2deg);
}

/* Responsive */
@media (max-width: 900px) {
	.reels-container {
		flex-direction: column;
		align-items: center;
	}

	.reel-card {
		width: 100%;
		max-width: 300px;
	}

	.insta-corner {
		width: 150px; /* Scale down corners on smaller screens */
	}
}

@media (max-width: 480px) {
	.reels-container {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		gap: 1rem;
		align-items: center;
		justify-content: flex-start;
		max-width: 100%;
		padding: 1rem 1rem;
		-webkit-overflow-scrolling: touch;
		scroll-padding: 1rem;
	}

	.reel-card {
		flex: 0 0 80vw;
		max-width: 80vw;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		margin: 0 0.5rem;
	}
}

/* =========================
   FAQ SECTION (The Swap)
========================= */

.faq-section {
	padding: 8rem 2rem;
	background-color: var(--bg-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (max-width: 768px) {
	.faq-section {
		padding: 5rem 1.5rem;
	}
}

@media (max-width: 480px) {
	.faq-section {
		padding: 3rem 1rem;
	}
}

.faq-header {
	font-size: 3rem;
	font-family: var(--font-main);
	color: var(--bg-primary);
	-webkit-text-stroke: 1px #000;
	text-shadow: 3px 3px 0px var(--red);
	margin-bottom: 50px;
}

@media (max-width: 768px) {
	.faq-header {
		font-size: 2.2rem;
		margin-bottom: 35px;
	}
}

@media (max-width: 480px) {
	.faq-header {
		font-size: 1.8rem;
		margin-bottom: 25px;
	}
}

.faq-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	max-width: 750px;
	perspective: 1200px; /* Essential for 3D depth */
}

@media (max-width: 768px) {
	.faq-container {
		gap: 20px;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.faq-container {
		gap: 15px;
	}
}

/* THE FLIPPER BOX */
.faq-flipper {
	height: 120px; /* Fixed height so the swap is clean */
	width: 100%;
	cursor: pointer;
}

@media (max-width: 768px) {
	.faq-flipper {
		height: 140px;
	}
}

@media (max-width: 480px) {
	.faq-flipper {
		height: 160px;
	}
}

.faq-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy flip */
	transform-style: preserve-3d;
}

/* State when clicked */
.faq-flipper.flipped .faq-card-inner {
	transform: rotateX(-180deg);
}

/* THE FACES */
.faq-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden; /* Hides the back side during flip */
	display: flex;
	align-items: center;
	padding: 0 2.5rem;
	border: 4px solid #000;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.faq-face {
		padding: 0 2rem;
		border: 3px solid #000;
	}
}

@media (max-width: 480px) {
	.faq-face {
		padding: 0 1.5rem;
		border: 2px solid #000;
	}
}

/* Front Styling */
.faq-front {
	z-index: 2;
	transform: rotateX(0deg);
	box-shadow: 0px 10px 0px #000;
	justify-content: space-between;
}

/* Back Styling */
.faq-back {
	background-color: #ffffff;
	color: #000;
	transform: rotateX(180deg); /* Pre-rotated so it faces the "back" */
	box-shadow: 0px -10px 0px #000; /* Shadow is inverted because card is upside down */
}

.faq-question {
	font-size: 1.5rem;
	font-family: var(--font-main);
}

@media (max-width: 768px) {
	.faq-question {
		font-size: 1.2rem;
	}
}

@media (max-width: 480px) {
	.faq-question {
		font-size: 1.2rem;
	}
}

.faq-answer-text {
	font-family: sans-serif;
	font-weight: 800;
	font-size: 1.1rem;
	text-align: left;
	line-height: 1.4;
}

@media (max-width: 768px) {
	.faq-answer-text {
		font-size: 0.95rem;
		line-height: 1.35;
	}
}

@media (max-width: 480px) {
	.faq-answer-text {
		font-size: 1rem;
		line-height: 1.5;
	}
}

/* BRICK COLORS */
.brick-red {
	background-color: var(--red);
	color: #fff;
}
.brick-blue {
	background-color: var(--blue);
	color: #fff;
}
.brick-green {
	background-color: var(--green);
	color: #fff;
}

/* DECORATIVE STUDS (Inside the front brick) */
.stud-pattern {
	width: 40px;
	height: 60px;
	background-image: radial-gradient(
		circle,
		rgba(0, 0, 0, 0.2) 20%,
		transparent 20%
	);
	background-size: 20px 20px;
	opacity: 0.5;
}

/* MOBILE ADAPTATION */
@media (max-width: 600px) {
	.faq-flipper {
		height: 160px;
	} /* Taller for mobile text wrapping */
	.faq-question {
		font-size: 1.2rem;
	}
}

/* =========================
   THE ACTION STICKER
========================= */

.action-sticker {
	position: absolute;
	top: -10px;
	right: 20px;
	background-color: var(--yellow);
	color: #000;
	padding: 8px 15px;
	z-index: 20;

	border: 3px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 50px;

	/* A "Tugging" animation like it's caught in the wind */
	animation: tagTug 2s ease-in-out infinite;
	cursor: pointer;
	pointer-events: none;
}

.sticker-text {
	font-family: var(--font-main);
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 1px;
}

/* Tug Animation */
@keyframes tagTug {
	0%,
	100% {
		transform: rotate(-5deg) translateY(0);
	}
	50% {
		transform: rotate(8deg) translateY(-5px);
	}
}

/* Add a "Staple" effect using a pseudo-element */
.action-sticker::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 15px;
	height: 4px;
	background: #555; /* Metallic staple color */
	border-radius: 2px;
}

/* Hide the sticker when flipped so it doesn't poke through the back */
.faq-flipper.flipped .action-sticker {
	display: none;
}

/* Position Adjustment for the Question text to make room for sticker */
.faq-question {
	padding-right: 40px;
}

/* =========================
   ENHANCED FLIP SHADOW
========================= */

/* Make the whole brick "lift" on hover to signal it's interactable */
.faq-flipper:hover .faq-card-inner {
	margin-top: -5px;
}

.faq-flipper:hover .faq-front {
	box-shadow: 0px 15px 0px #000;
}

/* =========================
   SPACE CTA SECTION
========================= */

.space-cta-section {
	position: relative;
	height: 65vh;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #000; /* Fallback */
	perspective: 1000px;
}

@media (max-width: 768px) {
	.space-cta-section {
		height: 100vh;
		min-height: auto;
	}
}

@media (max-width: 480px) {
	.space-cta-section {
		height: auto;
		min-height: 500px;
		padding: 2rem 0;
	}
}

.space-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.space-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
	filter: saturate(1.5); /* Boosts that 90s cartoon color vibe */
}

/* =========================
   FLOATING SPACE DEBRIS
========================= */

.space-debris {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.floating-brick {
	position: absolute;
	width: 100px;
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
	animation: spaceFloat 12s linear infinite;
}

/* Specific start positions for the "Debris" */
.b-1 {
	top: 10%;
	left: 15%;
	animation-duration: 15s;
	width: 60px;
}
.b-2 {
	top: 70%;
	left: 5%;
	animation-duration: 20s;
	width: 120px;
}
.b-3 {
	top: 20%;
	right: 10%;
	animation-duration: 18s;
	width: 80px;
}
.b-4 {
	bottom: 15%;
	right: 20%;
	animation-duration: 25s;
	width: 150px;
}

@keyframes spaceFloat {
	0% {
		transform: translateZ(-500px) rotate(0deg);
		opacity: 0;
	}
	20% {
		opacity: 0.8;
	}
	80% {
		opacity: 0.8;
	}
	100% {
		transform: translateZ(500px) rotate(360deg);
		opacity: 0;
	}
}

/* =========================
   CTA CONTENT
========================= */

.space-content {
	position: relative;
	z-index: 10;
	text-align: center;
	color: #fff;
}

.space-header {
	font-size: clamp(3rem, 8vw, 6rem); /* Responsive giant text */
	line-height: 0.9;
	margin-bottom: 1.5rem;
	text-shadow: 8px 8px 0px var(--blue);
	-webkit-text-stroke: 2px #000;
}

@media (max-width: 768px) {
	.space-header {
		font-size: clamp(2rem, 6vw, 4rem);
		text-shadow: 5px 5px 0px var(--blue);
		-webkit-text-stroke: 1.5px #000;
	}
}

@media (max-width: 480px) {
	.space-header {
		font-size: clamp(2.5rem, 8vw, 4rem);
		text-shadow: 5px 5px 0px var(--blue);
		-webkit-text-stroke: 1.5px #000;
		margin-bottom: 1.5rem;
	}
}

.space-header .highlight {
	color: var(--yellow);
	text-shadow: 8px 8px 0px var(--red);
}

@media (max-width: 768px) {
	.space-header .highlight {
		text-shadow: 5px 5px 0px var(--red);
	}
}

@media (max-width: 480px) {
	.space-header .highlight {
		text-shadow: 3px 3px 0px var(--red);
	}
}

.space-lead {
	font-family: var(--font-main);
	font-size: 1.2rem;
	margin-bottom: 3rem;
	letter-spacing: 2px;
}

@media (max-width: 768px) {
	.space-lead {
		font-size: 1rem;
		margin-bottom: 2rem;
		letter-spacing: 1px;
	}
}

@media (max-width: 480px) {
	.space-lead {
		font-size: 1.1rem;
		margin-bottom: 2rem;
		letter-spacing: 1px;
	}
}

/* THE MASSIVE BUTTON */
.massive-cta {
	display: inline-block;
	background: var(--green);
	color: #fff;
	padding: 1.5rem 4rem;
	font-size: 2rem;
	font-family: var(--font-main);
	text-decoration: none;
	border: 5px solid #000;
	box-shadow: 0px 15px 0px #000;
	transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.massive-cta:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0px 20px 0px #000, 0 0 30px rgba(25, 150, 90, 0.4);
	background-color: var(--yellow);
	color: #000;
}

/* The Satellite Tag */
.space-tag {
	position: absolute;
	top: -20px;
	right: -30px;
	background: var(--red);
	padding: 5px 15px;
	font-size: 0.8rem;
	border: 3px solid #000;
	transform: rotate(15deg);
	animation: satellite 3s ease-in-out infinite alternate;
}

@keyframes satellite {
	from {
		transform: rotate(15deg) translateY(0);
	}
	to {
		transform: rotate(20deg) translateY(-10px);
	}
}

/* =========================
   3D CARTOON BUTTON
========================= */

.launch-button-container {
	position: relative;
	display: inline-block;
	margin-top: 50px;
	perspective: 1000px;
}

/* The Heavy Plastic Base */
.button-base {
	background: #333; /* Dark grey plastic */
	padding: 20px;
	border: 6px solid #000;
	border-radius: 20px;
	box-shadow: 0 15px 0 #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {
	.button-base {
		padding: 15px;
		border: 5px solid #000;
		border-radius: 15px;
		box-shadow: 0 12px 0 #000;
	}
}

@media (max-width: 480px) {
	.button-base {
		padding: 10px;
		border: 4px solid #000;
		border-radius: 10px;
		box-shadow: 0 8px 0 #000;
	}
}

/* The Button Body */
.big-red-button {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	outline-offset: 4px;
	transition: filter 250ms;
}

/* The Cylinder Side & Top Layering */
.button-top {
	display: block;
	position: relative;
	padding: 40px 60px;
	border-radius: 50%; /* Circle shape */
	background: var(--red);
	border: 4px solid #000;
	color: white;
	font-family: var(--font-main);
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: 2px;

	/* The "Side" of the button (3D thickness) */
	transform: translateY(-12px);
	box-shadow: 0 4px 0 #000, 0 12px 0 #990000, /* Deep red side */ 0 16px 0 #000; /* Bottom outline */

	transition: transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
		box-shadow 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover State - Slight lift */
.big-red-button:hover .button-top {
	transform: translateY(-16px);
	box-shadow: 0 4px 0 #000, 0 16px 0 #990000, 0 20px 0 #000;
}

/* Active State - THE CLICK ACTION */
.big-red-button:active .button-top {
	transform: translateY(-4px); /* Pushes down */
	box-shadow: 0 2px 0 #000, 0 4px 0 #990000, 0 6px 0 #000;
}

/* Glossy highlight on top of the button */
.button-top::after {
	content: "";
	position: absolute;
	top: 15%;
	left: 20%;
	width: 30%;
	height: 15%;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: rotate(-20deg);
}

/* Responsive Button Size */
@media (max-width: 768px) {
	.button-top {
		padding: 30px 45px;
		font-size: 1.4rem;
		border: 3px solid #000;
	}
}

@media (max-width: 480px) {
	.button-top {
		padding: 20px 30px;
		font-size: 1rem;
		border: 2px solid #000;
	}
}

/* =========================
    BRICK CUSTOMIZER SECTION
========================= */

.customizer-section {
	background-color: #d9d9d9;
	padding: 3rem 2rem;
	margin: 2rem 0;
	position: relative;
	border: 8px solid #000;
	overflow: hidden;
}

.customizer-header {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 2.5rem;
	text-shadow: 3px 3px 0 #000;
	color: #1c1c1c;
}

.customizer-container {
	display: grid;
	grid-template-columns: 1fr 1.75fr 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}

/* ===== CUSTOMIZER PANELS ===== */

.customizer-panel {
	border: 6px solid #000;
	padding: 1.5rem;
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-height: 200px;
	justify-content: flex-start;
}

.panel-title {
	font-size: 1.3rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #000;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

/* Text Input Panel */
.text-panel {
	background-color: var(--yellow);
}

.text-inputs {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.customizer-input {
	padding: 0.7rem 0.8rem;
	border: 3px solid #000;
	font-family: var(--font-main);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	background-color: #fff;
	color: #000;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.2s;
}

.customizer-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px #000, 3px 3px 0 rgba(0, 0, 0, 0.3);
	transform: translate(-2px, -2px);
}

.customizer-input::placeholder {
	color: #999;
	opacity: 0.7;
}

/* Color Input Panel */
.color-panel {
	background-color: var(--blue);
}

.color-inputs {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.color-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.color-input-group label {
	font-size: 0.85rem;
	font-weight: 800;
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.customizer-color {
	width: 100%;
	height: 50px;
	border: 3px solid #000;
	cursor: pointer;
	transition: all 0.2s;
	border-radius: 2px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.customizer-color:hover {
	box-shadow: 0 0 0 3px #000, 3px 3px 0 rgba(0, 0, 0, 0.3);
	transform: translate(-2px, -2px);
}

/* ===== BRICK STACK PREVIEW ===== */

.customizer-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url('images/blueprint.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 6px solid #000;
	padding: 2rem 1rem;
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
	min-height: 300px;
}

.brick-stack-wrapper {
	position: relative;
	width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
}

.customizer-brick {
	position: relative;
	width: 300px;
	aspect-ratio: 349 / 299;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.customizer-brick img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	z-index: 1;
}

/* CSS Custom Properties for brick colors */
.customizer-brick.brick-1 {
	--brick-1-color: #f9c436;
}

.customizer-brick.brick-2 {
	--brick-2-color: #ea352e;
}

.customizer-brick.brick-3 {
	--brick-3-color: #19965a;
}

/* Colored fill layer behind the brick image */
.customizer-brick::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	
	/* CSS Mask for fill area only */
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

.customizer-brick.brick-1::before {
	background-color: var(--brick-1-color, #f9c436);
	-webkit-mask-image: url('images/brix-top-fill.png');
	mask-image: url('images/brix-top-fill.png');
}

.customizer-brick.brick-2::before {
	background-color: var(--brick-2-color, #ea352e);
	-webkit-mask-image: url('images/brix-no-top-fill.png');
	mask-image: url('images/brix-no-top-fill.png');
}

.customizer-brick.brick-3::before {
	background-color: var(--brick-3-color, #19965a);
	-webkit-mask-image: url('images/brix-no-top-fill.png');
	mask-image: url('images/brix-no-top-fill.png');
}

/* Brick Labels - positioned absolutely inside bricks */
.brick-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(0, 44px) skewX(25deg) skewY(-5deg);
	font-size: 1.25rem;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	color: #333333;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
	white-space: normal;
	max-width: 80%;
	word-break: break-word;
	pointer-events: none;
	z-index: 2;
}

#label-1 {
	transform: translate(0, 40px) perspective(600px) rotateY(-15deg) rotateX(-10deg);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 1024px) {
	.customizer-section {
		padding: 2.5rem 1.5rem;
		border: 6px solid #000;
	}

	.customizer-header {
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	.customizer-container {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1.5rem;
	}

	.customizer-panel {
		padding: 1.2rem;
		box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
		gap: 1rem;
		min-height: auto;
	}

	.panel-title {
		font-size: 1.1rem;
	}

	.customizer-preview {
		padding: 1.5rem 1rem;
		min-height: 250px;
	}

	.brick-stack-wrapper {
		width: 250px;
	}

	.customizer-brick {
		width: 250px;
	}
}

@media (max-width: 768px) {
	.customizer-section {
		padding: 2rem 1rem;
		border: 5px solid #000;
		margin: 1.5rem 0;
	}

	.customizer-header {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
		text-shadow: 2px 2px 0 #000;
	}

	.customizer-container {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.customizer-panel {
		padding: 1rem;
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
		border: 4px solid #000;
	}

	.panel-title {
		font-size: 1rem;
		letter-spacing: 1px;
	}

	.text-inputs,
	.color-inputs {
		gap: 0.6rem;
	}

	.customizer-input {
		padding: 0.6rem 0.7rem;
		font-size: 0.85rem;
		border: 2px solid #000;
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
	}

	.customizer-input:focus {
		box-shadow: 0 0 0 2px #000, 2px 2px 0 rgba(0, 0, 0, 0.3);
		transform: translate(-1px, -1px);
	}

	.customizer-color {
		height: 40px;
		border: 2px solid #000;
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
	}

	.customizer-color:hover {
		box-shadow: 0 0 0 2px #000, 2px 2px 0 rgba(0, 0, 0, 0.3);
		transform: translate(-1px, -1px);
	}

	.customizer-preview {
		padding: 1.5rem 0.8rem;
		border: 4px solid #000;
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
		min-height: 200px;
	}

	.brick-stack-wrapper {
		width: 200px;
	}

	.customizer-brick {
		width: 200px;
	}

	.brick-label {
		font-size: 0.65rem;
	}
}

@media (max-width: 480px) {
	.customizer-section {
		padding: 1.5rem 1rem;
		border: 3px solid #000;
		margin: 1rem 0;
	}

	.customizer-header {
		font-size: 1.25rem;
		margin-bottom: 1rem;
		text-shadow: 2px 2px 0 #000;
	}

	.customizer-container {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.customizer-panel {
		padding: 0.8rem;
		border: 3px solid #000;
		gap: 0.8rem;
		min-height: auto;
	}

	.panel-title {
		font-size: 0.9rem;
		letter-spacing: 1px;
	}

	.text-inputs,
	.color-inputs {
		gap: 0.5rem;
	}

	.customizer-input {
		padding: 0.5rem 0.6rem;
		font-size: 0.75rem;
		border: 2px solid #000;
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
	}

	.customizer-color {
		height: 35px;
		border: 2px solid #000;
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
	}

	.customizer-preview {
		padding: 1rem 0.8rem;
		border: 3px solid #000;
		box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
		min-height: 180px;
	}

	.brick-stack-wrapper {
		width: 160px;
	}

	.customizer-brick {
		width: 160px;
	}

	.brick-label {
		font-size: 0.55rem;
		max-width: 80%;
	}

	.color-input-group label {
		font-size: 0.75rem;
	}
}

/* Customizer Button Group */
.customizer-button-group {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	margin-top: 3rem;
	flex-wrap: wrap;
}

.customizer-btn {
	padding: 1rem 2.5rem;
	font-family: var(--font-main);
	font-size: 1.1rem;
	font-weight: bold;
	text-transform: uppercase;
	border: 4px solid #000;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.15s;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
	letter-spacing: 0.05em;
	position: relative;
	top: 0;
	left: 0;
}

.customizer-btn:hover {
	top: -2px;
	left: -2px;
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
}

.customizer-btn:active {
	top: 2px;
	left: 2px;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.btn-export {
	background-color: var(--blue);
	color: #fff;
}

.btn-buy {
	background-color: var(--red);
	color: #fff;
}

@media (max-width: 768px) {
	.customizer-button-group {
		gap: 1rem;
		margin-top: 2rem;
	}

	.customizer-btn {
		padding: 0.75rem 1.75rem;
		font-size: 0.95rem;
		border: 3px solid #000;
		box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
	}

	.customizer-btn:hover {
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
	}
}

@media (max-width: 480px) {
	.customizer-button-group {
		flex-direction: column;
		width: 100%;
		gap: 0.75rem;
	}

	.customizer-btn {
		width: 100%;
		padding: 0.65rem 1.5rem;
		font-size: 0.85rem;
		border: 2px solid #000;
		box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
	}

	.customizer-btn:hover {
		box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
	}
}

/* =========================
    RANDOM BRIX-STACK SECTION
========================= */

.random-brix-section {
	position: relative;
	width: 100%;
	min-height: 67vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	padding: 4rem 2rem;
}

/* Background image */
.random-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.random-bg-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

/* Random content container */
.random-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	margin-bottom: 80px;
	gap: 2rem;
	text-align: center;
}

.random-text-content {
	max-width: 600px;
}

.random-header {
	font-size: 3.5rem;
	color: #222;
	margin-bottom: 1rem;
	text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
	line-height: 1.2;
}

.random-header .highlight {
	color: var(--red);
	display: block;
}

.random-lead {
	font-size: 1.2rem;
	color: #222;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
}

.mystery-button-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 1000px;
}

/* Jump and shake animation */
.mystery-button-shake {
	animation: jump-shaking 1.2s ease-in-out infinite;
}

@keyframes jump-shaking {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateY(-6px);
	}
	35% {
		transform: translateY(-6px) rotate(8deg);
	}
	55% {
		transform: translateY(-6px) rotate(-8deg);
	}
	65% {
		transform: translateY(-6px) rotate(8deg);
	}
	75% {
		transform: translateY(-6px) rotate(-8deg);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}

/* Mystery CTA Button */
.mystery-cta-button {
	position: relative;
	width: 180px;
	height: 180px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-family: var(--font-main);
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
	transition: transform 0.2s;
	filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

.mystery-cta-button:hover {
	transform: scale(1.05);
}

.mystery-cta-button:active {
	transform: scale(0.98);
}

.mystery-cta-button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.mystery-cta-button .button-text {
	position: relative;
	z-index: 2;
	text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
	font-size: 1.5rem;
	letter-spacing: 2px;
	transform: translateY(160%);
}

/* Open animation for mystery box */
.mystery-cta-button.opening {
	animation: box-open 0.8s ease-out forwards;
}

@keyframes box-open {
	0% {
		transform: scale(1) rotateZ(0deg);
	}
	50% {
		transform: scale(1.1) rotateZ(5deg);
	}
	100% {
		transform: scale(0.8) rotateZ(-5deg) translateY(-200px);
		opacity: 0;
	}
}

/* Carousel Strip */
.carousel-strip {
	position: relative;
	width: 105%;
	height: 80px;
	background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.1) 100%);
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
	z-index: 5;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.carousel-track {
	display: flex;
	gap: 30px;
	animation: scroll-carousel 60s linear infinite;
	padding: 0 20px;
	white-space: nowrap;
}

@keyframes scroll-carousel {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.carousel-item {
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.9);
	border: 3px solid #000;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: bold;
	color: #222;
	text-transform: uppercase;
	flex-shrink: 0;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
}

/* Responsive */
@media (max-width: 1024px) {
	.random-brix-section {
		min-height: auto;
		padding: 3rem 1.5rem;
	}

	.random-header {
		font-size: 2.8rem;
	}

	.random-lead {
		font-size: 1rem;
	}

	.mystery-cta-button {
		width: 150px;
		height: 150px;
		font-size: 1rem;
	}

	.mystery-cta-button .button-text {
		font-size: 1.2rem;
	}

	.carousel-item {
		font-size: 0.9rem;
		padding: 8px 15px;
	}
}

@media (max-width: 768px) {
	.random-brix-section {
		padding: 2rem 1rem;
	}

	.random-header {
		font-size: 2rem;
	}

	.random-lead {
		font-size: 0.9rem;
	}

	.mystery-cta-button {
		width: 120px;
		height: 120px;
		gap: 5px;
	}

	.mystery-cta-button .button-text {
		font-size: 1rem;
	}

	.carousel-strip {
		height: 60px;
	}

	.carousel-item {
		font-size: 0.8rem;
		padding: 6px 12px;
		border: 2px solid #000;
	}

	.carousel-track {
		gap: 20px;
		padding: 0 15px;
	}
}

@media (max-width: 480px) {
	.random-brix-section {
		padding: 1.5rem 0.75rem;
	}

	.random-header {
		font-size: 1.5rem;
	}

	.random-lead {
		font-size: 0.8rem;
	}

	.mystery-cta-button {
		width: 100px;
		height: 100px;
	}

	.mystery-cta-button .button-text {
		font-size: 0.85rem;
		letter-spacing: 1px;
	}

	.carousel-strip {
		height: 50px;
		border-top: 2px solid #000;
		border-bottom: 2px solid #000;
	}

	.carousel-item {
		font-size: 0.7rem;
		padding: 5px 10px;
		border: 1px solid #000;
		gap: 15px;
	}

	.carousel-track {
		gap: 15px;
		padding: 0 10px;
	}
}

/* =========================
     MODE SWITCHING
========================= */

.mode-content {
	display: none;
}

.mode-content.active {
	display: block;
}

/* =========================
    FOOTER (The Toy Box Floor)
========================= */

.main-footer {
	background-color: #222; /* Dark floor color */
	padding: 1.5rem;
	border-top: 8px solid #000;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.footer-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	z-index: 5;
}

/* THE COPYRIGHT NAMEPLATE */
.copyright-plate {
	background-color: #eee;
	border: 4px solid #000;
	padding: 1rem 3rem;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: 0 8px 0 rgba(0, 0, 0, 0.5);
	position: relative;
}

.copyright-plate p {
	color: #000;
	font-family: sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 1px;
	margin: 0;
}

.logo-text {
	display: inline-flex;
	margin: 0 5px;
	font-size: 1.1rem; /* Slightly larger than the surrounding text */
	gap: 1px;
}

.logo-text span {
	padding: 0 2px;
	-webkit-text-stroke: 1px #000; /* Bold outline for letters */
}

.letter-b {
	color: var(--yellow);
}
.letter-r {
	color: var(--red);
}
.letter-i {
	color: var(--blue);
}
.letter-x {
	color: var(--green);
}

.copyright-plate a {
	color: var(--blue); /* Pop of brand color */
	text-decoration: none;
}

/* Decorative Studs on the plate */
.plate-studs {
	width: 10px;
	height: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.plate-studs::before,
.plate-studs::after {
	content: "";
	width: 10px;
	height: 10px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.2);
}

/* SCATTERED FLOOR BRICKS */
.footer-decor {
	display: flex;
	gap: 10px;
}

.floor-brick {
	width: 30px;
	height: 15px;
	border: 2px solid #000;
	border-radius: 2px;
}

.floor-brick.yellow {
	background: var(--yellow);
	transform: rotate(-10deg);
}
.floor-brick.red {
	background: var(--red);
	transform: rotate(15deg);
}
.floor-brick.blue {
	background: var(--blue);
	transform: rotate(-5deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.main-footer {
		padding: 1rem;
	}

	.copyright-plate {
		padding: 0.8rem 1.5rem;
		border: 3px solid #000;
		gap: 10px;
		box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5);
	}

	.copyright-plate p {
		font-size: 0.8rem;
	}

	.plate-studs {
		width: 8px;
		height: 25px;
	}

	.faq-question {
		padding-right: 0;
	}
}

@media (max-width: 600px) {
	.copyright-plate {
		padding: 1rem;
		text-align: center;
		border: 2px solid #000;
		box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
	}

	.copyright-plate p {
		font-size: 0.75rem;
		letter-spacing: 0px;
	}

	.plate-studs {
		display: none;
	}

	.footer-decor {
		gap: 5px;
	}

	.floor-brick {
		width: 25px;
		height: 12px;
	}
}

@media (max-width: 480px) {
	.main-footer {
		padding: 0.75rem;
		border-top: 4px solid #000;
	}

	.copyright-plate {
		padding: 0.75rem 1rem;
		border: 2px solid #000;
	}

	.logo-text {
		font-size: 0.9rem;
	}
}