/* ============================================================
   MKROS Landing Page – Analytics Crisp Theme
   Iris · White · Near-Black — version alpha
   "Data-forward. Crisp. Engineered precision."
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── CSS Variable overrides ─────────────────────────────── */
:root {
  /* Analytics Crisp palette */
  --ac-primary:   #121418;
  --ac-secondary: #6A6F77;
  --ac-tertiary:  #5A4FE0;  /* iris */
  --ac-neutral:   #F7F8FA;
  --ac-surface:   #FFFFFF;
  --ac-dark:      #121418;
  --ac-dark-2:    #1E2128;

  /* Override landing.css vars */
  --bg-black:      #121418;
  --bg-navy:       #1E2128;
  --bg-dark:       #1E2128;
  --deep-indigo:   #2A2D38;
  --surface-light: rgba(255, 255, 255, 0.06);

  --electric-blue: #5A4FE0;
  --royal-blue:    #4A3FD0;
  --indigo:        #3930B8;
  --soft-lavender: #9B95F0;

  --gold-light:    #5A4FE0;
  --gold-mid:      #4A3FD0;
  --gold-dark:     #3930B8;
  --border-gold:   rgba(90, 79, 224, 0.25);

  --text-white:    #FFFFFF;
  --text-lblue:    rgba(255, 255, 255, 0.88);
  --text-sub:      rgba(255, 255, 255, 0.52);
  --text-navy:     rgba(255, 255, 255, 0.75);
  --text-dblue:    rgba(255, 255, 255, 0.65);

  --border:        rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.18);
  --shadow-blue:   0 0 48px rgba(90, 79, 224, 0.14);

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  14px;
}

/* ── Global body ────────────────────────────────────────── */
body {
  background: #F7F8FA;
  color: #121418;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Navigation ─────────────────────────────────────────── */
.nav-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(18, 20, 24, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-header.scrolled {
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 1px 0 rgba(18, 20, 24, 0.07);
}

.nav-logo-text {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #121418;
  letter-spacing: -0.03em;
}
.nav-logo-text span { color: #5A4FE0; }

.nav-link { color: rgba(18, 20, 24, 0.50); font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 500; }
.nav-link:hover { color: #121418; }
.nav-burger span { background: rgba(18, 20, 24, 0.65); }

/* ── Buttons ────────────────────────────────────────────── */
.btn-gold {
  background: #5A4FE0;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: none;
  box-shadow: none;
  letter-spacing: -0.01em;
  border-radius: 8px;
}
.btn-gold:hover {
  background: #4A3FD0;
  box-shadow: 0 4px 20px rgba(90, 79, 224, 0.35);
  transform: translateY(-1px);
  opacity: 1;
}
.btn-outline {
  background: transparent;
  border: 1px solid rgba(18, 20, 24, 0.15);
  color: rgba(18, 20, 24, 0.65);
  font-family: "Inter", sans-serif;
  border-radius: 8px;
}
.btn-outline:hover {
  background: rgba(18, 20, 24, 0.04);
  border-color: rgba(18, 20, 24, 0.28);
  color: #121418;
}

/* Dark section buttons */
.contact-section .btn-gold,
.hero .btn-gold {
  background: #5A4FE0;
  color: #FFFFFF !important;
}
.contact-section .btn-outline,
.hero .btn-outline {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.80);
}
.contact-section .btn-outline:hover,
.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.40);
  color: #FFFFFF;
}

/* ── Hero section ───────────────────────────────────────── */
.hero {
  background: #121418 !important;
  position: relative;
}
.hero canvas { opacity: 0.10; }

.hero .hero-badge {
  background: rgba(90, 79, 224, 0.14);
  border: 1px solid rgba(90, 79, 224, 0.28);
  color: #9B95F0;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 4px;
}
.hero h1 {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(2.6rem, 5vw, 4.0rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: #FFFFFF !important;
  line-height: 1.08 !important;
}
.hero h1 .text-gradient,
.hero h1 span {
  background: linear-gradient(135deg, #9B95F0 0%, #5A4FE0 50%, #4A3FD0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero .hero-sub {
  color: rgba(255, 255, 255, 0.62) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.hero-cta-group .btn-gold { border-radius: 8px; }

/* ── Section titles (light bg) ──────────────────────────── */
.section-badge {
  background: rgba(90, 79, 224, 0.08);
  border: 1px solid rgba(90, 79, 224, 0.18);
  color: #5A4FE0 !important;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: 4px;
}

.section-title,
.section h2 {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #121418 !important;
}
.section-sub { color: #6A6F77 !important; font-family: "Inter", sans-serif !important; }

/* Light sections */
.section { background: #FFFFFF; }
.section:nth-child(even) { background: #F7F8FA; }

/* ── Service Cards (light) ──────────────────────────────── */
.service-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(18, 20, 24, 0.08) !important;
  box-shadow: 0 1px 4px rgba(18, 20, 24, 0.05) !important;
  border-radius: 14px !important;
}
.service-card:hover {
  border-color: rgba(90, 79, 224, 0.22) !important;
  box-shadow: 0 6px 24px rgba(90, 79, 224, 0.10) !important;
  transform: translateY(-2px);
}
.service-card h3 { font-family: "Inter", sans-serif !important; color: #121418 !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -0.02em !important; }
.service-card p  { font-family: "Inter", sans-serif !important; color: #6A6F77 !important; font-size: 14px !important; line-height: 1.6 !important; }
.service-features li { font-family: "Inter", sans-serif !important; color: #6A6F77 !important; font-size: 13px !important; }
.service-features li i { color: #5A4FE0 !important; }

.service-icon,
.service-icon.blue, .service-icon.indigo, .service-icon.gold,
.service-icon.red, .service-icon.lavender, .service-icon.white {
  background: rgba(90, 79, 224, 0.09) !important;
  color: #5A4FE0 !important;
}

.service-card--featured {
  background: #121418 !important;
  border-color: rgba(90, 79, 224, 0.25) !important;
}
.service-card--featured h3 { color: #FFFFFF !important; }
.service-card--featured p  { color: rgba(255, 255, 255, 0.62) !important; }
.service-card--featured .service-features li { color: rgba(255, 255, 255, 0.62) !important; }
.service-card--featured .service-icon {
  background: rgba(90, 79, 224, 0.18) !important;
  color: #9B95F0 !important;
}
.service-featured-badge {
  background: rgba(90, 79, 224, 0.16) !important;
  color: #9B95F0 !important;
  border: 1px solid rgba(90, 79, 224, 0.25) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* ── Process Steps ──────────────────────────────────────── */
.process-card,
.process-step {
  background: #FFFFFF !important;
  border: 1px solid rgba(18, 20, 24, 0.08) !important;
  border-radius: 14px !important;
}
.process-number,
.process-step-number {
  background: rgba(90, 79, 224, 0.09) !important;
  color: #5A4FE0 !important;
  font-weight: 800 !important;
  font-family: "Inter", sans-serif !important;
  border: 1px solid rgba(90, 79, 224, 0.18) !important;
}
.process-card-title,
.process-step h3 {
  font-family: "Inter", sans-serif !important;
  color: #121418 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.process-card-desc,
.process-step p { color: #6A6F77 !important; font-family: "Inter", sans-serif !important; }

/* ── About card ─────────────────────────────────────────── */
.about-card-content {
  background: linear-gradient(to top, rgba(18, 20, 24, 0.97) 0%, rgba(18, 20, 24, 0.60) 60%, transparent 100%);
}
.about-card canvas { opacity: 0.08; }

/* ── Pricing cards ──────────────────────────────────────── */
.pricing-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(18, 20, 24, 0.09) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(18, 20, 24, 0.05) !important;
}
.pricing-card:hover {
  border-color: rgba(90, 79, 224, 0.22) !important;
  box-shadow: 0 8px 32px rgba(90, 79, 224, 0.10) !important;
}
.pricing-card.featured {
  background: #5A4FE0 !important;
  border-color: #5A4FE0 !important;
  box-shadow: 0 12px 40px rgba(90, 79, 224, 0.30) !important;
}
.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured .pricing-price,
.pricing-card.featured li {
  color: #FFFFFF !important;
}
.pricing-card.featured .pricing-price { color: #FFFFFF !important; }
.pricing-card h3       { font-family: "Inter", sans-serif !important; color: #121418 !important; font-weight: 700 !important; }
.pricing-card p        { font-family: "Inter", sans-serif !important; color: #6A6F77 !important; }
.pricing-price         { font-weight: 800 !important; letter-spacing: -0.04em !important; color: #121418 !important; font-family: "Inter", sans-serif !important; }
.pricing-card li       { font-family: "Inter", sans-serif !important; color: #6A6F77 !important; }
.pricing-card li i     { color: #5A4FE0 !important; }
.pricing-badge         { background: rgba(255, 255, 255, 0.20) !important; color: #FFFFFF !important; font-family: "Inter", sans-serif !important; font-weight: 700 !important; }

/* ── Contact / CTA section ──────────────────────────────── */
.contact-section {
  background: #121418 !important;
}
.contact-section h2 {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
}
.contact-section .label { color: #5A4FE0 !important; }
.contact-section .section-sub,
.contact-section p { color: rgba(255, 255, 255, 0.60) !important; }

.contact-icon { background: rgba(90, 79, 224, 0.14) !important; color: #9B95F0 !important; }

/* ── Contact form ───────────────────────────────────────── */
.contact-form .form-input,
.contact-form textarea {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}
.contact-form .form-input:focus,
.contact-form textarea:focus {
  border-color: #5A4FE0 !important;
  box-shadow: 0 0 0 3px rgba(90, 79, 224, 0.18) !important;
}
.contact-form .form-input::placeholder,
.contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.38) !important; }

/* ── Footer ─────────────────────────────────────────────── */
footer, .footer {
  background: #0D0F12 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-logo-text {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
}
.footer-logo-text span { color: #9B95F0 !important; }

.footer-tagline { color: rgba(255, 255, 255, 0.55) !important; }
.footer-link { color: rgba(255, 255, 255, 0.45) !important; }
.footer-link:hover { color: #FFFFFF !important; }
.footer-col-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-family: "Inter", sans-serif !important;
  letter-spacing: -0.01em !important;
}
.footer-divider { border-top: 1px solid rgba(255, 255, 255, 0.07) !important; }
.footer-copy { color: rgba(255, 255, 255, 0.35) !important; font-family: "Inter", sans-serif !important; }

/* ── Stats / numbers ────────────────────────────────────── */
.stat-number, .hero-stat-value {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #5A4FE0 !important;
}
.stat-label, .hero-stat-label { color: rgba(255, 255, 255, 0.55) !important; font-family: "Inter", sans-serif !important; }

/* ── Privacy link ───────────────────────────────────────── */
a[href*="datenschutz"],
a[href*="privacy"] {
  color: rgba(255, 255, 255, 0.50) !important;
}
a[href*="datenschutz"]:hover,
a[href*="privacy"]:hover { color: #FFFFFF !important; }

/* ── Readability overrides ──────────────────────────────── */
body {
  font-size: 0.96rem;
  line-height: 1.7;
}

/* Darker body text for paragraphs */
.section p,
.about-text p,
.hero-sub,
p {
  color: #2D3139;
  line-height: 1.72;
}

/* Secondary labels stay muted */
.section-sub,
.card-meta,
.process-card-desc,
.service-card p,
.pricing-card p { color: #4A4F58 !important; line-height: 1.68 !important; }

/* Section titles: bigger punch */
.section-title,
.section h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
  line-height: 1.12 !important;
}

/* Nav – slightly bolder links */
.nav-link { font-weight: 500 !important; letter-spacing: -0.01em !important; }