/* ============================================================
   ALARMSCHUTZ24 – Index Page Styles
   ============================================================ */

/* ── Hero Layout ─────────────────────────────────────────── */
.hero-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.hero-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-visual {
  flex: 0 0 420px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-svg {
  width: 100%;
  height: auto;
}

.hero-accent {
  background: linear-gradient(135deg, var(--accent, #3d85ff) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 860px) {
  .hero-inner    { flex-direction: column; }
  .hero-visual   { flex: unset; width: 260px; }
}

/* ── Scroll Cue ──────────────────────────────────────────── */
.scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  color: var(--clr-text-muted, #8a8fa8);
}

/* ── Proof Strip ─────────────────────────────────────────── */
.proof-strip {
  background: var(--clr-surface, #13161d);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2rem 0;
}

.proof-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 0;
  text-align: center;
}

.proof-num {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--accent, #3d85ff);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.proof-label {
  font-size: 0.8125rem;
  color: var(--clr-text-muted, #8a8fa8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.proof-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .proof-inner    { gap: 1.5rem; }
  .proof-divider  { display: none; }
  .proof-item     { flex: 0 0 calc(50% - 0.75rem); }
}

/* ── Module Cards ────────────────────────────────────────── */
.module-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  gap: 0;
}

.module-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(61, 133, 255, 0.12);
  color: var(--accent, #3d85ff);
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.module-icon--warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--clr-warn, #f59e0b);
}

.module-icon--info {
  background: rgba(34, 197, 94, 0.12);
  color: var(--clr-success, #22c55e);
}

/* ── Module Grid ─────────────────────────────────────────── */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .modules-grid { grid-template-columns: 1fr; }
}

/* ── Module Card Media ───────────────────────────────────── */
.module-img-frame {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 1.25rem;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  background: #0d0f14;
}

.module-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── CTA Banner ──────────────────────────────────────────── */
.cta-banner {
  padding: 4rem 0;
}

.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 3.5rem;
  border-radius: 20px;
  border: 1px solid rgba(61, 133, 255, 0.2);
}

.cta-banner-text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.cta-banner-text p {
  color: var(--clr-text-muted, #8a8fa8);
  font-size: 1rem;
}

.cta-banner-actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .cta-banner-inner   { flex-direction: column; align-items: flex-start; padding: 2rem; }
  .cta-banner-actions { width: 100%; }
}