/* ============================================
   1. CSS Custom Properties (Variables)
   ============================================ */

:root {
	/* Primary Colors */
	--color-primary-50: #eff6ff;
	--color-primary-100: #dbeafe;
	--color-primary-200: #bfdbfe;
	--color-primary-300: #93c5fd;
	--color-primary-400: #60a5fa;
	--color-primary-500: #3b82f6;
	--color-primary-600: #2563eb;
	--color-primary-700: #1d4ed8;

	/* Neutral Colors */
	--color-neutral-50: #f8fafc;
	--color-neutral-100: #f1f5f9;
	--color-neutral-200: #e2e8f0;
	--color-neutral-300: #cbd5e1;
	--color-neutral-400: #94a3b8;
	--color-neutral-500: #64748b;
	--color-neutral-600: #475569;
	--color-neutral-700: #334155;
	--color-neutral-800: #1e293b;
	--color-neutral-900: #0f172a;

	/* Semantic Colors */
	--color-text-primary: var(--color-neutral-800);
	--color-text-secondary: var(--color-neutral-600);
	--color-text-muted: var(--color-neutral-500);
	--color-background: #ffffff;
	--color-surface: #ffffff;
	--color-border: var(--color-neutral-200);

	/* Font Families */
	--font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	/* Font Sizes */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--text-6xl: 3.75rem;

	/* Font Weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Line Heights */
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;

	/* Letter Spacing */
	--tracking-tight: -0.025em;
	--tracking-normal: 0;
	--tracking-wide: 0.025em;

	/* Spacing Scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Container */
	--container-lg: 1100px;

	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
}

/* ============================================
   2. Modern Reset & Base Styles
   ============================================ */

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

html {
	font-size: 16px;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text-primary);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
}

/* ============================================
   3. Typography
   ============================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-neutral-900);
}

:is(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

/* ============================================
   4. Layout & Container
   ============================================ */

.container {
	max-width: var(--container-lg);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--space-6);
}

/* ============================================
   5. Header Component
   ============================================ */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	height: 72px;
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border);
	display: flex;
	justify-content: center;
	align-items: center;
}

.header__content {
	max-width: var(--container-lg);
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-inline: var(--space-6);
	height: 72px;
}

.header__logo {
	flex-shrink: 0;
}

.header__logo img {
	height: 44px;
	width: auto;
	transition: opacity var(--transition-fast);
}

.header__logo:hover img {
	opacity: 0.8;
}

.header__cont {
	display: flex;
	align-items: center;
}

.cont__wrap {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

/* ============================================
   6. Hero Section (Main)
   ============================================ */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:
		url('https://images.unsplash.com/photo-1639322537228-f710d846310a?auto=format&fit=crop&w=1920&q=80');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(15, 23, 42, 0.9) 0%,
		rgba(30, 41, 59, 0.85) 50%,
		rgba(37, 99, 235, 0.7) 100%
	);
}

.hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: var(--space-8);
	max-width: 800px;
}

.hero .company__logo img {
	height: 120px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

.hero__title {
	font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
	font-weight: var(--font-extrabold);
	color: white;
	margin-bottom: var(--space-4);
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero__subtitle {
	font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
	color: rgba(255, 255, 255, 0.9);
	font-weight: var(--font-medium);
	max-width: 600px;
	margin-inline: auto;
}

/* ============================================
   7. Section Title
   ============================================ */

.section__title {
	font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
	text-align: center;
	margin-bottom: var(--space-12);
	color: var(--color-neutral-900);
}

/* ============================================
   8. Services Section
   ============================================ */

.services {
	padding: var(--space-20) 0;
	background-color: var(--color-neutral-50);
}

.services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-10) var(--space-8);
	background: white;
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--color-border);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
}

.service-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
}

.service-card__icon {
	font-size: 3rem;
	margin-bottom: var(--space-4);
}

.service-card__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-2);
}

.service-card__text {
	font-size: var(--text-base);
	color: var(--color-text-secondary);
}

/* ============================================
   9. Section Hero (Marketing & HR)
   ============================================ */

.section-hero {
	position: relative;
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.section-hero--marketing {
	background-image:
		url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1920&q=80');
}

.section-hero--hr {
	background-image:
		url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1920&q=80');
}

.section-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(37, 99, 235, 0.9) 0%,
		rgba(29, 78, 216, 0.85) 100%
	);
}

.section-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: var(--space-8);
	max-width: 800px;
}

.section-hero__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
	font-weight: var(--font-extrabold);
	color: white;
	margin-bottom: var(--space-4);
}

.section-hero__subtitle {
	font-size: clamp(var(--text-base), 2vw, var(--text-xl));
	color: rgba(255, 255, 255, 0.9);
	font-weight: var(--font-medium);
}

/* ============================================
   10. Content Section
   ============================================ */

.content-section {
	padding: var(--space-16) 0;
	background-color: white;
}

.content-section--alt {
	background-color: var(--color-neutral-50);
}

.content__intro {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	text-align: center;
	max-width: 800px;
	margin-inline: auto;
	margin-bottom: var(--space-12);
	line-height: var(--leading-relaxed);
}

/* ============================================
   11. Features Grid
   ============================================ */

.features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.feature-card {
	padding: var(--space-8);
	background: white;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: box-shadow var(--transition-base);
}

.content-section--alt .feature-card {
	background: white;
}

.feature-card:hover {
	box-shadow: var(--shadow-md);
}

.feature-card__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-primary-600);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-primary-200);
}

.feature-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.feature-card__list li {
	position: relative;
	padding-left: var(--space-5);
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
}

.feature-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	background-color: var(--color-primary-500);
	border-radius: 50%;
}

.emphasize {
	font-weight: var(--font-semibold);
	color: var(--color-neutral-800);
}

/* ============================================
   12. Contact Section
   ============================================ */

.contact-section {
	padding: var(--space-20) 0;
	background: linear-gradient(
		135deg,
		var(--color-neutral-900) 0%,
		var(--color-neutral-800) 100%
	);
}

.contact-section .section__title {
	color: white;
}

.contact-card {
	max-width: 400px;
	margin-inline: auto;
	padding: var(--space-8);
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-2xl);
	text-align: center;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-card__address {
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4);
}

.contact-card__email {
	font-size: var(--text-lg);
}

.contact-card .email {
	color: var(--color-primary-400);
}

.contact-card .email:hover {
	color: var(--color-primary-300);
}

/* ============================================
   13. Links & Email
   ============================================ */

.email,
.link {
	color: var(--color-primary-600);
	font-weight: var(--font-semibold);
	position: relative;
	display: inline;
	transition: color var(--transition-fast);
}

.email::after,
.link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-primary-500);
	transition: width var(--transition-base);
}

.email:hover::after,
.link:hover::after {
	width: 100%;
}

.email:hover,
.link:hover {
	color: var(--color-primary-700);
}

/* ============================================
   14. Footer Component
   ============================================ */

.footer {
	width: 100%;
	padding: var(--space-6);
	background-color: var(--color-neutral-900);
	border-top: 1px solid var(--color-neutral-800);
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer__content {
	font-size: var(--text-sm);
	color: var(--color-neutral-400);
}

.footer a {
	color: var(--color-primary-400);
	font-weight: var(--font-medium);
	transition: color var(--transition-fast);
}

.footer a:hover {
	color: var(--color-primary-300);
}

/* ============================================
   15. Focus States (Accessibility)
   ============================================ */

:focus-visible {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 2px;
}

a:focus-visible,
.service-card:focus-visible {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 4px;
	border-radius: var(--radius-md);
}

/* ============================================
   16. Responsive Styles
   ============================================ */

/* Small screens and up (640px) */
@media (min-width: 640px) {
	.services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.hero .company__logo img {
		height: 140px;
	}
}

/* Medium screens and up (768px) */
@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-8);
	}

	.header__content {
		padding-inline: var(--space-8);
	}

	.services {
		padding: var(--space-24) 0;
	}

	.content-section {
		padding: var(--space-20) 0;
	}

	.section-hero {
		min-height: 60vh;
	}
}

/* Large screens and up (1024px) */
@media (min-width: 1024px) {
	.features-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hero .company__logo img {
		height: 160px;
	}
}

/* Disable parallax on mobile for performance */
@media (max-width: 768px) {
	.hero,
	.section-hero {
		background-attachment: scroll;
	}
}