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

/* CSS Variables for Modern Design System */
:root {
   --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   --dark-gradient: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
   
   --primary-color: #667eea;
   --secondary-color: #764ba2;
   --accent-color: #4facfe;
   --success-color: #10b981;
   --warning-color: #f59e0b;
   --error-color: #ef4444;
   
   --text-primary: #1a1a1a;
   --text-secondary: #6b7280;
   --text-light: #9ca3af;
   --background-primary: #ffffff;
   --background-secondary: #f8fafc;
   --background-dark: #0f172a;
   
   --border-color: #e5e7eb;
   --border-radius-sm: 8px;
   --border-radius-md: 12px;
   --border-radius-lg: 20px;
   --border-radius-xl: 24px;
   
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   
   --transition-fast: 0.15s ease-in-out;
   --transition-normal: 0.3s ease-in-out;
   --transition-slow: 0.5s ease-in-out;
}

/* General Reset */
.iAIg-body, h1, h2, h3, p, button, input {
   margin: 0;
   padding: 0;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   box-sizing: border-box;
}

/* Body Styles */
.iAIg-body {
   background: var(--background-secondary);
   color: var(--text-primary);
   line-height: 1.6;
   padding-bottom: 80px;
}
/* Hero Section Styles */
.iAIg-hero {
   background: var(--primary-gradient);
   color: #ffffff;
   text-align: center;
   padding: 120px 20px;
   position: relative;
   overflow: hidden;
}

.iAIg-hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="300" cy="700" r="120" fill="url(%23a)"/></svg>') no-repeat center;
   background-size: cover;
   opacity: 0.5;
   pointer-events: none;
}

.iAIg-hero-content {
   margin: 0 auto;
   max-width: 800px;
   position: relative;
   z-index: 2;
}

.iAIg-hero h1 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 700;
   margin-bottom: 24px;
   line-height: 1.2;
   background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.iAIg-hero p {
   font-size: clamp(1.1rem, 2.5vw, 1.3rem);
   margin-bottom: 40px;
   opacity: 0.95;
   font-weight: 400;
}

.iAIg-button-hero {
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   color: #ffffff;
   padding: 16px 32px;
   margin: 10px;
   border-radius: var(--border-radius-lg);
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-normal);
   position: relative;
   overflow: hidden;
}

.iAIg-button-hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s;
}

.iAIg-button-hero:hover::before {
   left: 100%;
}

.iAIg-button-hero:hover {
   background: rgba(255, 255, 255, 0.25);
   border-color: rgba(255, 255, 255, 0.4);
   transform: translateY(-2px);
   box-shadow: var(--shadow-xl);
}

/* Guru Showcase Styles */
.iAIg-guru-showcase {
   padding: 80px 20px;
   background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   text-align: center;
   position: relative;
}

.iAIg-guru-showcase h2 {
   font-family: 'Space Grotesk', sans-serif;
   background: var(--primary-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: clamp(2rem, 4vw, 2.5rem);
   font-weight: 700;
   margin-bottom: 60px;
   line-height: 1.3;
}

.iAIg-guru-grid-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   max-width: 1400px;
   margin: 0 auto;
}

.iAIg-guru-grid {
   display: flex;
   overflow-x: auto;
   width: 100%;
   height: 420px;
   gap: 24px;
   scroll-behavior: smooth;
   margin: 0 auto;
   position: relative;
   padding: 20px;
   cursor: grab;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.iAIg-guru-grid::-webkit-scrollbar {
   display: none; /* WebKit */
}

.iAIg-guru-card {
   width: calc(25% - 24px);
   height: 90%;
   background: var(--background-primary);
   border-radius: var(--border-radius-xl);
   text-align: center;
   box-shadow: var(--shadow-lg);
   cursor: pointer;
   transition: all var(--transition-normal);
   box-sizing: border-box;
   padding: 32px 24px;
   flex-shrink: 0;
   position: relative;
   border: 1px solid var(--border-color);
   overflow: hidden;
}

.iAIg-guru-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--accent-gradient);
   transform: scaleX(0);
   transition: transform var(--transition-normal);
}

.iAIg-guru-card:hover::before {
   transform: scaleX(1);
}

.iAIg-guru-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-2xl);
   border-color: var(--primary-color);
}

.iAIg-guru-card img {
   width: 64px;
   height: 64px;
   margin-bottom: 5px;
   border-radius: var(--border-radius-md);
   transition: transform var(--transition-normal);
}

.iAIg-guru-card:hover img {
   transform: scale(1.1);
}

.iAIg-guru-card h3 {
   background: var(--primary-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-family: 'Space Grotesk', sans-serif;
   font-size: 1.4rem;
   font-weight: 600;
   margin-bottom: 12px;
   line-height: 1.3;
}

.iAIg-guru-icon {
   width: auto;
   height: 64px;
}

.iAIg-guru-card p {
   font-size: 0.95rem;
   color: var(--text-secondary);
   line-height: 1.5;
   font-weight: 400;
}

.iAIg-guru-card.highlight {
   border: 2px solid var(--primary-color);
   box-shadow: var(--shadow-2xl);
   background: linear-gradient(135deg, var(--background-primary) 0%, #f8fafc 100%);
}

/* Update Date Tag Styles */
.iAIg-update-date-tag {
   position: absolute;
   top: 12px;
   right: 12px;
   background: var(--success-color);
   color: white;
   font-size: 10px;
   padding: 6px 10px;
   border-radius: 20px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   box-shadow: var(--shadow-md);
   z-index: 5;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.iAIg-guru-card {
   position: relative; /* Make sure card is positioned relative for absolute positioning of tag */
}

/* Scroll Button Styles */
.iAIg-scroll-button {
   background: var(--background-primary);
   color: var(--primary-color);
   border: 2px solid var(--border-color);
   padding: 16px;
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 20px;
   z-index: 10;
   border-radius: 50%;
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-lg);
   transition: all var(--transition-normal);
   backdrop-filter: blur(10px);
}

.iAIg-scroll-button:hover {
   background: var(--primary-color);
   color: white;
   transform: translateY(-50%) scale(1.1);
   box-shadow: var(--shadow-xl);
}

.iAIg-scroll-button:disabled {
   opacity: 0.3;
   cursor: not-allowed;
   pointer-events: none;
}

.iAIg-scroll-button.left {
   left: -28px;
}

.iAIg-scroll-button.right {
   right: -28px;
}

/* Footer Styles */
.iAIg-body footer {
   background: var(--dark-gradient);
   color: #ffffff;
   text-align: center;
   padding: 24px 0;
   width: 100%;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 1000;
   backdrop-filter: blur(10px);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   font-weight: 500;
}

/* Modal Styles */
.iAIg-modal {
   display: none;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(15, 23, 42, 0.8);
   backdrop-filter: blur(8px);
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

.iAIg-modal-content {
   background: var(--background-primary);
   padding: 40px;
   border-radius: var(--border-radius-xl);
   text-align: center;
   width: 500px;
   max-width: 90vw;
   position: relative;
   box-shadow: var(--shadow-2xl);
   border: 1px solid var(--border-color);
}

.iAIg-modal h2 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 2rem;
   background: var(--primary-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 16px;
   font-weight: 700;
}

.iAIg-modal p {
   color: var(--text-secondary);
   margin-bottom: 24px;
   font-size: 1.1rem;
}

.iAIg-email-input {
   width: 100%;
   padding: 16px;
   margin-bottom: 20px;
   box-sizing: border-box;
   border-radius: var(--border-radius-md);
   font-size: 16px;
   border: 2px solid var(--border-color);
   background: var(--background-secondary);
   transition: all var(--transition-normal);
   font-family: inherit;
}

.iAIg-email-input:focus {
   outline: none;
   border-color: var(--primary-color);
   background: var(--background-primary);
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.iAIg-close-button {
   position: absolute;
   top: 16px;
   right: 20px;
   cursor: pointer;
   font-size: 28px;
   color: var(--text-light);
   transition: color var(--transition-fast);
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--background-secondary);
}

.iAIg-close-button:hover {
   color: var(--error-color);
   background: #fef2f2;
}

.iAIg-modal-button {
   background: var(--primary-gradient);
   color: #ffffff;
   border: none;
   padding: 16px 32px;
   margin-top: 8px;
   cursor: pointer;
   border-radius: var(--border-radius-md);
   font-size: 1.1rem;
   font-weight: 600;
   transition: all var(--transition-normal);
   box-shadow: var(--shadow-md);
   font-family: inherit;
}

.iAIg-modal-button:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
}

/* Section for Platform Overview */
.iAIg-platform-overview {
   padding: 80px 40px;
   background: var(--background-primary);
   text-align: center;
   margin-top: 0;
   position: relative;
}

.iAIg-platform-overview::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.iAIg-platform-overview h2 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(2rem, 4vw, 2.8rem);
   background: var(--secondary-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 32px;
   font-weight: 700;
   line-height: 1.2;
}

.iAIg-platform-overview .iAIg-subheading {
   font-size: 1.2rem;
   color: var(--text-secondary);
   margin-bottom: 48px;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   line-height: 1.7;
   font-weight: 400;
}

.iAIg-key-features {
   text-align: left;
   max-width: 900px;
   margin: 0 auto 60px;
   background: var(--background-secondary);
   padding: 40px;
   border-radius: var(--border-radius-xl);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-sm);
}

.iAIg-key-features h3 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 1.8rem;
   background: var(--primary-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 32px;
   font-weight: 600;
   line-height: 1.3;
}

.iAIg-key-features ul {
   list-style-type: none;
   padding: 0;
}

.iAIg-key-features li {
   margin-bottom: 20px;
   font-size: 1.1rem;
   color: var(--text-secondary);
   padding: 16px 0;
   border-bottom: 1px solid var(--border-color);
   position: relative;
   padding-left: 24px;
   line-height: 1.6;
}

.iAIg-key-features li:last-child {
   border-bottom: none;
}

.iAIg-key-features li::before {
   content: '✨';
   position: absolute;
   left: 0;
   top: 16px;
   font-size: 1.2rem;
}

.iAIg-key-features li strong {
   color: var(--text-primary);
   font-weight: 600;
}

.iAIg-buttons {
   margin-top: 40px;
   margin-bottom: 40px;
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
}

.iAIg-button {
   background: var(--accent-gradient);
   color: #ffffff;
   padding: 16px 32px;
   margin: 0;
   border: none;
   border-radius: var(--border-radius-md);
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-normal);
   box-shadow: var(--shadow-md);
   font-family: inherit;
   position: relative;
   overflow: hidden;
}

.iAIg-button::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s;
}

.iAIg-button:hover::before {
   left: 100%;
}

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

/* Mobile Styles */
@media (max-width: 768px) {
   .iAIg-body {
      padding-bottom: 100px; /* Increase padding for mobile if footer height is larger */
   }   
   .iAIg-body footer {
      padding: 30px 0; /* Increase footer padding for touch devices */
      font-size: 1.2em; /* Adjust font size if necessary */
   }
   
   /* Hero Section Styles */
   .iAIg-hero {
      padding: 50px 10px;
   }
   .iAIg-hero h1 {
      font-size: 32px;
      margin-bottom: 10px;
   }
   .iAIg-hero p {
      font-size: 20px;
      margin-bottom: 10px;
   }
   
   /* Guru Showcase Styles */
   .iAIg-guru-showcase {
      padding: 20px 20px;
   }
   .iAIg-guru-showcase h2 {
      font-size: 32px;
      margin-bottom: 10px;
   }
   .iAIg-guru-grid {
      height: 350px;
      gap: 10px;
      padding: 10px;
   }
   .iAIg-guru-card {
      width: calc(33% - 10px);
      padding: 10px;
      padding-top: 30px;
   }
   .iAIg-guru-card img {
      width: 40%; 
      height: auto;
      margin-bottom: 2px;
      margin-top: 10px;
   }
   .iAIg-guru-card h3 {
      font-size: 16px;
      margin-bottom: 5px;
   }   
   .iAIg-guru-card p {
      font-size: 14px;
   }

   /* Mobile styles for update date tags */
   .iAIg-update-date-tag {
      top: 5px;
      right: 5px;
      font-size: 8px;
      padding: 3px 6px;
      border-radius: 10px;
      letter-spacing: 0.2px;
   }
 
   .iAIg-modal-content {
      width: 90vw;
   }
   
   .iAIg-email-input {
      width: 80%;
   }
}