/* -----------------------------------------------------------
   GLOBAL RESET + BASE
----------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Inter", sans-serif;
}

html {
	overflow-x: hidden;
}

body {
	background: #141414;
	color: #f5f5f0;
	font-family: "Inter", sans-serif;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	overflow-x: hidden;
}

/* -----------------------------------------------------------
   GLOBAL TYPOGRAPHY
----------------------------------------------------------- */
h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: #f5f5f0;
}

h2 {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	color: #f5f5f0;
}

h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #f5f5f0;
}

p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #b0b0b0;
}

/* -----------------------------------------------------------
   FULL WIDTH RULER
----------------------------------------------------------- */
.full-width-ruler {
	width: 100%;
	margin-left: 0;
	border: none;
	border-top: 0.5px solid #222;
	margin-top: 0;
	margin-bottom: 0;
}

/* -----------------------------------------------------------
   GLOBAL BUTTONS
----------------------------------------------------------- */
.cta-btn
 {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 30px;
	border: 1px solid #f5f5f0;
	font-size: 14px;
	text-decoration: none;
	color: #f5f5f0;
	transition: 0.3s;
	height: auto;
	width: auto;
	margin-top: 10px;
	
}

.cta-btn:hover
{
	background: #f5f5f0;
	color: #141414;
}



/* -----------------------------------------------------------
   HERO SECTION
----------------------------------------------------------- */
.hero {
	width: 100%;
	padding: 70px 5%;
}

.hero-container {
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

.hero-logo {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 120px;
	height: auto;
	z-index: 10;
}

.hero-image {
	width: 100%;
	overflow: hidden;
	border-radius: 30px;
	position: relative;
}

.hero-image img {
	width: 100%;
	height: auto;
	max-height: 600px;
	display: block;
	border-radius: 30px;
	object-fit: cover;
}

.hero-headline {
	position: absolute;
	bottom: 40px;
	left: 40px;
	margin: 0;
	font-size: 50px;
	font-weight: 500;
	color: #fff;
	line-height: 1.1;
	max-width: 600px;
}

.hero-info p {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(245, 245, 240, 0.9);
	margin: 0;
}

.hero-bottom {
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}

.hero-left {
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	opacity: 0.7;
}

.slash {
	font-size: 20px;
	margin-right: 10px;
	color: #ffffff;
}

.hero-right {
	max-width: 650px;
}

.hero-right h2 {
	margin:  0px 0px 20px;
}


/* -----------------------------------------------------------
   ABOUT
----------------------------------------------------------- */
.about {
	width: 100%;
	padding: 70px 5%;
}

/* -----------------------------------------------------------
   PROJECTS
----------------------------------------------------------- */
.projects {
	padding: 60px 5%;
}

.project-title-section {
	padding: 60px 5% 0;
}

.projects-header {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 35px;
}

.projects-title {
	font-size: 18px;
	font-weight: 400;
	color: #666666;
	white-space: nowrap;
	margin: 0;
	line-height: 1;
}

.projects-line {
	flex: 1;
	border: none;
	border-bottom: 0.5px solid #222;
	margin: 0;
	margin-bottom: 3px;
}

.projects-grid1 {
	max-width: 100%;
	margin: 0 auto 35px auto;
	display: grid;
	grid-template-columns: 59% 39%;
	grid-auto-rows: 500px;
	gap: 35px;
}

.projects-grid2 {
	max-width: 100%;
	margin: 0 auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px;
}

.projects-grid2 .card {
	aspect-ratio: 1 / 1;
	min-height: auto;
}

/* Cards */
.card {
	background: #1f1f1f;
	border-radius: 22px;
	padding: 0px;
	min-height: 500px;
	display: flex;
	flex-direction: column;
}

.card-cm {
	background-image: url('../assets/synthdriftcover.webp');
	background-size: cover;
	background-position: center;
}

.card-cm .card-content {
	margin-top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 50px 50px 50px 0;
}

.card-sd {
	background-image: url('../assets/creativemantiscover.webp');
	background-size: cover;
	background-position: center;
}

.card-sd .card-content {
	margin-top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 50px 50px 50px 0;
}

.card-st {
	background-image: url('../assets/LumaSynthCover.webp');
	background-size: cover;
	background-position: center;
}

.card-st .card-content {
	margin-top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 50px 50px 50px 0;
}

.card-mm {
	background-image: url('../assets/micmelocover.webp');
	background-size: cover;
	background-position: center;
}

.card-mm .card-content {
	margin-top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 50px 50px 50px 0;
}

.card-mm-left {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	width: clamp(80px, 12vw, 120px);
	height: 200px;
	background-color: rgba(39, 39, 44, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 0 10% 10% 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	top: 0;
}

.card-mm-left .card-icon {
	width: clamp(40px, 5vw, 70px);
	height: auto;
	filter: brightness(0) invert(1);
}

.card-mm-left p {
	font-size: clamp(8px, 1.2vw, 14px);
	color: #f5f5f0;
	line-height: 1.2;
	max-width: 100%;
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	text-align: center;
	padding: 0 clamp(8px, 1vw, 12px);
	box-sizing: border-box;
}

.card-cm-content {
	display: flex;
	gap: 20px;
	height: 100%;
	align-items: center;
}

.card-cm-left {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	width: clamp(80px, 12vw, 120px);
	height: 200px;
	background-color: rgba(39, 39, 44, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 0 10% 10% 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	top: 0;
}

.card-cm-left .card-icon {
	width: clamp(40px, 5vw, 70px);
	height: auto;
	filter: brightness(0) invert(1);
}

.badge-divider {
	width: 80%;
	border: none;
	border-top: 1px solid rgba(245, 245, 240, 0.4);
	margin: 6px 0;
}


.card-cm-left h3 {
	font-size: clamp(12px, 1.6vw, 16px);
	font-weight: 400;
	color: #f5f5f0;
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	max-width: 100%;
	padding: 0 clamp(8px, 1vw, 12px);
}

.card-cm-left p {
	font-size: clamp(8px, 1.2vw, 14px);
	color: #f5f5f0;
	line-height: 1.2;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	text-align: center;
	padding: 0 clamp(8px, 1vw, 12px);
}

.card-sd-content {
	display: flex;
	gap: 20px;
	height: 100%;
	align-items: center;
}

.card-sd-left {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	width: clamp(80px, 12vw, 120px);
	height: 200px;
	background-color: rgba(28, 57, 90, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 0 10% 10% 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	top: 0;
}

.card-sd-left .card-icon {
	width: clamp(45px, 5.5vw, 75px);
	height: auto;
	filter: brightness(0) invert(1);
}

.card-sd-left h3 {
	font-size: clamp(12px, 1.2vw, 14px);
	font-weight: 400;
	color: #f5f5f0;
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	max-width: 100%;
	padding: 0 clamp(8px, 1vw, 12px);
}

.card-sd-left p {
	font-size: clamp(8px, 1.2vw, 14px);
	color: #f5f5f0;
	line-height: 1.2;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	text-align: center;
	padding: 0 clamp(8px, 1vw, 12px);
}

.card-sd-left .cta-btn {
	width: fit-content;
	margin-top: 0;
	background-color: #070707;
}

.card-st-content {
	display: flex;
	gap: 20px;
	height: 100%;
	align-items: center;
}

.card-st-left {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	width: clamp(80px, 12vw, 120px);
	height: 200px;
	background-color: rgba(47, 138, 44, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 0 10% 10% 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	top: 0;
}

.card-st-left .card-icon {
    width: clamp(40px, 5.2vw, 80px);
	height: auto;
	filter: brightness(0) invert(1);
}

.card-st-left h3 {
	font-size: clamp(12px, 1.2vw, 1px);
	font-weight: 400;
	color: #f5f5f0;
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	max-width: 100%;
	padding: 0 clamp(8px, 1vw, 12px);
}

.card-st-left p {
	font-size: clamp(8px, 1.2vw, 14px);
	color: #f5f5f0;
	line-height: 1.2;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	text-align: center;
	padding: 0 clamp(8px, 1vw, 12px);
}

.card-cta {
	background: transparent;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	max-width: 100%;
}

.card-cta img {
	width: 100%;
	max-width: 250px;
	height: auto;
	margin-top: 20px;
}

/* -----------------------------------------------------------
   CREATIVEMANTIS
----------------------------------------------------------- */
.creativemantis {
	width: 100%;;
	display: grid;
	grid-template-columns: 1fr 2fr 1.5fr;
	grid-template-rows: auto auto;
	padding: 80px 5%;
	background: linear-gradient(to bottom, #141414, #0c0c0c);
	gap: 35px;
	align-items: start;
}

/* Creativemantis Left Column */
.creativemantis .left {
	flex: none;
	min-width: auto;
	
}

.creativemantis .left h1 {
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 20px;
	
}

.creativemantis .left .logo {
	margin-bottom: 40px;
}

.creativemantis .left .logo img {
	width: 250px;
	height: auto;
	object-fit: contain;
}

/* Creativemantis highlights Section */
.cm-highlights{
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 25px;
	margin-top: 10px;
}

.creativemantis .cm-highlights-column {
	background: ;
	border-radius: 20px;
	padding: 30px;
}

.creativemantis .cm-highlights-column.cm-highlights-image {
	padding: 30px;
}

.creativemantis .cm-highlights-column.cm-highlights-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.creativemantis .cm-highlights-column h3 {
	margin-bottom: 12px;
	color: rgb(136, 131, 105);
}

.creativemantis .cm-highlights-column p {
	margin: 0;
	line-height: 1.4;
}

/* Creativemantis Middle Column */
.creativemantis .middle {
	flex: none;
	text-align: center;
	max-width: 100%;
}

.creativemantis .middle .image-container {
	background: transparent;
	padding: 0;
	border-radius: 30px;
	overflow: hidden;
}

.creativemantis .middle .image-container img {
	width: 100%;
	border-radius: 30px;
	display: block;
}

.creativemantis .middle .tags {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.creativemantis .middle .tags span {
	background: #2a2a2a;
	padding: 6px 16px;
	border-radius: 20px;
	border: 1px solid #444;
	font-size: 13px;
	color: #f5f5f0;
}

.creativemantis .middle .project-title {
	font-size: 18px;
	margin-top: 20px;
	font-weight: 400;
}

/* Creativemantis Right Column */
.creativemantis .right {
	flex: none;
	text-align: center;
	max-width: 100%;
}

.creativemantis .right .image-container {
	background: transparent;
	padding: 0;
	border-radius: 30px;
	overflow: hidden;
}

.creativemantis .right .image-container img {
	width: 100%;
	border-radius: 30px;
	display: block;
}

.creativemantis .right .project-title {
	font-size: 18px;
	margin-top: 20px;
	font-weight: 400;
}

/* Creativemantis Bottom Section (Hero-bottom style) */
.creativemantis-bottom {
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	grid-column: 1 / -1;
}

.creativemantis-left {
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	opacity: 0.7;
}

.creativemantis-right {
	max-width: 700px;
}

.creativemantis-right h2 {
	margin:  0px 0px 20px;
}


/* -----------------------------------------------------------
   SYNTHDRIFT
----------------------------------------------------------- */
.synthdrift {
	width: 100%;
	padding: 70px 5% 50px;
	background: linear-gradient(to bottom, #0c0c0c, #141414);
	background-color: #0d0c0c;
}

.synthdrift-container {
	max-width: 100%;
	margin: 0 auto;
}

.synthdrift-image {
	width: 100%;
	overflow: hidden;
	border-radius: 30px;
	position: relative;
}

.synthdrift-image img {
	width: 100%;
	height: auto;
	max-height: 600px;
	display: block;
	border-radius: 0px;
	object-fit: cover;
}

.synthdrift-info {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 50px;
	max-width: 300px;
}

.synthdrift-info .card-icon {
	width: 200px;
	height: auto;
	filter: brightness(0) invert(1);
	margin-bottom: 15px;
	display: block;
}

.synthdrift-info h1 {
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	color: #24d224;
	margin-bottom: 10px;
}

.synthdrift-info p {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(245, 245, 240, 0.9);
	margin: 0;
}

.synthdrift-features {
	margin-top: 35px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px;
}

.synthdrift-left,
.synthdrift-middle {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 20px;
	position: relative;
}

.synthdrift-left img,
.synthdrift-middle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 20px;
}

.synthdrift-left-content {
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.synthdrift-left-content::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgb(66, 66, 66);
	transform: translateX(-50%);
}

.synthdrift-left-column h3 {
	font-size: 16px;
	font-weight: 500;
	color: #24d224;
	margin-bottom: 8px;
}

.synthdrift-left-column p {
	font-size: 14px;
	line-height: 1.2;
	color: rgba(245, 245, 240, 0.9);
	margin: 0;
}

.synthdrift-middle-content {
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.synthdrift-middle-content::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgb(66, 66, 66);
	transform: translateX(-50%);
}

.synthdrift-middle-column h3 {
	font-size: 16px;
	font-weight: 500;
	color: #24d224;
	margin-bottom: 8px;
}

.synthdrift-middle-column p {
	font-size: 14px;
	line-height: 1.2;
	color: rgba(245, 245, 240, 0.9);
	margin: 0;
}

.synthdrift-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px;
}

.synthdrift-content h2 {
	margin:  0px 0px 20px;
	max-width: 100%;
}

.card-sd-cta {
	background: transparent;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	max-width: 100%;
}



/* -----------------------------------------------------------
   SNAPTUNE
----------------------------------------------------------- */
.snaptune {
	width: 100%;
	padding: 70px 5% 0;
}

.snaptune-container {
	max-width: 100%;
	margin: 0 auto;
}

.snaptune-image {
	width: 100%;
	overflow: hidden;
	border-radius: 30px;
	position: relative;
}

.snaptune-image img {
	width: 100%;
	height: auto;
	max-height: 600px;
	display: block;
	border-radius: 30px;
	object-fit: cover;
}

.snaptune-info {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 50px;
	max-width: 300px;
}

.snaptune-info .card-icon {
	width: 100px;
	height: auto;
	filter: brightness(0) invert(1);
	margin-bottom: 15px;
	display: block;
}

.snaptune-info h1 {
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	color: #f5f5f0;
	margin-bottom: 10px;
}

.snaptune-info p {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(245, 245, 240, 0.9);
	margin: 0;
}

/* Snaptune About Section */
.snaptune-about {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px;
	margin-top: 40px;
}

.snaptune-about-left,
.snaptune-about-middle,
.snaptune-about-right {
	padding: 0px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
}

.snaptune-about-left {
	background: ;
	}

.snaptune-about-middle {
	background: ;
}

.snaptune-about-right {
	background: ;
}

.snaptune-about-left h2,
.snaptune-about-middle h2,
.snaptune-about-right h2 {
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: 600;
	color: #b3b1b1;

}

.snaptune-about-left hr,
.snaptune-about-middle hr,
.snaptune-about-right hr {
	border: none;
	border-top: 0.5px solid rgba(255, 255, 255, 0.15);
	margin: 15px 0;
}

.snaptune-about-left .icon-row {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
	justify-content: center;

}

.snaptune-about-left .icon-placeholder {
	width: 100%;
	max-width: 170px;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	padding: 0px;
}

.snaptune-about-middle .middle-image-placeholder {
	width: 100%;
	max-width: 170px;
	height: auto;
	object-fit: contain;
		align-items: flex-start;

	border-radius: 12px;
	padding: 5px;
}

.snaptune-about-left .snaptune-right-content,
.snaptune-about-middle .snaptune-right-content,
.snaptune-about-right .snaptune-right-content {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.snaptune-about-left .snaptune-right-left,
.snaptune-about-middle .snaptune-right-left,
.snaptune-about-right .snaptune-right-left {
	flex: 1;
}

.snaptune-about-left .snaptune-right-right,
.snaptune-about-middle .snaptune-right-right,
.snaptune-about-right .snaptune-right-right {
	display: none;
}

.snaptune-about-right .qr-placeholder {
	width: 100%;
	max-width: 170px;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	padding: 5px;
}

.snaptune-about-left p,
.snaptune-about-middle p,
.snaptune-about-right p {
	margin: 0;
	color: #918f8f;
	line-height: 1.4;
}

/* Creativemantis Bottom Section (Hero-bottom style) */
.snaptune-bottom {
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	grid-column: 1 / -1;
}

.snaptune-left {
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	opacity: 0.7;
}

.snaptune-right {
	max-width: 700px;
}

.snaptune-right h2 {
	margin:  0px 0px 20px;
}


/* -----------------------------------------------------------
   BRAND
----------------------------------------------------------- */
.brand {
	width: 100%;
	padding: 60px 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.brand-icon {
	position: absolute;
	width: clamp(50px, 12vw, 230px);
	height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	mix-blend-mode: screen;  
}

.brand-title {
	font-size: clamp(58px, 14vw, 270px);
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1.5px #292929;
	line-height: 1;
	text-align: center;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* -----------------------------------------------------------
   FOOTER
----------------------------------------------------------- */
.footer {
	background: #111;
	color: #fff;
	padding: 80px 5% 40px;
	margin-top: 0px;
}

.footer-container {
	max-width: 100%;
	margin: 0 auto;
}

.footer-content {
	display: grid;
	grid-template-columns: 1.5fr 2fr;
	gap: 60px;
	margin-bottom: 60px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-left {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 70%;
}

.footer-logo {
	width: 300px;
	height: auto;
	margin: 0;
}

.footer-tagline {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	line-height: 1.6;
}

.footer-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.footer-column h4 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-column a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 15px;
	transition: color 0.3s;
}

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

.footer-bottom {
	text-align: center;
}

.footer-bottom p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
}

/* -----------------------------------------------------------
   RESPONSIVE - HERO SECTION
----------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.hero {
		padding: 50px 4%;
	}
	
	.hero-headline {
		font-size: 40px;
		bottom: 30px;
		left: 30px;
		max-width: 400px;
	}
	
	.hero-bottom {
		margin-top: 25px;
		gap: 30px;
	}
	
	.hero-right {
		max-width: 600px;
	}
	
	.hero-logo {
		width: 100px;
		top: 25px;
		left: 25px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.hero {
		padding: 40px 4%;
	}
	
	.hero-image {
		border-radius: 20px;
	}
	
	.hero-image img {
		border-radius: 20px;
		max-height: 400px;
	}
	
	.hero-headline {
		font-size: 32px;
		bottom: 25px;
		left: 25px;
		max-width: 300px;
	}
	
	.hero-bottom {
		flex-direction: column;
		margin-top: 20px;
		gap: 20px;
	}
	
	.hero-right {
		max-width: 100%;
	}
	
	.hero-right h2 {
		font-size: 20px;
	}
	
	.hero-logo {
		width: 80px;
		top: 20px;
		left: 20px;
	}
}

/* Small mobile (optional) */
@media (max-width: 480px) {
	.hero {
		padding: 30px 4%;
	}
	
	.hero-image {
		border-radius: 15px;
		background-image: url('../assets/Herocover_mobile.webp');
		background-size: cover;
		background-position: center;
		min-height: 300px;
	}
	
	.hero-image img {
		border-radius: 15px;
		max-height: 300px;
		display: none;
	}
	
	.hero-headline {
		font-size: 24px;
		bottom: 20px;
		left: 20px;
		max-width: 250px;
	}
	
	.hero-bottom {
		margin-top: 15px;
		gap: 15px;
	}
	
	.hero-right h2 {
		font-size: 18px;
		margin: 0px 0px 15px;
	}
	
	.hero-info p,
	.hero-left {
		font-size: 14px;
	}
	
	.hero-logo {
		width: 70px;
		top: 15px;
		left: 15px;
	}
}

/* -----------------------------------------------------------
   RESPONSIVE - PROJECTS SECTION
----------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.projects {
		padding: 50px 4%;
	}
	
	.projects-grid1,
	.projects-grid2 {
		grid-template-columns: 1fr;
		grid-auto-rows: 450px;
		gap: 25px;
		margin-bottom: 25px;
	}
	
	.projects-grid2 .card {
		aspect-ratio: auto;
		min-height: 450px;
	}
	
	.card {
		padding: 40px 40px 40px 0;
		min-height: 450px;
	}
	
	.card-cm .card-content,
	.card-sd .card-content,
	.card-st .card-content,
	.card-mm .card-content {
		padding: 40px 40px 40px 0;
	}
	
	.card-cm-left,
	.card-sd-left,
	.card-st-left,
	.card-mm-left {
		width: 120px !important;
		min-width: 120px;
		max-width: none;
	}
	
	.card-cta {
		max-width: 70%;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.projects {
		padding: 40px 4%;
	}
	
	.projects-grid1,
	.projects-grid2 {
		grid-template-columns: 1fr;
		grid-auto-rows: 400px;
		gap: 20px;
		margin-bottom: 20px;
	}
	
	.projects-grid2 .card {
		aspect-ratio: auto;
		min-height: 400px;
	}
	
	.card {
		padding: 35px 35px 35px 0;
		min-height: 400px;
		border-radius: 18px;
	}
	
	.card-cm .card-content,
	.card-sd .card-content,
	.card-st .card-content,
	.card-mm .card-content {
		padding: 35px 35px 35px 0;
	}
	
	.card-cm-left,
	.card-sd-left,
	.card-st-left,
	.card-mm-left {
		width: 100px !important;
		min-width: 100px;
		max-width: none;
	}
	
	.card-cta {
		max-width: 85%;
	}
	
	.card-cta img {
		max-width: 200px;
		margin-top: 15px;
	}
}

/* Small mobile (optional) */
@media (max-width: 480px) {
	.projects {
		padding: 30px 4%;
	}
	
	.projects-grid1 {
		grid-auto-rows: 350px;
		gap: 15px;
		margin-bottom: 15px;
	}
	
	.projects-grid2 {
		grid-template-columns: 1fr;
		gap: 15px;
		margin-bottom: 15px;
	}
	
	.projects-grid2 .card {
		aspect-ratio: 1 / 1;
		min-height: auto;
	}
	
	.card {
		padding: 25px 25px 25px 0;
		min-height: 350px;
		border-radius: 15px;
	}
	
	.card-cm .card-content,
	.card-sd .card-content,
	.card-st .card-content,
	.card-mm .card-content {
		padding: 25px 25px 25px 0;
	}
	
	.card-cm-left,
	.card-sd-left,
	.card-st-left,
	.card-mm-left,
	.card-cta {
		max-width: 90%;
		gap: 8px;
	}
	
	.card-cm-left,
	.card-sd-left,
	.card-st-left,
	.card-mm-left {
		width: clamp(80px, 20vw, 120px) !important;
		min-width: 80px;
		height: 150px;
		padding: 0;
		top: 0;
	}
	
	.card-cm-left .card-icon,
	.card-sd-left .card-icon,
	.card-st-left .card-icon,
	.card-mm-left .card-icon {
		width: clamp(40px, 8vw, 60px);
	}
	
	.card-cm-left h3,
	.card-sd-left h3,
	.card-st-left h3,
	.card-mm-left h3 {
		font-size: clamp(12px, 2.5vw, 16px);
		padding: 0 clamp(6px, 1.5vw, 10px);
	}
	
	.card-cm-left p,
	.card-sd-left p,
	.card-st-left p,
	.card-mm-left p {
		font-size: clamp(8px, 2vw, 10px);
		padding: 0 clamp(6px, 1.5vw, 10px);
	}

	.card-cm {
		background-image: url('../assets/synthdrift_mobile.webp');
	}
	
	.card-cta img {
		max-width: 150px;
		margin-top: 12px;
	}
	
	.cta-btn {
		padding: 10px 20px;
		font-size: 13px;
	}
}

/* -----------------------------------------------------------
   RESPONSIVE - CREATIVEMANTIS SECTION
----------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.creativemantis {
		padding: 60px 4%;
		gap: 25px;
		grid-template-columns: 1fr 1.5fr 1fr;
	}
	
	.creativemantis .left h1 {
		font-size: 32px;
		margin-bottom: 15px;
	}
	
	.creativemantis .left .logo img {
		width: 200px;
	}
	
	.cm-highlights {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
	
	.creativemantis .cm-highlights-column {
		padding: 25px;
		border-radius: 16px;
	}
	
	.creativemantis .middle .image-container,
	.creativemantis .right .image-container {
		border-radius: 20px;
	}
	
	.creativemantis .middle .image-container img,
	.creativemantis .right .image-container img {
		border-radius: 20px;
	}
	
	.creativemantis-bottom {
		margin-top: 30px;
		gap: 30px;
	}
	
	.creativemantis-right {
		max-width: 600px;
	}
	
	/* Keep card badge positioning consistent */
}

/* Mobile */
@media (max-width: 768px) {
	.creativemantis {
		padding: 50px 4%;
		gap: 20px;
		grid-template-columns: 1fr;
	}
	
	.creativemantis .left {
		text-align: center;
	}
	
	.creativemantis .left h1 {
		font-size: 38px;
		margin-bottom: 12px;
	}
	
	.creativemantis .left p {
		font-size: 15px;
		margin-bottom: 12px;
	}
	.creativemantis .left .logo {
		margin-bottom: 30px;
	}
	
	.creativemantis .left .logo img {
		width: 520px;
	}
	
	.cm-highlights {
		grid-template-columns: 1fr;
		gap: 15px;
		margin-top: 5px;
	}
	
	.creativemantis .cm-highlights-column {
		padding: 20px;
		border-radius: 15px;
	}
	
	.creativemantis .middle .image-container,
	.creativemantis .right .image-container {
		border-radius: 18px;
	}
	
	.creativemantis .middle .image-container img,
	.creativemantis .right .image-container img {
		border-radius: 18px;
	}
	
	.creativemantis .middle .tags {
		margin-top: 15px;
		gap: 10px;
		flex-wrap: wrap;
	}
	
	.creativemantis .middle .tags span {
		padding: 5px 14px;
		font-size: 12px;
	}
	
	.creativemantis .middle .project-title,
	.creativemantis .right .project-title {
		font-size: 16px;
		margin-top: 15px;
	}
	
	.creativemantis-bottom {
		flex-direction: column;
		margin-top: 25px;
		gap: 20px;
	}
	
	.creativemantis-right {
		max-width: 100%;
	}
	
	.creativemantis-right h2 {
		font-size: 20px;
	}
}

/* Small mobile (optional) */
@media (max-width: 480px) {
	.creativemantis {
		padding: 40px 4%;
		gap: 15px;
	}
	
	.creativemantis .left h1 {
		font-size: 24px;
		margin-bottom: 10px;
	}
	
	.creativemantis .left .logo {
		margin-bottom: 25px;
	}
	
	.creativemantis .left .logo img {
		width: 280px;
	}
	
	.cm-highlights {
		gap: 12px;
	}
	
	.creativemantis .cm-highlights-column {
		padding: 18px;
		border-radius: 12px;
	}
	
	.creativemantis .cm-highlights-column h3 {
		font-size: 14px;
		margin-bottom: 8px;
	}
	
	.creativemantis .cm-highlights-column p {
		font-size: 14px;
	}
	
	.creativemantis .middle .image-container,
	.creativemantis .right .image-container {
		border-radius: 15px;
	}
	
	.creativemantis .middle .image-container img,
	.creativemantis .right .image-container img {
		border-radius: 15px;
	}
	
	.creativemantis .middle .tags {
		margin-top: 12px;
		gap: 8px;
	}
	
	.creativemantis .middle .tags span {
		padding: 4px 12px;
		font-size: 11px;
	}
	
	.creativemantis .middle .project-title,
	.creativemantis .right .project-title {
		font-size: 14px;
		margin-top: 12px;
	}
	
	.creativemantis-bottom {
		margin-top: 20px;
		gap: 15px;
	}
	
	.creativemantis-right h2 {
		font-size: 18px;
		margin: 0px 0px 15px;
	}
	
	.creativemantis-left,
	.creativemantis-right p {
		font-size: 14px;
	}
}

/* -----------------------------------------------------------
   RESPONSIVE - SYNTHDRIFT SECTION
----------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.synthdrift {
		padding: 60px 4% 40px;
	}
	
	.synthdrift-image {
		border-radius: 20px;
	}
	
	.synthdrift-image img {
		max-height: 500px;
	}
	
	.synthdrift-info {
		top: 50%;
		transform: translateY(-50%);
		left: 40px;
		max-width: 350px;
	}
	
	.synthdrift-info .card-icon {
		width: 170px;
		margin-bottom: 12px;
	}
	
	.synthdrift-info h1 {
		font-size: 34px;
	}
	
	.synthdrift-features {
		margin-top: 25px;
		gap: 25px;
	}
	
	.synthdrift-left,
	.synthdrift-middle {
		border-radius: 18px;
	}
	
	.synthdrift-left img,
	.synthdrift-middle img {
		border-radius: 18px;
	}
	
	.synthdrift-left-content,
	.synthdrift-middle-content {
		bottom: 25px;
		left: 25px;
		right: 25px;
		gap: 30px;
	}

	.card-sd-left {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	max-width: 50%;
}
	
}

/* Mobile */
@media (max-width: 768px) {
	.synthdrift {
		padding: 50px 4% 30px;
	}
	
	.synthdrift-image {
		border-radius: 18px;
	}
	
	.synthdrift-image img {
		max-height: 400px;
	}
	
	.synthdrift-info {
		top: 50%;
		transform: translateY(-50%);
		left: 30px;
		max-width: 300px;
	}
	
	.synthdrift-info .card-icon {
		width: 150px;
		margin-bottom: 10px;
	}
	
	.synthdrift-info h1 {
		font-size: 28px;
	}
	
	.synthdrift-info p {
		font-size: 14px;
	}
	
	.synthdrift-features {
		margin-top: 20px;
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.synthdrift-left,
	.synthdrift-middle {
		border-radius: 16px;
		aspect-ratio: auto;
		min-height: 350px;
	}
	
	.synthdrift-left img,
	.synthdrift-middle img {
		border-radius: 16px;
	}
	
	.synthdrift-left-content,
	.synthdrift-middle-content {
		bottom: 20px;
		left: 20px;
		right: 20px;
		gap: 25px;
	}
	
	.synthdrift-left-column h3,
	.synthdrift-middle-column h3 {
		font-size: 15px;
	}
	
	.synthdrift-left-column p,
	.synthdrift-middle-column p {
		font-size: 13px;
	}
	
	.synthdrift-right {
		padding: 15px;
	}
	
	.synthdrift-content h2 {
		font-size: 20px;
		margin: 0px 0px 15px;
	}

	.card-sd-cta {
		gap: 0px;	
	}

	.card-sd-left {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	max-width: 90%;
}
}

/* Small mobile (optional) */
@media (max-width: 480px) {
	.synthdrift {
		padding: 40px 4% 25px;
	}
	
	.synthdrift-image {
		border-radius: 15px;
		min-height: 300px;
		position: static;
	}
	
	.synthdrift-image img {
		height: 300px;
		object-fit: cover;
	}
	
	.synthdrift-info {
		position: static;
		transform: none;
		max-width: 100%;
		margin-top: 20px;
	}
	
	.synthdrift-info .card-icon {
		width: 220px;
		margin-bottom: 8px;
	}
	
	.synthdrift-info h1 {
		font-size: 22px;
		margin-bottom: 8px;
	}
	
	.synthdrift-info p {
		font-size: 13px;
	}
	
	.synthdrift-features {
		margin-top: 15px;
		gap: 15px;
	}
	
	.synthdrift-left,
	.synthdrift-middle {
		border-radius: 15px;
		min-height: 300px;
	}
	
	.synthdrift-left img,
	.synthdrift-middle img {
		border-radius: 15px;
	}
	
	.synthdrift-left-content,
	.synthdrift-middle-content {
		bottom: 18px;
		left: 18px;
		right: 18px;
		gap: 20px;
	}
	
	.synthdrift-left-column h3,
	.synthdrift-middle-column h3 {
		font-size: 14px;
		margin-bottom: 6px;
	}
	
	.synthdrift-left-column p,
	.synthdrift-middle-column p {
		font-size: 12px;
	}
	
	.synthdrift-right {
		padding: 12px;
	}
	
	.synthdrift-content h2 {
		font-size: 18px;
		margin: 0px 0px 12px;
	}
	
	.card-sd-cta {
		font-size: 14px;
	}
}

/* -----------------------------------------------------------
   RESPONSIVE - SNAPTUNE SECTION
----------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.snaptune {
		padding: 60px 4% 0;
	}
	
	.snaptune-image {
		border-radius: 20px;
	}
	
	.snaptune-image img {
		border-radius: 20px;
		max-height: 500px;
	}
	
	.snaptune-info {
		top: 50%;
		transform: translateY(-50%);
		left: 40px;
		max-width: 250px;
	}
	
	.snaptune-info .card-icon {
		width: 85px;
		margin-bottom: 12px;
	}
	
	.snaptune-info h1 {
		font-size: 34px;
	}
	
	.snaptune-about {
		gap: 25px;
		margin-top: 30px;
	}
	
	.snaptune-about-left,
	.snaptune-about-middle,
	.snaptune-about-right {
		padding: 25px;
		border-radius: 18px;
	}
	
	.snaptune-about-left h2,
	.snaptune-about-middle h2,
	.snaptune-about-right h2 {
		font-size: 18px;
		margin-bottom: 12px;
	}
	
	.snaptune-about-left .icon-placeholder,
	.snaptune-about-middle .middle-image-placeholder,
	.snaptune-about-right .qr-placeholder {
		max-width: 150px;
	}
	
	.snaptune-bottom {
		margin-top: 30px;
		gap: 30px;
	}
	
	.snaptune-right {
		max-width: 600px;
	}

.card-st-left {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	max-width: 50%;
}

}

/* Mobile */
@media (max-width: 768px) {
	.snaptune {
		padding: 50px 4% 0;
	}
	
	.snaptune-image {
		border-radius: 18px;
	}
	
	.snaptune-image > img {
		content: url('../assets/SnapTune_main_cover_mob.webp');
		border-radius: 18px;
		max-height: 400px;
	}
	
	.snaptune-info {
		top: 50%;
		transform: translateY(-50%);
		left: 30px;
		max-width: 200px;
	}
	
	.snaptune-info .card-icon {
		content: url('../assets/lumasynth.png');
		width: 75px;
		margin-bottom: 10px;
	}
	
	.snaptune-info h1 {
		font-size: 28px;
	}
	
	.snaptune-info p {
		font-size: 14px;
	}
	
	.snaptune-about {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 25px;
	}
	
	.snaptune-about-left,
	.snaptune-about-middle,
	.snaptune-about-right {
		padding: 20px;
		border-radius: 16px;
	}
	
	.snaptune-about-left h2,
	.snaptune-about-middle h2,
	.snaptune-about-right h2 {
		font-size: 20px;
		margin-bottom: 10px;
	}
	
	.snaptune-about-left p,
	.snaptune-about-middle p,
	.snaptune-about-right p {
		font-size: 20px;
	}
	
	.snaptune-about-left .icon-placeholder,
	.snaptune-about-middle .middle-image-placeholder,
	.snaptune-about-right .qr-placeholder {
		max-width: 140px;
	}
	
	.snaptune-bottom {
		flex-direction: column;
		margin-top: 25px;
		gap: 20px;
	}
	
	.snaptune-right {
		max-width: 100%;
	}
	
	.snaptune-right h2 {
		font-size: 20px;
	}
}

/* Small mobile (optional) */
@media (max-width: 480px) {
	.snaptune {
		padding: 40px 4% 0;
	}
	
	.snaptune-image {
		border-radius: 15px;
		position: static;
	}
	
	.snaptune-image img {
		border-radius: 15px;
		max-height: 300px;
	}
	
	.snaptune-info {
		position: static;
		transform: none;
		max-width: 100%;
		margin-top: 20px;
	}
	
	.snaptune-info .card-icon {
		content: url('../assets/lumasynth.png');
		width: 65px;
		margin-bottom: 8px;
	}
	
	.snaptune-info h1 {
		font-size: 22px;
		margin-bottom: 8px;
	}
	
	.snaptune-info p {
		font-size: 13px;
	}
	
	.snaptune-about {
		gap: 15px;
		margin-top: 20px;
	}
	
	.snaptune-about-left,
	.snaptune-about-middle,
	.snaptune-about-right {
		padding: 18px;
		border-radius: 15px;
	}
	
	.snaptune-about-left h2,
	.snaptune-about-middle h2,
	.snaptune-about-right h2 {
		font-size: 16px;
		margin-bottom: 10px;
	}
	
	.snaptune-about-left p,
	.snaptune-about-middle p,
	.snaptune-about-right p {
		font-size: 13px;
	}
	
	.snaptune-about-left .icon-row {
		gap: 12px;
		margin-bottom: 12px;
	}
	
	.snaptune-about-left .icon-placeholder,
	.snaptune-about-middle .middle-image-placeholder,
	.snaptune-about-right .qr-placeholder {
		max-width: 120px;
	}
	
	.snaptune-about-left .snaptune-right-content,
	.snaptune-about-middle .snaptune-right-content,
	.snaptune-about-right .snaptune-right-content {
		gap: 15px;
	}
	
	.snaptune-bottom {
		margin-top: 20px;
		gap: 15px;
	}
	
	.snaptune-right h2 {
		font-size: 18px;
		margin: 0px 0px 15px;
	}
	
	.snaptune-left,
	.snaptune-right p {
		font-size: 14px;
	}
}

/* -----------------------------------------------------------
   RESPONSIVE - BRAND SECTION
----------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.brand {
		padding: 50px 4%;
	}
	
	.brand-icon {
		width: clamp(45px, 11vw, 200px);
	}
	
	.brand-title {
		font-size: clamp(50px, 12vw, 230px);
	}
}

/* Mobile */
@media (max-width: 768px) {
	.brand {
		padding: 40px 4%;
	}
	
	.brand-icon {
		width: clamp(40px, 10vw, 150px);
	}
	
	.brand-title {
		font-size: clamp(55px, 13vw, 220px);
		-webkit-text-stroke: 0.8px #292929;
	}
}

/* Small mobile (optional) */
@media (max-width: 480px) {
	.brand {
		padding: 30px 4%;
	}
	
	.brand-icon {
		width: clamp(50px, 14vw, 140px);
	}
	
	.brand-title {
		font-size: clamp(50px, 14vw, 180px);
		-webkit-text-stroke: 0.7px #292929;
	}
}

/* -----------------------------------------------------------
   RESPONSIVE - FOOTER SECTION
----------------------------------------------------------- */

/* Large Desktop */
@media (min-width: 1440px) {
	.footer-links {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Tablet */
@media (max-width: 1024px) {
	.footer {
		padding: 60px 4% 30px;
	}
	
	.footer-content {
		gap: 50px;
		margin-bottom: 50px;
		padding-bottom: 30px;
	}
	
	.footer-left {
		max-width: 70%;
	}
	
	.footer-logo {
		width: 250px;
	}
	
	.footer-links {
		grid-template-columns: repeat(3, 1fr);
		gap: 35px;
	}
	
	.footer-column h4 {
		margin-bottom: 15px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.footer {
		padding: 50px 4% 25px;
	}
	
	.footer-content {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 40px;
		padding-bottom: 25px;
	}
	
	.footer-left {
		max-width: 100%;
		text-align: left;
		align-items: left;
	}
	
	.footer-logo {
		width: 560px;
	}
	
	.footer-tagline {
		font-size: 28px;
	}
	
	.footer-links {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px 20px;
		text-align: left;
	}
	
	.footer-column h4 {
		font-size: 18px;
		margin-bottom: 12px;
	}
	
	.footer-column a {
		font-size: 16px;
	}
	
	.footer-column ul {
		gap: 10px;
	}
	
	.footer-bottom p {
		font-size: 18px;
	}
}

/* Small mobile (optional) */
@media (max-width: 480px) {
	.footer {
		padding: 40px 4% 20px;
	}
	
	.footer-content {
		gap: 30px;
		margin-bottom: 30px;
		padding-bottom: 20px;
	}
	
	.footer-left {
		gap: 12px;
	}
	
	.footer-logo {
		width: 280px;
	}
	
	.footer-tagline {
		font-size: 14px;
	}
	
	.footer-links {
		gap: 25px;
	}
	
	.footer-column h4 {
		font-size: 12px;
		margin-bottom: 10px;
	}
	
	.footer-column a {
		font-size: 13px;
	}
	
	.footer-column ul {
		gap: 8px;
	}
	
	.footer-bottom p {
		font-size: 12px;
	}
}