/* === GENERAL LAYOUT === */
body {
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  background-color: #0d1117;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 60px 20px;
}

/* === HERO SECTION === */
.hero-section {
  background: radial-gradient(circle at center, #0d1117 0%, #0a0e13 100%);
  text-align: center;
  padding: 80px 20px 60px;
}

.hero-section .gradient-text {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-buttons {
  margin-top: 30px;
}

.hero-buttons a {
  padding: 12px 24px;
  margin: 10px;
  text-decoration: none;
  border: 1px solid #58a6ff;
  border-radius: 8px;
  color: #58a6ff;
  transition: all 0.3s ease;
}

.hero-buttons a:hover {
  background-color: #58a6ff;
  color: #0d1117;
}

/* === SERVICES SECTION === 
.services-section .services-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start; /* oder center, je nach Wunsch */
}
*/
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  border: 2px dashed red; /* Nur zum Test, später entfernen */
}

.service-box:hover {
  transform: translateY(-5px);
}

.service-box h3 {
  color: #ffffff;
  margin-bottom: 10px;
}

/* === WHY US SECTION === */
.why-us-section .why-list {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.why-us-section .why-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.why-us-section .why-stats div {
  text-align: center;
}

.why-us-section h3 {
  font-size: 2rem;
  color: #58a6ff;
}

/* === CTA + CONTACT FORM === */
.cta-section {
  background-color: #161b22;
  padding: 60px 20px;
  text-align: center;
}

.cta-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 30px auto 0;
}

.cta-form input,
.cta-form textarea {
  padding: 12px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #0d1117;
  color: #fff;
}

.cta-form button {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border: none;
  padding: 14px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

.cta-form button:hover {
  opacity: 0.9;
}

/*
Theme Name: Astra Child SafetradeBot JS V3
Template: astra
*/

.services-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  border: 2px dashed green; /* Testrahmen sichtbar? */
}

.hero-section {
  background: #0d1117;
  color: white;
  padding: 60px 20px;
}

.gradient-text {
  background: linear-gradient(to right, #58a6ff, #6c63ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: stretch;
  border: 2px solid lime; /* Testrahmen sichtbar */
}

.service-box {
  display: block;
  width: 100%;
  background: #161b22;
  padding: 20px;
  border-radius: 8px;
}