/* ============================================
   INITIATI.COM - Modern CSS Enhancement Layer
   Version: 1.0 - Frontend Modernization
   ============================================ */

/* === CSS Custom Properties (Design Tokens) === */
:root {
	  /* Brand Colors - Refined Palette */
	  --primary: #e91e8c;
	  --primary-light: #ff4da6;
	  --primary-dark: #c4177a;
	  --primary-glow: rgba(233, 30, 140, 0.3);
	  
	  /* Neutral Colors */
	  --bg-dark: #1a1a1f;
	  --bg-card: #242429;
	  --bg-elevated: #2d2d33;
	  --text-primary: #ffffff;
	  --text-secondary: #b8b8c0;
	  --text-muted: #6b6b75;
	  
	  /* Accent Colors */
	  --accent-gold: #d4af37;
	  --accent-silver: #c0c0c0;
	  --success: #22c55e;
	  --warning: #f59e0b;
	  
	  /* Typography */
	  --font-display: 'Playfair Display', Georgia, serif;
	  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	  --font-accent: 'Cormorant Garamond', Georgia, serif;
	  
	  /* Spacing Scale */
	  --space-xs: 0.25rem;
	  --space-sm: 0.5rem;
	  --space-md: 1rem;
	  --space-lg: 1.5rem;
	  --space-xl: 2rem;
	  --space-2xl: 3rem;
	  --space-3xl: 4rem;
	  
	  /* Border Radius */
	  --radius-sm: 4px;
	  --radius-md: 8px;
	  --radius-lg: 12px;
	  --radius-xl: 20px;
	  --radius-full: 9999px;
	  
	  /* Shadows */
	  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
	  --shadow-glow: 0 0 30px var(--primary-glow);
	  
	  /* Transitions */
	  --transition-fast: 150ms ease;
	  --transition-base: 250ms ease;
	  --transition-slow: 400ms ease;
	  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Google Fonts Import === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');

/* === Base Enhancements === */
html {
	  scroll-behavior: smooth;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
}

body {
	  font-family: var(--font-body);
	  background: linear-gradient(180deg, var(--bg-dark) 0%, #0f0f12 100%);
	  color: var(--text-primary);
	  line-height: 1.7;
	  letter-spacing: 0.01em;
}

/* === Typography Refinements === */
h1, h2, h3, h4, h5, h6 {
	  font-family: var(--font-display);
	  font-weight: 600;
	  line-height: 1.2;
	  letter-spacing: -0.02em;
	  margin-bottom: var(--space-md);
}

h1 {
	  font-size: clamp(2.5rem, 5vw, 4rem);
	  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  background-clip: text;
}

h2 {
	  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
	  color: var(--text-primary);
}

h3 {
	  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
	  color: var(--primary-light);
}

p {
	  font-family: var(--font-body);
	  font-size: 1.05rem;
	  color: var(--text-secondary);
	  margin-bottom: var(--space-md);
}

/* Elegant Lead Text */
.lead, .intro-text {
	  font-family: var(--font-accent);
	  font-size: 1.35rem;
	  font-weight: 400;
	  color: var(--text-primary);
	  line-height: 1.8;
}

/* === Link Styles === */
a {
	  color: var(--primary);
	  text-decoration: none;
	  transition: color var(--transition-fast);
	  position: relative;
}

a:hover {
	  color: var(--primary-light);
}

/* Animated underline effect */
a:not(.btn):not(.nav-link):not(.navbar-brand)::after {
	  content: '';
	  position: absolute;
	  bottom: -2px;
	  left: 0;
	  width: 0;
	  height: 1px;
	  background: var(--primary-light);
	  transition: width var(--transition-base);
}

a:not(.btn):not(.nav-link):not(.navbar-brand):hover::after {
	  width: 100%;
}

/* === Modern Button Styles === */
.btn {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  gap: var(--space-sm);
	  padding: var(--space-md) var(--space-xl);
	  font-family: var(--font-body);
	  font-size: 1rem;
	  font-weight: 600;
	  letter-spacing: 0.02em;
	  border: none;
	  border-radius: var(--radius-md);
	  cursor: pointer;
	  transition: all var(--transition-base);
	  text-transform: uppercase;
}

.btn-primary, .btn {
	  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	  color: white;
	  box-shadow: var(--shadow-md), 0 0 20px var(--primary-glow);
}

.btn-primary:hover, .btn:hover {
	  transform: translateY(-2px);
	  box-shadow: var(--shadow-lg), 0 0 40px var(--primary-glow);
	  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

.btn-outline {
	  background: transparent;
	  border: 2px solid var(--primary);
	  color: var(--primary);
}

.btn-outline:hover {
	  background: var(--primary);
	  color: white;
}

/* === Card Components === */
.card, .panel, .box {
	  background: var(--bg-card);
	  border-radius: var(--radius-lg);
	  padding: var(--space-xl);
	  border: 1px solid rgba(255, 255, 255, 0.05);
	  box-shadow: var(--shadow-md);
	  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover, .panel:hover {
	  transform: translateY(-4px);
	  box-shadow: var(--shadow-lg), var(--shadow-glow);
	  border-color: rgba(233, 30, 140, 0.2);
}

/* === Navigation Enhancement === */
.header, .navbar {
	  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	  backdrop-filter: blur(10px);
	  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
	  font-family: var(--font-display);
	  font-size: 1.8rem;
	  font-weight: 700;
	  letter-spacing: -0.02em;
}

.nav-link {
	  font-family: var(--font-body);
	  font-weight: 500;
	  transition: all var(--transition-fast);
	  position: relative;
}

.nav-link::before {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  width: 0;
	  height: 2px;
	  background: white;
	  transition: all var(--transition-base);
	  transform: translateX(-50%);
}

.nav-link:hover::before {
	  width: 80%;
}

/* === Footer Enhancement === */
.footer {
	  background: linear-gradient(180deg, var(--bg-dark) 0%, #0a0a0c 100%);
	  padding: var(--space-3xl) var(--space-xl);
	  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* === Social Icons === */
.social-icons li a {
	  width: 48px;
	  height: 48px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: var(--bg-elevated);
	  border: 1px solid rgba(255, 255, 255, 0.1);
	  border-radius: var(--radius-full);
	  color: var(--primary);
	  font-size: 1.2rem;
	  transition: all var(--transition-base);
}

.social-icons li a:hover {
	  background: var(--primary);
	  color: white;
	  transform: translateY(-3px) scale(1.05);
	  box-shadow: var(--shadow-glow);
}

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

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

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

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

@keyframes shimmer {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

/* Animation Classes */
.animate-fadeInUp {
	  animation: fadeInUp 0.6s ease forwards;
}

.animate-fadeIn {
	  animation: fadeIn 0.4s ease forwards;
}

.animate-slideInLeft {
	  animation: slideInLeft 0.5s ease forwards;
}

/* Staggered Animation Delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* === Utility Classes === */
.text-gradient {
	  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--accent-gold) 100%);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  background-clip: text;
}

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

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

.bg-gradient {
	  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
}

.glow {
	  box-shadow: var(--shadow-glow);
}

.glass {
	  background: rgba(255, 255, 255, 0.05);
	  backdrop-filter: blur(10px);
	  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Section Spacing === */
section, .section {
	  padding: var(--space-3xl) 0;
}

.container {
	  max-width: 1200px;
	  margin: 0 auto;
	  padding: 0 var(--space-lg);
}

/* === Image Enhancements === */
img {
	  max-width: 100%;
	  height: auto;
	  border-radius: var(--radius-md);
}

.img-glow {
	  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* === Form Enhancements === */
input, textarea, select {
	  font-family: var(--font-body);
	  background: var(--bg-elevated);
	  border: 1px solid rgba(255, 255, 255, 0.1);
	  border-radius: var(--radius-md);
	  padding: var(--space-md);
	  color: var(--text-primary);
	  transition: all var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
	  outline: none;
	  border-color: var(--primary);
	  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
	  :root {
		      --space-xl: 1.5rem;
		      --space-2xl: 2rem;
		      --space-3xl: 2.5rem;
	}
	  
	h1 { font-size: 2rem; }
	h2 { font-size: 1.5rem; }
	  
	  .btn {
		      padding: var(--space-sm) var(--space-lg);
		      font-size: 0.9rem;
	}
}

/* === Print Styles === */
@media print {
	  body {
		      background: white;
		      color: black;
	}
	  
	  .header, .footer, .nav {
		      display: none;
	}
}