/* --- CUSTOM SCROLLBAR --- */
/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #050505; /* Matches body background */
}

::-webkit-scrollbar-thumb {
	background: #333; /* Dark Grey Handle */
	border-radius: 5px;
	border: 2px solid #050505; /* Padding effect */
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent); /* Turns Cyan on hover */
}

:root {
	--bg-color: #050505;
	--card-bg: #0f0f0f;
	--accent: #00F5D4; /* Brand Cyan */
	--text-main: #ffffff;
	--text-muted: #888888;
	--font-heading: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
	--cursor-size: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; cursor: none; /* HIDE DEFAULT CURSOR */ }

/* RE-ENABLE CURSOR FOR MOBILE/TOUCH */
@media (pointer: coarse) {
	* { cursor: auto !important; }
	.cursor-dot, .cursor-outline { display: none !important; }
}

body {
	background: linear-gradient(to bottom, #020202, #0e1416);

	/* IMPORTANT: Ensures gradient stays fixed and covers full height */
	background-attachment: fixed;
	min-height: 100vh;

	/* Keep existing styles */
	font-family: var(--font-body);
	color: var(--text-main);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 20px;
	overflow-x: hidden;
}

body.loading { overflow: hidden; } /* Stop scrolling while loading */

/* --- 2. CUSTOM CURSOR --- */
.cursor-dot {
	width: 8px; height: 8px;
	background-color: var(--accent);
	position: fixed; top: 0; left: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: 9999;
	pointer-events: none;
}

.cursor-outline {
	width: 40px; height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	position: fixed; top: 0; left: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: 9998;
	pointer-events: none;
	transition: width 0.2s, height 0.2s; /* Smooth resize on click if we added that */
}

/* --- 3. PRELOADER --- */
#preloader {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: #000;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: transform 0.8s cubic-bezier(0.8, 0, 0.2, 1);
}

#preloader.loaded { transform: translateY(-100%); } /* Slide up */

.loader-text { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-bottom: 20px; }
.blink { animation: blink 1s infinite; }
.loader-bar { width: 200px; height: 2px; background: #222; overflow: hidden; }
.bar-fill { width: 100%; height: 100%; background: var(--accent); animation: loading 1.5s ease-in-out infinite; }

@keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes blink { 50% { opacity: 0; } }

/* --- 4. GRAIN & GRID --- */
.grain-overlay {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
	pointer-events: none; z-index: 900;
}

.bento-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Updated Rows: Added extra 320px row for new services */
	grid-template-rows: 320px 80px 320px 320px 300px 300px 100px;
	gap: 20px;
	width: 100%; max-width: 1200px;
	z-index: 1; perspective: 1000px;
}

/* Add backgrounds for the new cards */
.app-bg { background-image: url('../../images/pic04.jpg'); } /* You need a new image */
.art-bg { background-image: url('../../images/pic05.jpg'); } /* You need a new image */
.soft-bg { background-image: url('../../images/pic06.jpg'); } /* You need a new image */

/* Mobile Adjustment */
@media (max-width: 900px) {
	.bento-container { display: flex; flex-direction: column; height: auto; }
}

/* --- 5. CARD ANIMATIONS (STAGGER) --- */
.reveal-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.3s, border-color 0.3s; /* Transition mix */
}

.reveal-item.visible { opacity: 1; transform: translateY(0); }

/* --- 6. CARD STYLES --- */
.card {
	background: var(--card-bg);
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,0.05);
	overflow: hidden;
	position: relative;
	display: flex; flex-direction: column;
}

.card:hover {
	border-color: rgba(255,255,255,0.2);
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.7);
	z-index: 10; /* Bring to front on hover */
}

/* HERO */
.hero-card { grid-column: span 3; padding: 40px; background: linear-gradient(150deg, #181818, #0a0a0a); }
.status-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 50px; font-size: 0.8rem; color: var(--text-muted); width: fit-content; }
.dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); }
.hero-card h1 { font-family: var(--font-heading); font-size: 4.5rem; line-height: 0.9; margin-top: auto; letter-spacing: -2px; }
.hero-card p { margin-top: 15px; color: var(--text-muted); font-size: 1.1rem; }

/* WIDGET */
.widget-card { grid-column: span 1; background: var(--accent); color: #000; padding: 30px; justify-content: space-between; text-align: center; }
.widget-header { display: flex; justify-content: space-between; font-weight: 700; opacity: 0.6; }
#clock { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 800; letter-spacing: -2px; }
.date-display { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; }

/* MARQUEE */
.marquee-card {
	grid-column: span 4; background: transparent; border: none; align-items: center;
}
.marquee-content {
	white-space: nowrap; overflow: hidden;
	font-family: var(--font-heading); font-size: 3.5rem; font-weight: 800;
	/* OUTLINE TEXT STYLE */
	color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2);
	text-transform: uppercase;
	animation: scroll 30s linear infinite;
}
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* SERVICES */
.service-card:nth-of-type(1) { grid-column: span 2; }
.service-card:nth-of-type(2) { grid-column: span 1; }
.service-card:nth-of-type(3) { grid-column: span 1; }

.service-card { text-decoration: none; color: white; background-size: cover; background-position: center; transition: transform 0.4s cubic-bezier(1, 1, 0.5, 1); }
.game-bg { background-image: url('../../images/pic01.png'); }
.web-bg  { background-image: url('../../images/pic02.jpg'); }
.growth-bg { background-image: url('../../images/pic03.jpg'); }

.service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); transition: opacity 0.4s; }
.card-content { position: relative; z-index: 2; padding: 30px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.card-top { display: flex; justify-content: space-between; }
.tag { background: rgba(255,255,255,0.1); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; backdrop-filter: blur(5px); }
.arrow-btn { width: 40px; height: 40px; background: white; color: black; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; transform: rotate(-45deg); transition: transform 0.3s; }
.service-card:hover .arrow-btn { transform: rotate(0deg) scale(1.1); background: var(--accent); }
.service-card h2 { font-family: var(--font-heading); font-size: 2rem; line-height: 1; }

/* CTA */
.cta-card { grid-column: span 4; flex-direction: row; align-items: center; justify-content: space-between; padding: 50px; background: #161616; }
.cta-text h2 { font-family: var(--font-heading); font-size: 3rem; color: var(--accent); line-height: 1; }
.cta-text p { color: #666; font-size: 1.1rem; }
.minimal-form { display: flex; gap: 0; width: 40%; border-bottom: 2px solid #333; position: relative; }
.minimal-form input { flex-grow: 1; background: transparent; border: none; color: white; font-size: 1.5rem; padding: 15px 0; font-family: var(--font-heading); }
.minimal-form input:focus { outline: none; }
.minimal-form button { background: transparent; border: none; color: white; font-size: 2rem; cursor: pointer; transition: color 0.3s; }
.minimal-form button:hover { color: var(--accent); }

/* MOBILE */
@media (max-width: 900px) {
	.bento-container { display: flex; flex-direction: column; height: auto; }
	.bento-container > div, .bento-container > a { min-height: 300px; width: 100%; }
	.marquee-card { display: none; }
	.cta-card { flex-direction: column; align-items: flex-start; gap: 30px; }
	.minimal-form { width: 100%; }
	.hero-card h1 { font-size: 3.5rem; }
}

/* --- 7. PRO PHYSICS UPGRADES --- */

/* Allow 3D rotation perspective */
.bento-container {
	perspective: 1000px; /* This creates the 3D space */
}

.card {
	/* Existing styles remain... add these: */
	transform-style: preserve-3d;
	will-change: transform; /* Performance optimization */
}

/* The Spotlight Glow Effect */
.card::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	border-radius: 24px;
	/* This gradient follows the mouse via JavaScript */
	background: radial-gradient(
			800px circle at var(--mouse-x) var(--mouse-y),
			rgba(255, 255, 255, 0.06),
			transparent 40%
	);
	opacity: 0; /* Hidden by default */
	transition: opacity 0.5s;
	pointer-events: none; /* Let clicks pass through */
	z-index: 3;
}

/* Show spotlight on hover */
.card:hover::after {
	opacity: 1;
}

/* Make inner content float slightly above the card (Parallax) */
.card-content, .hero-card h1, .widget-content, .cta-text {
	transform: translateZ(20px); /* Pushes text closer to the screen */
}

/* VIDEO HOVER STYLES */
.card-video {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0; /* Hidden by default */
	transition: opacity 0.5s ease;
	z-index: 1; /* Behind content but above background */
	mix-blend-mode: overlay; /* Blends coolly with the dark background */
}

.service-card:hover .card-video {
	opacity: 1; /* Show on hover */
}

.marquee-content i {
	color: var(--accent); /* Makes the icons Cyan */
	margin-right: 10px;
	font-weight: normal; /* Icons look better not bolded */
	vertical-align: middle;
}

.marquee-content span {
	margin-right: 60px; /* Space between items */
	display: inline-flex;
	align-items: center;
}

/* Safety Tweak for Mobile Physics */
@media (hover: none) {
	.card {
		transform: none !important; /* Stops cards from getting stuck tilted on phone */
	}
}

/* --- 8. NEW SECTIONS (REVIEWS, PROCESS, FOOTER) --- */

/* TESTIMONIALS (Spans 2 columns) */
.testimonial-card {
	grid-column: span 2;
	background: #1a1a1a;
	justify-content: center;
	align-items: flex-start;
	padding: 40px;
}

.quote-icon { font-size: 4rem; color: var(--accent); opacity: 0.3; line-height: 1; font-family: serif; }
.testimonial-slider { height: 120px; position: relative; width: 100%; overflow: hidden; }
.review {
	position: absolute; top: 0; left: 0; width: 100%;
	opacity: 0; transform: translateY(20px); transition: all 0.5s ease;
}
.review.active { opacity: 1; transform: translateY(0); }
.review p { font-size: 1.2rem; line-height: 1.4; margin-bottom: 20px; font-style: italic; color: #ddd; }
.client-info { display: flex; gap: 10px; font-size: 0.9rem; }
.client-name { font-weight: 700; color: white; }
.client-role { color: var(--accent); }

/* PROCESS (Spans 2 columns) */
.process-card {
	grid-column: span 2;
	background: #0f0f0f;
	padding: 40px;
}
.process-card h3 { font-family: var(--font-heading); color: var(--text-muted); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 30px; }
.steps-container { display: flex; align-items: center; justify-content: space-between; }
.step { text-align: center; position: relative; z-index: 2; }
.step-num {
	font-family: var(--font-heading); font-size: 3rem; color: #222; font-weight: 800;
	transition: color 0.3s;
}
.process-card:hover .step-num { color: var(--accent); } /* Cool hover effect */
.step h4 { margin-top: -10px; font-size: 1.1rem; }
.step p { font-size: 0.85rem; color: #666; }
.step-line { flex-grow: 1; height: 1px; background: #333; margin: 0 15px; margin-bottom: 20px; }

/* FOOTER (Spans full width) */
.footer-card {
	grid-column: span 4;
	height: 100px; /* Slim card */
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	background: #050505;
	border-color: rgba(255,255,255,0.02);
}
.footer-logo { font-family: var(--font-heading); font-weight: 700; margin-right: 20px; }
.copyright { color: #555; font-size: 0.9rem; }
.footer-links { display: flex; gap: 30px; }
.footer-links a { color: #888; text-decoration: none; transition: color 0.3s; font-size: 0.9rem; }
.footer-links a:hover { color: var(--accent); }

/* MOBILE ADJUSTMENTS FOR NEW CARDS */
@media (max-width: 900px) {
	.testimonial-card, .process-card, .footer-card { grid-column: span 1; }
	.footer-card { flex-direction: column; gap: 20px; height: auto; padding: 30px; text-align: center; }
	.footer-links { flex-direction: column; gap: 10px; }
	.step-line { display: none; } /* Hide lines on mobile */
	.steps-container { flex-direction: column; gap: 30px; }
}

/* --- 9. LOGO STYLES --- */

/* Hero Card Layout Updates */
.hero-card {
	/* We ensure the card is a flex column */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hero-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.brand-logo {
	width: 60px; /* Adjust this to make your main logo bigger/smaller */
	height: auto;
	object-fit: contain;
}

/* Adjust text positioning so it stays at the bottom */
.hero-content {
	margin-top: auto;
	padding-top: 20px;
}

/* Footer Logo Styling */
.footer-logo-img {
	height: 30px; /* Smaller size for footer */
	width: auto;
	margin-right: 15px;
	vertical-align: middle;
	opacity: 0.8; /* Slightly dimmed so it's not distracting */
	transition: opacity 0.3s;
}

.footer-left:hover .footer-logo-img {
	opacity: 1; /* Brighten on hover */
}

/* --- GLITCH EFFECT --- */
.glitch-hover {
	position: relative;
	display: inline-block;
}

.glitch-hover::before,
.glitch-hover::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #111; /* Matches card background */
}

.glitch-hover::before {
	left: 2px;
	text-shadow: -1px 0 #ff00c1;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim 5s infinite linear alternate-reverse;
	opacity: 0;
}

.glitch-hover::after {
	left: -2px;
	text-shadow: -1px 0 #00fff9;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim2 5s infinite linear alternate-reverse;
	opacity: 0;
}

/* Trigger on Hover */
.card:hover .glitch-hover::before,
.card:hover .glitch-hover::after {
	opacity: 1;
}

@keyframes glitch-anim {
	0% { clip: rect(13px, 9999px, 81px, 0); }
	20% { clip: rect(68px, 9999px, 9px, 0); }
	40% { clip: rect(23px, 9999px, 92px, 0); }
	60% { clip: rect(85px, 9999px, 43px, 0); }
	80% { clip: rect(46px, 9999px, 12px, 0); }
	100% { clip: rect(4px, 9999px, 64px, 0); }
}
@keyframes glitch-anim2 {
	0% { clip: rect(65px, 9999px, 20px, 0); }
	20% { clip: rect(10px, 9999px, 94px, 0); }
	40% { clip: rect(38px, 9999px, 3px, 0); }
	60% { clip: rect(93px, 9999px, 61px, 0); }
	80% { clip: rect(15px, 9999px, 78px, 0); }
	100% { clip: rect(54px, 9999px, 34px, 0); }
}

.booking-card {
	grid-column: span 2; /* Adjust based on your layout space */
	background: var(--accent);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.booking-content h2 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 10px; }
.booking-content p { margin-bottom: 20px; font-weight: 600; }

.book-btn {
	background: #000;
	color: #fff;
	padding: 15px 30px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.2s;
}

.book-btn:hover { transform: scale(1.05); }

/* --- FAQ CARD STYLING --- */
.faq-card {
	grid-column: span 2;
	background: #0f0f0f;
	padding: 30px;
	overflow-y: auto; /* Scrollable if too long */
}

.faq-card h3 {
	font-family: var(--font-heading);
	color: var(--text-muted);
	font-size: 0.9rem;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.faq-item {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	margin-bottom: 10px;
}

.faq-question {
	padding: 15px 0;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	transition: color 0.3s;
}

.faq-question:hover { color: var(--accent); }

.plus { font-size: 1.2rem; font-weight: 300; }

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	color: #aaa;
	font-size: 0.95rem;
	line-height: 1.5;
}

.faq-answer p { padding-bottom: 15px; }

/* Active State */
.faq-item.active .faq-answer { max-height: 100px; } /* Expand */
.faq-item.active .plus { transform: rotate(45deg); } /* Rotate + to x */

/* FIX: Arrow Icon Alignment */
.arrow-btn i {
	font-size: 1.2rem; /* Sets a consistent size */
	font-weight: normal; /* Icons don't need bold weight */
	line-height: 1; /* Removes vertical gap */
	display: block;
}

/* Ensure the button flexbox centers it perfectly */
.arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0; /* Remove padding to center icon perfectly */
}

/* --- PROJECT SHOWCASE STYLES --- */
.project-section { margin-top: 60px; margin-bottom: 40px; }
.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
	margin-top: 30px;
}

/* Base Project Card */
.project-card {
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.3s ease;
}
.project-card:hover { transform: translateY(-5px); border-color: var(--accent); }

.project-img { width: 100%; height: 180px; object-fit: cover; }
.project-info { padding: 20px; }
.project-info h3 { color: white; font-size: 1.2rem; margin-bottom: 5px; font-family: var(--font-heading); }
.project-info p { font-size: 0.9rem; color: #888; margin-bottom: 15px; }

/* Store Buttons (Game Dev) */
.store-btns { display: flex; gap: 10px; }
.store-btn {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
	background: #333; color: white; text-decoration: none;
	padding: 8px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; transition: 0.3s;
}
.store-btn:hover { background: var(--accent); color: black; }

/* Growth Stat Card */
.stat-card { background: #111; border: 1px solid var(--accent); padding: 25px; border-radius: 16px; text-align: center; }
.stat-number { font-size: 2.5rem; color: var(--accent); font-weight: 800; font-family: var(--font-heading); }
.stat-label { color: #fff; font-size: 1.1rem; margin-bottom: 5px; }
.stat-desc { font-size: 0.85rem; color: #666; }

/* --- INNER PAGE BENTO LAYOUT --- */
.inner-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 Columns */
	gap: 20px;
	padding-bottom: 50px;
}

/* Card Variances */
.inner-card {
	background: #0f0f0f;
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 24px;
	padding: 30px;
	transition: transform 0.3s ease;
}
.inner-card:hover { border-color: rgba(255,255,255,0.2); }

/* Hero Section (Spans full width) */
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }
.span-1 { grid-column: span 1; }

/* Typography Tweaks */
.inner-card h1 { font-size: 3.5rem; line-height: 1; margin-bottom: 20px; color: white; }
.inner-card h3 { color: var(--accent); margin-bottom: 10px; font-family: var(--font-heading); }
.big-number { font-size: 3rem; font-weight: 800; color: white; display: block; }
.tech-tag {
	display: inline-block; padding: 5px 15px;
	border: 1px solid #333; border-radius: 50px;
	font-size: 0.8rem; margin-right: 5px; margin-bottom: 5px;
	color: #888;
}

/* Hero Image Specifics */
.inner-hero-img {
	width: 100%; height: 250px; object-fit: cover; border-radius: 16px; margin-bottom: 20px;
	mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Mobile Adjustment */
@media (max-width: 900px) {
	.inner-grid { display: flex; flex-direction: column; }
}

/* --- FOOTER FIX FOR SERVICES PAGES --- */
.footer-clean {
	grid-column: span 3;
	background: transparent !important; /* Removes the black box background */
	border: none !important;            /* Removes any card borders */
	padding: 20px 0 !important;         /* Removes card padding */
	margin-top: 40px;                   /* Pushes it down from the content */
}

.inner-footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* A nice thin line separating it */
}

/* Mobile Alignment */
@media (max-width: 768px) {
	.inner-footer-content {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
}