/*
 * ai‑edu Website Stylesheet
 *
 * This stylesheet defines the core look and feel for the ai‑edu
 * training company website. The visual language combines Swiss
 * precision with modern SaaS design: clean layouts, generous
 * whitespace and a restrained colour palette built around our
 * signature blue. Wherever possible the stylesheet uses CSS
 * custom properties to simplify maintenance and ensure that dark
 * text on light backgrounds remains easily readable. The layout
 * adapts gracefully to a variety of screen sizes without
 * sacrificing clarity or conversion focus.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* Root variables make it easy to tweak the colour palette or
   typography in one place. */
:root {
  /* Modern 2025 color palette with more vibrant, contemporary colors */
  --primary-color: #3B82F6; /* vibrant blue */
  --primary-color-dark: #2563EB; /* darker shade for hover states */
  --primary-color-light: #60A5FA; /* lighter accent */
  --secondary-color: #8B5CF6; /* vibrant purple */
  --secondary-color-dark: #7C3AED; /* darker purple */
  --accent-color: #06B6D4; /* cyan accent */
  --success-color: #10B981; /* emerald green */
  --warning-color: #F59E0B; /* amber */

  --text-color: #0F172A; /* deep slate for better contrast */
  --text-secondary: #475569; /* slate grey for secondary text */
  --muted-text-color: #64748B; /* medium slate for muted text */
  --background-color: #FFFFFF; /* pure white */
  --surface-color: #F8FAFC; /* very light slate */
  --surface-elevated: #F1F5F9; /* elevated surface */
  --border-color: #E2E8F0; /* soft border */
  --border-light: #F1F5F9; /* lighter border */

  /* Modern typography scale */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-display: 'Poppins', var(--font-family-sans);

  /* Fluid type scale */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --max-width: 1280px;
  --max-width-prose: 65ch;

  /* Modern gradient palette for 2025 design trends */
  --gradient-primary: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --gradient-blue: linear-gradient(135deg, #667EEA 0%, #3B82F6 100%);
  --gradient-purple: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
  --gradient-cyan: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --gradient-soft: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);

  /* Modern shadows - layered for depth */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* Colored shadows for depth */
  --shadow-primary: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
  --shadow-secondary: 0 10px 25px -5px rgba(139, 92, 246, 0.3);

  --surface-shadow: rgba(0, 0, 0, 0.05);
  --hero-text-color: #ffffff;

  /* Page background with subtle gradient */
  --page-background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);

  /* Light hero values */
  --hero-light-bg: #FAFBFC;
  --hero-light-text: #0F172A;
  --accent-blue: #3B82F6;
  --accent-blue-dark: #2563EB;

  /* Animation timings */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 350ms;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

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

body {
  font-family: var(--font-family-sans);
  color: var(--text-color);
  background: var(--page-background);
  line-height: 1.6;
  font-size: var(--text-base);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Modern typography improvements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  line-height: 1.7;
  margin-bottom: 1em;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all var(--transition-base) var(--ease-smooth);
  position: relative;
}

a:hover,
a:focus {
  color: var(--primary-color-dark);
}

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

header {
  width: 100%;
  /* Modern glassmorphism effect */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all var(--transition-base) var(--ease-smooth);
}

header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-color-light), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

header:hover::after {
  opacity: 0.5;
}

/* Navigation container */
.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo styling with modern gradient text */
.logo {
  font-weight: 700;
  font-size: var(--text-2xl);
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--text-color) 0%, var(--primary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all var(--transition-base) var(--ease-smooth);
}

.logo:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.logo .dot {
  width: 8px;
  height: 8px;
  margin: 0 var(--space-2);
  background: var(--gradient-blue);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

nav ul li {
  font-weight: 500;
}

nav ul li a {
  color: var(--text-color);
  padding: var(--space-2) var(--space-3);
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
}

nav ul li a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-blue);
  transition: all var(--transition-base) var(--ease-smooth);
  transform: translateX(-50%);
}

nav ul li a:hover {
  color: var(--primary-color);
  background: var(--surface-color);
  text-decoration: none;
}

nav ul li a:hover::before {
  width: 80%;
}

/* Dropdown navigation styles */
nav ul li.dropdown {
  position: relative;
}
nav ul li.dropdown > a::after {
  content: '▼';
  font-size: 0.6rem;
  margin-left: var(--space-2);
  transition: transform var(--transition-base);
}

nav ul li.dropdown:hover > a::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  /* Modern glassmorphism for dropdown */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-xl);
  padding: var(--space-2) 0;
  min-width: 200px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all var(--transition-base) var(--ease-smooth);
  z-index: 100;
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--text-color);
  white-space: nowrap;
  transition: all var(--transition-fast) var(--ease-smooth);
}

.dropdown-menu a::before {
  display: none;
}

.dropdown-menu a:hover {
  background: linear-gradient(90deg, var(--surface-color) 0%, transparent 100%);
  color: var(--primary-color);
  padding-left: var(--space-6);
}

nav ul li.dropdown:hover > .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Language toggle buttons */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface-color);
  padding: var(--space-1);
  border-radius: 0.5rem;
}

.lang-toggle button {
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 0.375rem;
  transition: all var(--transition-base) var(--ease-smooth);
  position: relative;
}

.lang-toggle button:hover {
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.1);
}

.lang-toggle button.active {
  font-weight: 600;
  color: var(--background-color);
  background: var(--gradient-blue);
  box-shadow: var(--shadow-sm);
}

/* Hero section */
.hero {
  position: relative;
  /* Modern vibrant gradient with depth */
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 50%, #3B82F6 100%);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  color: var(--hero-text-color);
  padding: var(--space-16) var(--space-6) var(--space-12);
  text-align: left;
  overflow: hidden;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  /* Subtle overlay for text contrast */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 100%);
  z-index: 0;
}

.hero-content {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 800;
  margin-bottom: var(--space-6);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero p {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  color: rgba(255,255,255,0.95);
  margin-bottom: var(--space-8);
  max-width: 640px;
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0,0,0,0.2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: var(--text-base);
  text-align: center;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base) var(--ease-smooth);
  text-decoration: none;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: var(--gradient-blue);
  color: #ffffff;
  box-shadow: var(--shadow-primary);
  transform: translateY(0);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(59, 130, 246, 0.4);
  text-decoration: none;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn-secondary:active {
  transform: translateY(0);
}

/* Section base styling */
section {
  padding: var(--space-16) var(--space-6);
  position: relative;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Card‑style sections
 *
 * Modern card design with layered shadows, subtle border, and smooth transitions.
 * Cards elevate on hover for better interactivity. */
.section-card {
  background: var(--background-color);
  border-radius: 1.5rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  padding: var(--space-16) var(--space-8);
  margin: var(--space-12) var(--space-4);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-slow) var(--ease-smooth);
}

.section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-blue);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.section-card:hover {
  box-shadow: var(--shadow-2xl);
  transform: translateY(-4px);
}

.section-card:hover::before {
  opacity: 1;
}

.section-card .section-inner {
  /* Ensure inner content stays within the card's rounded corners */
  max-width: var(--max-width);
  margin: 0 auto;
}

section h2 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: 800;
  margin-bottom: var(--space-12);
  text-align: center;
  color: var(--text-color);
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

section h2::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-blue);
  border-radius: 2px;
}

/* Course overview cards */
.courses {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.course-card {
  background: linear-gradient(135deg, var(--background-color) 0%, var(--surface-color) 100%);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  padding: var(--space-8);
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-slow) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.course-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  padding: 2px;
  background: var(--gradient-blue);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}

.course-card:hover::after {
  opacity: 1;
}

/* Pricing cards alignment
 *
 * On the pricing page we have cards with varying amounts of content. To
 * ensure they align horizontally and vertically, we give them a
 * minimum height. This avoids one card being significantly shorter
 * than the others, which can look unbalanced. The value was chosen
 * experimentally to accommodate up to five bullet points and a call to
 * action button. On smaller screens the height will adjust naturally
 * as the cards stack. */
.pricing-grid .course-card {
  min-height: 480px;
}

/* Optional image at the top of course cards */
.course-card img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin-bottom: var(--space-4);
  object-fit: cover;
  transition: transform var(--transition-slow) var(--ease-smooth);
}

.course-card:hover img {
  transform: scale(1.05);
}

.course-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.course-card p {
  margin-bottom: 1rem;
  color: var(--muted-text-color);
  flex-grow: 1;
}
.course-card .price {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-color);
}

/* Why section with modern grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.why-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--background-color) 0%, var(--surface-color) 100%);
  border-radius: 1rem;
  border: 1px solid var(--border-light);
  transition: all var(--transition-base) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.why-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--gradient-blue);
  transition: height var(--transition-base) var(--ease-smooth);
}

.why-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color-light);
}

.why-item:hover::before {
  height: 100%;
}

.why-item .icon {
  color: var(--background-color);
  background: var(--gradient-blue);
  font-size: var(--text-xl);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-primary);
}

.why-item h4 {
  font-weight: 700;
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  color: var(--text-color);
}

.why-item p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Generic section for forms and content */
.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 640px;
  margin: 0 auto;
}

form input,
form select,
form textarea {
  padding: var(--space-4) var(--space-4);
  border: 2px solid var(--border-color);
  border-radius: 0.75rem;
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  background: var(--background-color);
  transition: all var(--transition-base) var(--ease-smooth);
  width: 100%;
}

form input:hover,
form select:hover,
form textarea:hover {
  border-color: var(--primary-color-light);
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

form label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-color);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

form .form-group {
  display: flex;
  flex-direction: column;
}

form button {
  align-self: flex-start;
  margin-top: var(--space-4);
}

/* Table styling for resources page */
.table-container {
  overflow-x: auto;
  margin-top: var(--space-8);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--background-color);
}

th,
td {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--border-color);
}

th {
  background: linear-gradient(135deg, var(--surface-color) 0%, var(--surface-elevated) 100%);
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 10;
}

th:first-child {
  border-top-left-radius: 1rem;
}

th:last-child {
  border-top-right-radius: 1rem;
}

tr:last-child td {
  border-bottom: none;
}

tr:last-child td:first-child {
  border-bottom-left-radius: 1rem;
}

tr:last-child td:last-child {
  border-bottom-right-radius: 1rem;
}

tbody tr {
  transition: all var(--transition-fast) var(--ease-smooth);
}

tbody tr:hover {
  background: var(--surface-color);
  transform: scale(1.01);
}

caption {
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  text-align: left;
  color: var(--text-color);
}

/* Footer */
footer {
  background: linear-gradient(180deg, var(--surface-color) 0%, var(--surface-elevated) 100%);
  border-top: 1px solid var(--border-color);
  padding: var(--space-16) var(--space-6) var(--space-8);
  position: relative;
  margin-top: var(--space-16);
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-color-light), transparent);
  opacity: 0.5;
}

footer .footer-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: space-between;
}

footer p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.8;
}

footer a {
  color: var(--text-secondary);
  transition: all var(--transition-fast) var(--ease-smooth);
}

footer a:hover {
  color: var(--primary-color);
  text-decoration: none;
  transform: translateX(2px);
  display: inline-block;
}

@media (max-width: 768px) {
  .hero {
    padding: 4rem 1.5rem 3rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

/* Smaller hero variant used on secondary pages
   This class reduces the vertical padding of the hero section to
   prevent it from dominating less content‑heavy pages like
   resources or contact. It inherits the background image and
   overlay from the default hero style. */
.smaller-hero {
  padding-top: 4rem;
  padding-bottom: 3rem;
}

/*
 * Light hero variant for the home page
 *
 * Modern card-based hero with gradient border and enhanced visual appeal.
 */
.hero-network {
  background: linear-gradient(135deg, var(--background-color) 0%, var(--surface-color) 100%);
  color: var(--hero-light-text);
  padding: var(--space-16) var(--space-8);
  border-radius: 1.75rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-2xl);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-slow) var(--ease-smooth);
}

.hero-network::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.75rem;
  padding: 2px;
  background: var(--gradient-blue);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
}

.hero-network:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15);
}
.hero-network .hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 2rem;
}
.hero-network .hero-text {
  flex: 1 1 300px;
}
.hero-network .hero-text h1 {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl));
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--space-6);
  color: var(--hero-light-text);
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text-color) 0%, var(--primary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-network .hero-text p {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  max-width: 540px;
  line-height: 1.7;
}
.hero-network .hero-bullets {
  list-style: none;
  /* Add top margin for better spacing between button and list */
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-left: 0;
}
.hero-network .hero-bullets li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--hero-light-text);
}
.hero-network .hero-bullets li::before {
  content: '\2022';
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent-blue);
}
.hero-network .hero-image {
  flex: 1 1 300px;
  max-width: 50%;
  position: relative;
}

.hero-network .hero-image::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: var(--gradient-blue);
  border-radius: 1rem;
  opacity: 0.1;
  filter: blur(40px);
  z-index: 0;
}

.hero-network .hero-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  z-index: 1;
  transition: transform var(--transition-slow) var(--ease-smooth);
}

.hero-network .hero-image img:hover {
  transform: scale(1.02) rotate(1deg);
}

@media (max-width: 768px) {
  .hero-network {
    padding: 3rem 1rem;
  }
  .hero-network .hero-inner {
    flex-direction: column;
    text-align: left;
  }
  .hero-network .hero-image {
    max-width: 100%;
  }
  .hero-network .hero-text h1 {
    font-size: 2rem;
  }
  .hero-network .hero-text p {
    font-size: 1rem;
  }
}

/*
 * Styles for the new Beispiele (Examples) page
 *
 * The examples page introduces visitors to generative and agentic AI through
 * concrete demonstrations. Cards with sample prompts and outputs are styled
 * consistently with the rest of the site. A simple chat demo showcases how
 * users can interact with ChatGPT directly on the page (an API key must be
 * provided by the site administrator). Additional helper classes for the
 * chat interface live here so that they benefit from the site's colour
 * palette and typography.
 */

/* Grid container for example cards */
.examples-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2rem;
}

/* Individual example card */
.example-card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.example-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.example-card pre {
  background-color: #f3f4f6;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 0.75rem;
}

.example-card .prompt-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Chat demo styles */
.chat-container {
  margin-top: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: var(--surface-color);
}

.chat-messages {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-message {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  line-height: 1.4;
}

.chat-message.user {
  align-self: flex-end;
  background-color: #e0f2fe;
  color: #0c4a6e;
}

.chat-message.assistant {
  align-self: flex-start;
  background-color: #f3f4f6;
}

/*
 * Blog formatting enhancements
 *
 * Blog articles use the `.content` class inside their main section. To
 * improve readability, we constrain the maximum width on large
 * displays, increase line spacing, and add generous margins between
 * paragraphs and headings. Lists are indented and spaced so that
 * bullet points stand out clearly. These tweaks give long-form
 * articles a more polished, magazine-like feel without affecting
 * other pages.
 */
.content {
  max-width: 780px;
  margin: 0 auto;
}

.content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.content p {
  margin-top: 1rem;
  line-height: 1.8;
}

.content ul {
  margin: 1rem 0 1rem 1.5rem;
  padding-left: 1rem;
  list-style: disc;
}

.content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.chat-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.chat-input-wrapper input[type="text"] {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  font-size: 1rem;
}

.chat-input-wrapper button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-input-wrapper button:hover {
  background-color: var(--primary-color-dark);
}

/*
 * Responsive video container
 *
 * Several blog articles embed short clips to illustrate
 * concepts like the Agent Builder. This block provides a simple
 * wrapper and styling for the `<video>` element so that clips
 * scale nicely across devices and adopt the same rounded
 * corners and drop shadow used throughout the site. The
 * container adds vertical spacing before and after the video.
 */
.video-container {
  margin: 2rem 0;
  /* Ensure the video doesn’t overflow its parent card */
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  display: block;
  box-shadow: 0 4px 12px var(--surface-shadow);
}

/*
 * Kontaktformular‑Layout
 *
 * Das Kontaktformular wird in einen leicht erhöhten, hellen Bereich
 * eingebettet, um sich klar vom Seitenhintergrund abzuheben. Die Felder
 * erhalten grosszügige Abstände und abgerundete Ecken. Die Formulare
 * innerhalb von `.contact-section` profitieren von diesen Stilen.
 */
.contact-section form {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px var(--surface-shadow);
  max-width: 600px;
  margin: 0 auto;
}

/* Center the entire contact section including heading and helper text */
.contact-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-section .form-group {
  margin-bottom: 1rem;
}

.contact-section label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.contact-section input,
.contact-section textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 1rem;
  width: 100%;
}

.contact-section button {
  margin-top: 1rem;
}

/*
 * Harvard Study Section
 *
 * Modern showcase section with gradient background and enhanced visual hierarchy.
 */
.harvard-study {
  background: linear-gradient(135deg, var(--surface-color) 0%, var(--background-color) 100%);
  padding: var(--space-16) var(--space-6);
  border-top: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.harvard-study::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.harvard-study .harvard-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.harvard-study .harvard-text {
  flex: 1 1 300px;
}
.harvard-study .harvard-text h2 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  margin-bottom: var(--space-6);
  font-weight: 800;
  color: var(--text-color);
}

.harvard-study .harvard-text p {
  margin-bottom: var(--space-6);
  line-height: 1.7;
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.harvard-study .harvard-graphic {
  flex: 1 1 300px;
  text-align: center;
}
.harvard-study .harvard-graphic img {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 1.25rem;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-slow) var(--ease-smooth);
}

.harvard-study .harvard-graphic img:hover {
  transform: scale(1.02) rotate(-1deg);
}

.harvard-study .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.stat-item {
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--background-color) 0%, var(--surface-color) 100%);
  border-radius: 1rem;
  border: 1px solid var(--border-light);
  transition: all var(--transition-base) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-blue);
  transform: scaleX(0);
  transition: transform var(--transition-base) var(--ease-smooth);
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.stat-item:hover::before {
  transform: scaleX(1);
}

.stat-item .counter {
  font-size: clamp(var(--text-4xl), 4vw, var(--text-5xl));
  font-weight: 800;
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.stat-item .percent,
.stat-item .unit {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: 700;
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

.stat-item p {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Modern animations for smooth content reveal */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.fade-in {
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-smooth) forwards;
}

/* Add staggered animation delays for multiple elements */
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }

/*
 * Dashboard Section
 *
 * Modern section with enhanced gradients and visual appeal.
 */
.dashboard-section {
  background: linear-gradient(135deg, var(--background-color) 0%, var(--surface-color) 50%, var(--background-color) 100%);
  padding: var(--space-16) var(--space-6);
  border-top: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.dashboard-section::after {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.dashboard-section .dashboard-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.dashboard-section .dashboard-text {
  flex: 1 1 300px;
}

.dashboard-section .dashboard-text h2 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  margin-bottom: var(--space-6);
  font-weight: 800;
  color: var(--text-color);
}

.dashboard-section .dashboard-text p {
  margin-bottom: var(--space-6);
  line-height: 1.7;
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.dashboard-section .dashboard-bullets {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 0;
}

.dashboard-section .dashboard-graphic {
  flex: 1 1 300px;
  text-align: center;
}

.dashboard-section .dashboard-graphic img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 1.25rem;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-slow) var(--ease-smooth);
}

.dashboard-section .dashboard-graphic img:hover {
  transform: scale(1.02) rotate(1deg);
}

.dashboard-section .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.dashboard-section .stat-item .counter {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-color);
}

.dashboard-section .stat-item .percent,
.dashboard-section .stat-item .unit {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.dashboard-section .stat-item p {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  color: var(--text-color);
}

/*
 * Interactive Demo Section
 *
 * Provides small hands-on demos like an idea generator and a time savings
 * calculator. Each demo card resembles a tile with its own shadow and
 * padding. The layout is responsive and stacks on smaller screens.
 */
.interactive-demo {
  background-color: var(--surface-color);
  padding: 3rem 1rem;
  border-top: 1px solid var(--border-color);
}
.interactive-demo h2 {
  text-align: center;
  font-size: 2rem;
}
.interactive-demo .demo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.demo-card {
  background-color: var(--background-color);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 10px var(--surface-shadow);
  text-align: left;
}
.demo-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.demo-card p {
  margin-bottom: 0.75rem;
}
.demo-card input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.demo-output {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--primary-color);
}