/* =========================
   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: 300px; /* 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;
	}
}

/* =========================
   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;
	}
}

/* =========================
   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;
	}
}