/* Fylde WEB Tech - Custom Styles */
/* Design System: Teal color scheme with modern tech aesthetic */

/* ============================================
   ROOT VARIABLES & COLOR TOKENS
   ============================================ */

:root {
	/* Color System - Light Mode */
	--background: hsl(0, 0%, 100%);
	--foreground: hsl(220, 15%, 20%);
	--border: hsl(220, 10%, 88%);
	--card: hsl(220, 5%, 98%);
	--card-foreground: hsl(220, 15%, 20%);
	--card-border: hsl(220, 8%, 92%);
	--primary: hsl(186, 65%, 45%);
	--primary-foreground: hsl(186, 65%, 98%);
	--muted: hsl(220, 10%, 90%);
	--muted-foreground: hsl(220, 15%, 35%);

	/* Elevation overlays for hover/active states */
	--elevate-1: rgba(0, 0, 0, 0.03);
	--elevate-2: rgba(0, 0, 0, 0.08);

	/* Typography */
	--font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;

	/* Spacing & Layout */
	--radius: 0.5rem;
	--shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
	--shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0px 10px 20px -3px rgba(0, 0, 0, 0.12);
}

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

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family);
	background-color: var(--background);
	color: var(--foreground);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.container {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.section {
	padding: 5rem 0;
}

.section-alt {
	background-color: rgba(220, 220, 230, 0.15);
}

/* ============================================
   GRID SYSTEM
   ============================================ */

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

.grid-2 {
	grid-template-columns: 1fr;
}

.grid-3 {
	grid-template-columns: 1fr;
}

.grid-4 {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.md\\:grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.md\\:grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.lg\\:grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.lg\\:grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

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

h1 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1.5rem;
}

h2 {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

p {
	margin-bottom: 1rem;
}

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

.text-muted {
	color: var(--muted-foreground);
}

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

.text-lg {
	font-size: 1.125rem;
}

.text-xl {
	font-size: 1.25rem;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
}

.btn-primary {
	background-color: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}

.btn-primary:hover {
	background-color: hsl(186, 65%, 40%);
}

.btn-lg {
	padding: 1rem 2rem;
	font-size: 1.125rem;
}

.btn-icon {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 50%;
}

.btn-ghost {
	background-color: transparent;
	color: var(--foreground);
}

.btn-ghost:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

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

.card {
	background-color: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	transition: all 0.3s;
}

.card-highlight {
	border-left: 4px solid var(--primary);
}

/* ============================================
   NAVIGATION / HEADER
   ============================================ */

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: all 0.3s;
}

header.scrolled {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-sm);
}

nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 5rem;
	padding: 0 1.5rem;
	max-width: 80rem;
	margin: 0 auto;
}

.logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--foreground);
}

.logo-icon {
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--primary);
	color: var(--primary-foreground);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.125rem;
}

.nav-links {
	display: none;
	gap: 0.25rem;
}

@media (min-width: 768px) {
	.nav-links {
		display: flex;
	}
}

.nav-link {
	padding: 0.5rem 1rem;
	color: var(--foreground);
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: color 0.2s;
	font-size: 1rem;
}

.nav-link:hover {
	color: var(--primary);
}

.nav-link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 1rem;
	right: 1rem;
	height: 2px;
	background-color: var(--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s;
}

.nav-link:hover::after {
	transform: scaleX(1);
}

.menu-toggle {
	display: flex;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0.5rem;
}

@media (min-width: 768px) {
	.menu-toggle {
		display: none;
	}
}

.mobile-menu {
	position: fixed;
	top: 5rem;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--background);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	z-index: 999;
}

.mobile-menu .nav-link {
	font-size: 1.5rem;
	padding: 0.75rem;
}

.mobile-menu.hidden {
	display: none;
}

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

.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: 5rem;
	position: relative;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(63, 182, 185, 0.05) 0%,
		var(--background) 100%
	);
	z-index: -1;
}

.hero-content {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 768px) {
	.hero-content {
		gap: 3rem;
	}
}

@media (min-width: 1024px) {
	.hero-content {
		grid-template-columns: 1fr 1fr;
	}
}

.hero-illustration {
	width: 100%;
	max-width: 100%;
	border-radius: 1rem;
	background: linear-gradient(
		135deg,
		rgba(63, 182, 185, 0.2) 0%,
		rgba(63, 182, 185, 0.05) 100%
	);
	border: 1px solid rgba(63, 182, 185, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hero-icon-wrapper {
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	background-color: rgba(63, 182, 185, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Responsive image utility */
.img-fluid {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   CALLOUT BOXES
   ============================================ */

.callout {
	padding: 3rem;
	background-color: var(--card);
	border: 1px solid var(--card-border);
	border-left: 4px solid var(--primary);
	border-radius: var(--radius);
	margin: 2rem 0;
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about-grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.avatar {
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	border: 4px solid var(--primary);
	background-color: rgba(63, 182, 185, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0 auto;
	box-shadow: var(--shadow-lg);
}

@media (min-width: 640px) {
	.avatar {
		width: 20rem;
		height: 20rem;
	}
}

/* ============================================
   SERVICE BENEFITS
   ============================================ */

.benefit-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.benefit-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.benefit-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius);
	background-color: rgba(63, 182, 185, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.benefit-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--primary);
}

/* ============================================
   SERVICES SECTION
   ============================================ */

.service-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.service-icon {
	width: 4rem;
	height: 4rem;
	border-radius: var(--radius);
	background-color: rgba(63, 182, 185, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-icon svg {
	width: 2rem;
	height: 2rem;
	color: var(--primary);
}

.service-illustration {
	aspect-ratio: 16/9;
	border-radius: var(--radius);
	background: linear-gradient(
		135deg,
		rgba(63, 182, 185, 0.1) 0%,
		rgba(63, 182, 185, 0.05) 100%
	);
	border: 1px solid rgba(63, 182, 185, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================
   PORTFOLIO SECTION
   ============================================ */

.portfolio-item {
	cursor: pointer;
}

.portfolio-image {
	aspect-ratio: 16/9;
	background: linear-gradient(
		135deg,
		rgba(63, 182, 185, 0.2) 0%,
		rgba(63, 182, 185, 0.05) 100%
	);
	border-radius: var(--radius) var(--radius) 0 0;
	border-bottom: 1px solid var(--card-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	font-weight: 700;
	color: rgba(63, 182, 185, 0.3);
}

.portfolio-content {
	padding: 1rem;
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonial-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.testimonial-quote {
	font-style: italic;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.testimonial-avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: rgba(63, 182, 185, 0.1);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	flex-shrink: 0;
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.contact-options {
	display: grid;
	gap: 2rem;
	max-width: 42rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.contact-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

.contact-card {
	padding: 2rem;
	text-align: center;
}

.contact-icon {
	width: 3rem;
	height: 3rem;
	color: var(--primary);
	margin: 0 auto 1rem;
}

.contact-link {
	color: var(--primary);
	font-weight: 500;
	text-decoration: none;
}

.contact-link:hover {
	text-decoration: underline;
}

/* ============================================
   FOOTER
   ============================================ */

footer {
	background: linear-gradient(
		135deg,
		rgba(63, 182, 185, 0.95) 0%,
		rgb(63, 182, 185) 100%
	);
	color: var(--primary-foreground);
	padding: 3rem 0;
}

.footer-grid {
	display: grid;
	gap: 2rem;
	text-align: center;
}

@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
		text-align: left;
	}

	.footer-grid > div:last-child {
		text-align: right;
	}
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-link {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 1rem;
	transition: color 0.2s;
}

.footer-link:hover {
	color: white;
}

.social-links {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

@media (min-width: 768px) {
	.social-links {
		justify-content: center;
	}
}

.social-link {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
	transition: background-color 0.2s;
}

.social-link:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   HOVER EFFECTS & ANIMATIONS
   ============================================ */

.hover-elevate {
	position: relative;
	transition: transform 0.2s, box-shadow 0.2s;
}

.hover-elevate:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.hover-elevate::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--elevate-1);
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}

.hover-elevate:hover::before {
	opacity: 1;
}

.hover-elevate:active::before {
	background-color: var(--elevate-2);
}

/* Fade-in animation for sections */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
	display: none !important;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.gap-1 {
	gap: 0.25rem;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-3 {
	gap: 0.75rem;
}

.gap-4 {
	gap: 1rem;
}

.gap-6 {
	gap: 1.5rem;
}

.gap-8 {
	gap: 2rem;
}

.mb-4 {
	margin-bottom: 1rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mb-8 {
	margin-bottom: 2rem;
}

.mb-12 {
	margin-bottom: 3rem;
}

.mt-4 {
	margin-top: 1rem;
}

.space-y-4 > * + * {
	margin-top: 1rem;
}

.space-y-6 > * + * {
	margin-top: 1.5rem;
}

.space-y-8 > * + * {
	margin-top: 2rem;
}

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

@media (max-width: 639px) {
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.875rem;
	}

	.section {
		padding: 3rem 0;
	}

	.callout {
		padding: 2rem;
	}
}

@media (min-width: 640px) {
	.sm\\:text-5xl {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.lg\\:text-6xl {
		font-size: 3.75rem;
	}
}