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

	:root {
		/* === PRIMARY PALETTE === */
		--olive-deep: #2D4A1C;
		--olive-rich: #3D5A27;
		--olive-medium: #557A35;
		--olive-light: #8AAD65;
		--olive-pale: #C5D9A4;
		
		/* === GOLD ACCENTS === */
		--gold-dark: #8B6914;
		--gold-primary: #C9A962;
		--gold-light: #E4D4A5;
		--gold-pale: #F5EED8;
		
		/* === EARTH TONES === */
		--earth-dark: #3D2B1F;
		--earth-medium: #5C4033;
		--earth-warm: #8B7355;
		--terracotta: #A67B5B;
		
		/* === NEUTRALS === */
		--cream-dark: #F5F0E6;
		--cream-primary: #FAF6F0;
		--cream-light: #FDFBF7;
		--white-natural: #FEFEFE;
		
		/* === TEXT === */
		--text-primary: #2A2318;
		--text-secondary: #5C5346;
		--text-muted: #8A8277;
		--text-light: #FAF6F0;
		
		/* === EFFECTS === */
		--shadow-soft: 0 4px 20px rgba(45, 74, 28, 0.08);
		--shadow-medium: 0 8px 40px rgba(45, 74, 28, 0.12);
		--shadow-strong: 0 16px 60px rgba(45, 74, 28, 0.16);
		--shadow-gold: 0 8px 32px rgba(201, 169, 98, 0.25);
		
		/* === TRANSITIONS === */
		--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		
		/* === SPACING === */
		--space-xs: 0.5rem;
		--space-sm: 1rem;
		--space-md: 1.5rem;
		--space-lg: 2rem;
		--space-xl: 3rem;
		--space-2xl: 5rem;
		--space-3xl: 8rem;
		
		/* === RADIUS === */
		--radius-sm: 4px;
		--radius-md: 8px;
		--radius-lg: 16px;
		--radius-xl: 24px;
		--radius-full: 9999px;
	}

	body {
		font-family: 'Outfit', sans-serif;
		background: linear-gradient(135deg, var(--cream-light) 0%, var(--cream-primary) 100%);
		color: var(--text-primary);
		line-height: 1.8;
		overflow-x: hidden;
	}

	/* Header Hero */
	.hero {
		position: relative;
		min-height: 70vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, var(--olive-deep) 0%, var(--olive-rich) 50%, var(--earth-dark) 100%);
		overflow: hidden;
	}

	.hero::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: 
			radial-gradient(circle at 20% 30%, rgba(201, 169, 98, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 80% 70%, rgba(138, 173, 101, 0.1) 0%, transparent 50%);
		pointer-events: none;
	}

	.hero-content {
		position: relative;
		z-index: 2;
		text-align: center;
		padding: var(--space-xl);
		max-width: 900px;
	}

	.hero-badge {
		display: inline-block;
		padding: var(--space-xs) var(--space-md);
		background: rgba(201, 169, 98, 0.15);
		border: 1px solid var(--gold-primary);
		border-radius: var(--radius-full);
		color: var(--gold-light);
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		margin-bottom: var(--space-md);
		animation: fadeInDown 0.8s ease-out;
	}

	.hero h1 {
		font-family: 'Cormorant Garamond', serif;
		font-size: clamp(2.5rem, 5vw, 4rem);
		font-weight: 600;
		color: var(--text-light);
		margin-bottom: var(--space-md);
		line-height: 1.2;
		animation: fadeInUp 0.8s ease-out 0.2s both;
	}

	.hero-subtitle {
		font-size: clamp(1.1rem, 2vw, 1.3rem);
		color: var(--gold-light);
		font-weight: 300;
		margin-bottom: var(--space-lg);
		animation: fadeInUp 0.8s ease-out 0.4s both;
	}

	.hero-divider {
		width: 80px;
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
		margin: var(--space-xl) auto;
		animation: fadeIn 0.8s ease-out 0.6s both;
	}

	/* Main Content */
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: var(--space-xl) var(--space-md);
	}

	.content-section {
		margin-bottom: var(--space-3xl);
	}

	.section-number {
		display: inline-block;
		font-family: 'Cormorant Garamond', serif;
		font-size: 3rem;
		font-weight: 700;
		color: var(--gold-primary);
		opacity: 0.3;
		margin-bottom: var(--space-sm);
	}

	.section-title {
		font-family: 'Cormorant Garamond', serif;
		font-size: clamp(2rem, 4vw, 2.8rem);
		font-weight: 600;
		color: var(--olive-deep);
		margin-bottom: var(--space-lg);
		position: relative;
		display: inline-block;
	}

	.section-title::after {
		content: '';
		position: absolute;
		bottom: -8px;
		left: 0;
		width: 60%;
		height: 3px;
		background: linear-gradient(90deg, var(--gold-primary), transparent);
	}

	.text-content {
		background: var(--white-natural);
		border-radius: var(--radius-lg);
		padding: var(--space-xl);
		box-shadow: var(--shadow-medium);
		margin-bottom: var(--space-lg);
		border-left: 4px solid var(--gold-primary);
	}

	.text-content p {
		font-size: 1.1rem;
		line-height: 1.9;
		color: var(--text-secondary);
		margin-bottom: var(--space-md);
	}

	.text-content p:last-child {
		margin-bottom: 0;
	}

	.text-content strong {
		color: var(--olive-deep);
		font-weight: 600;
	}

	.highlight-quote {
		background: linear-gradient(135deg, var(--gold-pale) 0%, var(--cream-primary) 100%);
		border-left: 5px solid var(--gold-primary);
		border-radius: var(--radius-md);
		padding: var(--space-lg);
		margin: var(--space-xl) 0;
		font-style: italic;
		box-shadow: var(--shadow-gold);
	}

	.highlight-quote p {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.3rem;
		line-height: 1.8;
		color: var(--earth-dark);
		margin-bottom: var(--space-sm);
	}

	.quote-attribution {
		text-align: right;
		font-size: 0.95rem;
		color: var(--text-muted);
		font-style: normal;
		margin-top: var(--space-md);
	}

	/* Hommage Special Section */
	.hommage-card {
		background: linear-gradient(135deg, var(--olive-deep) 0%, var(--earth-dark) 100%);
		border-radius: var(--radius-xl);
		padding: var(--space-2xl);
		margin: var(--space-3xl) 0;
		box-shadow: var(--shadow-strong);
		position: relative;
		overflow: hidden;
		border: 2px solid var(--gold-primary);
	}

	.hommage-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: 
			radial-gradient(circle at 10% 20%, rgba(201, 169, 98, 0.08) 0%, transparent 40%),
			radial-gradient(circle at 90% 80%, rgba(201, 169, 98, 0.08) 0%, transparent 40%);
		pointer-events: none;
	}

	.hommage-content {
		position: relative;
		z-index: 2;
	}

	.hommage-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-xs) var(--space-md);
		background: rgba(201, 169, 98, 0.2);
		border: 1px solid var(--gold-primary);
		border-radius: var(--radius-full);
		color: var(--gold-light);
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 1px;
		margin-bottom: var(--space-lg);
	}

	.hommage-title {
		font-family: 'Cormorant Garamond', serif;
		font-size: clamp(1.8rem, 3vw, 2.5rem);
		font-weight: 600;
		color: var(--gold-light);
		margin-bottom: var(--space-md);
		text-align: center;
	}

	.hommage-number {
		font-family: 'Cormorant Garamond', serif;
		font-size: 4rem;
		font-weight: 700;
		color: var(--gold-primary);
		text-align: center;
		margin: var(--space-md) 0;
		letter-spacing: 8px;
		text-shadow: 0 0 30px rgba(201, 169, 98, 0.4);
	}

	.hommage-text {
		color: var(--cream-dark);
		font-size: 1.05rem;
		line-height: 1.9;
		text-align: center;
		max-width: 800px;
		margin: 0 auto var(--space-md);
	}

	.hommage-prayer {
		text-align: center;
		color: var(--gold-light);
		font-size: 1.15rem;
		font-style: italic;
		margin-top: var(--space-xl);
		padding-top: var(--space-lg);
		border-top: 1px solid rgba(201, 169, 98, 0.3);
	}

	/* Khadouj Section */
	.khadouj-section {
		margin: var(--space-3xl) 0;
	}

	.khadouj-card {
		background: linear-gradient(135deg, var(--cream-primary) 0%, var(--white-natural) 100%);
		border-radius: var(--radius-xl);
		padding: var(--space-2xl);
		box-shadow: var(--shadow-medium);
		border: 2px solid var(--gold-primary);
		position: relative;
		overflow: hidden;
	}

	.khadouj-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5px;
		background: linear-gradient(90deg, var(--gold-primary), var(--terracotta), var(--gold-primary));
	}

	.khadouj-header {
		text-align: center;
		margin-bottom: var(--space-xl);
		padding-bottom: var(--space-lg);
		border-bottom: 2px solid var(--gold-pale);
	}

	.khadouj-icon {
		font-size: 4rem;
		margin-bottom: var(--space-md);
		filter: drop-shadow(0 4px 12px rgba(166, 123, 91, 0.3));
	}

	.khadouj-title {
		font-family: 'Cormorant Garamond', serif;
		font-size: clamp(2rem, 4vw, 2.8rem);
		font-weight: 600;
		color: var(--olive-deep);
		margin-bottom: var(--space-sm);
	}

	.khadouj-subtitle {
		font-size: 1.2rem;
		color: var(--text-muted);
		font-style: italic;
		font-weight: 300;
	}

	.khadouj-content {
		max-width: 900px;
		margin: 0 auto;
	}

	.khadouj-content > p {
		font-size: 1.1rem;
		line-height: 1.9;
		color: var(--text-secondary);
		margin-bottom: var(--space-lg);
		text-align: center;
	}

	.khadouj-testimony {
		background: linear-gradient(135deg, var(--gold-pale) 0%, var(--cream-dark) 100%);
		border-left: 4px solid var(--terracotta);
		border-radius: var(--radius-md);
		padding: var(--space-xl);
		margin: var(--space-2xl) 0;
	}

	.khadouj-testimony p {
		font-size: 1.05rem;
		line-height: 1.9;
		color: var(--earth-dark);
		margin-bottom: var(--space-md);
		font-style: italic;
	}

	.khadouj-testimony p:last-child {
		margin-bottom: 0;
	}

	.khadouj-dedication {
		text-align: center;
		padding: var(--space-lg);
		background: rgba(201, 169, 98, 0.08);
		border-radius: var(--radius-md);
		margin: var(--space-xl) 0;
	}

	.khadouj-dedication p {
		font-size: 1.05rem;
		color: var(--text-secondary);
		line-height: 1.8;
	}

	.khadouj-prayer {
		text-align: center;
		margin-top: var(--space-2xl);
		padding-top: var(--space-xl);
		border-top: 2px solid var(--gold-pale);
	}

	.khadouj-prayer p {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.3rem;
		color: var(--olive-deep);
		font-style: italic;
		font-weight: 500;
	}

	/* Timeline Style */
	.timeline {
		position: relative;
		padding-left: var(--space-xl);
		margin: var(--space-2xl) 0;
	}

	.timeline::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 3px;
		background: linear-gradient(180deg, var(--gold-primary), var(--olive-medium));
	}

	.timeline-item {
		position: relative;
		margin-bottom: var(--space-xl);
		padding-left: var(--space-lg);
	}

	.timeline-item::before {
		content: '';
		position: absolute;
		left: -34px;
		top: 8px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--gold-primary);
		border: 3px solid var(--cream-light);
		box-shadow: 0 0 0 4px rgba(201, 169, 98, 0.2);
	}

	.timeline-year {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.3rem;
		font-weight: 700;
		color: var(--olive-deep);
		margin-bottom: var(--space-xs);
	}

	.timeline-content {
		background: var(--white-natural);
		border-radius: var(--radius-md);
		padding: var(--space-md);
		box-shadow: var(--shadow-soft);
	}

	.timeline-content p {
		color: var(--text-secondary);
		line-height: 1.7;
	}

	/* Stats Grid */
	.stats-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: var(--space-lg);
		margin: var(--space-2xl) 0;
	}

	.stat-card {
		background: var(--white-natural);
		border-radius: var(--radius-lg);
		padding: var(--space-xl);
		text-align: center;
		box-shadow: var(--shadow-medium);
		border-top: 4px solid var(--gold-primary);
		transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
	}

	.stat-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-strong);
	}

	.stat-icon {
		font-size: 3rem;
		margin-bottom: var(--space-sm);
	}

	.stat-value {
		font-family: 'Cormorant Garamond', serif;
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--olive-deep);
		margin-bottom: var(--space-xs);
	}

	.stat-label {
		color: var(--text-muted);
		font-size: 0.95rem;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	/* Brand Story Section */
	.brand-story-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: var(--space-xl);
		margin: var(--space-2xl) 0;
	}

	.brand-card {
		background: linear-gradient(135deg, var(--white-natural) 0%, var(--cream-light) 100%);
		border-radius: var(--radius-lg);
		padding: var(--space-2xl);
		text-align: center;
		box-shadow: var(--shadow-medium);
		border: 2px solid var(--gold-primary);
		transition: all var(--transition-smooth);
		position: relative;
		overflow: hidden;
	}

	.brand-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, var(--gold-primary), var(--olive-medium));
	}

	.brand-card:hover {
		transform: translateY(-8px);
		box-shadow: var(--shadow-strong), var(--shadow-gold);
	}

	.brand-icon {
		font-size: 4rem;
		margin-bottom: var(--space-md);
		filter: drop-shadow(0 4px 8px rgba(45, 74, 28, 0.15));
	}

	.brand-subtitle {
		font-family: 'Cormorant Garamond', serif;
		font-size: 2.2rem;
		font-weight: 700;
		color: var(--olive-deep);
		margin-bottom: var(--space-md);
		letter-spacing: 2px;
	}

	.brand-card p {
		font-size: 1.05rem;
		line-height: 1.8;
		color: var(--text-secondary);
	}

	/* Slogan Card */
	.slogan-card {
		background: linear-gradient(135deg, var(--olive-deep) 0%, var(--olive-rich) 100%);
		border-radius: var(--radius-xl);
		padding: var(--space-2xl) var(--space-xl);
		margin: var(--space-2xl) 0;
		text-align: center;
		box-shadow: var(--shadow-strong);
		position: relative;
		overflow: hidden;
	}

	.slogan-card::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(201, 169, 98, 0.1) 0%, transparent 70%);
		animation: rotate 30s linear infinite;
	}

	.slogan-line {
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
		margin: var(--space-md) auto;
		max-width: 200px;
	}

	.slogan-text {
		font-family: 'Cormorant Garamond', serif;
		font-size: clamp(1.8rem, 4vw, 3rem);
		font-weight: 600;
		color: var(--gold-light);
		letter-spacing: 3px;
		margin: var(--space-md) 0;
		position: relative;
		z-index: 2;
		text-transform: uppercase;
	}

	.slogan-subtitle {
		font-size: 1.2rem;
		color: var(--cream-dark);
		font-weight: 300;
		letter-spacing: 2px;
		position: relative;
		z-index: 2;
	}

	/* Heritage Badge Section */
	.heritage-badge-section {
		margin: var(--space-3xl) 0;
		text-align: center;
	}

	.heritage-badge-large {
		display: inline-flex;
		align-items: center;
		gap: var(--space-md);
		padding: var(--space-lg) var(--space-2xl);
		background: linear-gradient(135deg, var(--gold-pale) 0%, var(--cream-primary) 100%);
		border: 3px solid var(--gold-primary);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-gold);
		transition: all var(--transition-smooth);
	}

	.heritage-badge-large:hover {
		transform: scale(1.05);
		box-shadow: 0 12px 48px rgba(201, 169, 98, 0.35);
	}

	.heritage-icon {
		font-size: 2.5rem;
	}

	.heritage-text {
		font-family: 'Cormorant Garamond', serif;
		font-size: 2rem;
		font-weight: 700;
		color: var(--olive-deep);
		letter-spacing: 3px;
		text-transform: uppercase;
	}

	/* CTA Section */
	.cta-section {
		background: linear-gradient(135deg, var(--olive-medium) 0%, var(--olive-deep) 100%);
		border-radius: var(--radius-xl);
		padding: var(--space-2xl);
		text-align: center;
		margin: var(--space-3xl) 0;
		box-shadow: var(--shadow-strong);
		position: relative;
		overflow: hidden;
	}

	.cta-section::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(201, 169, 98, 0.1) 0%, transparent 70%);
		animation: rotate 20s linear infinite;
	}

	.cta-content {
		position: relative;
		z-index: 2;
	}

	.cta-title {
		font-family: 'Cormorant Garamond', serif;
		font-size: clamp(2rem, 4vw, 3rem);
		font-weight: 600;
		color: var(--text-light);
		margin-bottom: var(--space-md);
	}

	.cta-text {
		color: var(--cream-dark);
		font-size: 1.15rem;
		margin-bottom: var(--space-xl);
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	.cta-button {
		display: inline-block;
		padding: var(--space-md) var(--space-2xl);
		background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-primary) 100%);
		color: var(--white-natural);
		text-decoration: none;
		border-radius: var(--radius-md);
		font-weight: 600;
		font-size: 1.1rem;
		box-shadow: var(--shadow-gold);
		transition: all var(--transition-smooth);
		border: 2px solid transparent;
	}

	.cta-button:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 40px rgba(201, 169, 98, 0.4);
		border-color: var(--gold-light);
	}

	/* Animations */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	/* Responsive */
	@media (max-width: 768px) {
		.hero {
			min-height: 60vh;
		}

		.hero-content {
			padding: var(--space-lg);
		}

		.container {
			padding: var(--space-lg) var(--space-md);
		}

		.text-content {
			padding: var(--space-lg);
		}

		.hommage-card {
			padding: var(--space-lg);
		}

		.timeline {
			padding-left: var(--space-lg);
		}

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

		.brand-story-grid {
			grid-template-columns: 1fr;
		}

		.brand-card {
			padding: var(--space-lg);
		}

		.slogan-text {
			font-size: 1.5rem;
			letter-spacing: 1px;
		}

		.slogan-subtitle {
			font-size: 1rem;
		}

		.heritage-badge-large {
			flex-direction: column;
			padding: var(--space-md) var(--space-lg);
		}

		.heritage-text {
			font-size: 1.5rem;
			letter-spacing: 2px;
		}

		.khadouj-card {
			padding: var(--space-lg);
		}

		.khadouj-icon {
			font-size: 3rem;
		}

		.khadouj-title {
			font-size: 1.8rem;
		}

		.khadouj-subtitle {
			font-size: 1rem;
		}

		.khadouj-testimony {
			padding: var(--space-lg);
		}
		
		.cta-section {
			padding: var(--space-lg);
		}
	}

	/* Accessibility */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}