/* ═══════════════════════════════════════════════════════════
   FLOWBOTICS COMBINED CSS
   Generated: 2026-03-05
   Contains: styles, layout, components, case-studies, premium, mobile
   Total: ~152KB (gzipped: ~25KB)
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   STYLES.CSS
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   FLOWBOTICS CSS ARCHITECTURE v2026
   Base Styles (Desktop  First)
   Mobile overrides in mobile.css
   Case studies in case-studies.css
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. DESIGN SYSTEM VARIABLES
   ─────────────────────────────────────────────────────────── */
:root {
  /* Brand Colors - Pitch Black + Neon Accents */
  --brand-dark-1: #22124f;
  --brand-dark-2: #482281;
  --brand-lilac: #c3b7d7;
  --brand-white: #fff;
  --neon-pink: #d946ef;
  --neon-violet: #7c3aed;
  --neon-cyan: #65afe1;
  --brand-blue-1: #65afe1;
  --brand-blue-2: #8bd7f8;
  --brand-blue-3: #d8f1fd;

  /* Semantic Background - Pitch Black */
  --bg-deep: #000;
  --bg-elevated: #0a0a0a;
  --bg-card: rgba(10, 10, 10, 0.95);
  --bg-card-hover: rgba(15, 15, 15, 0.98);
  --bg-card-dark: rgba(5, 5, 5, 0.9);
  --bg-card-dark-hover: rgba(10, 10, 10, 0.95);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-input-focus: rgba(255, 255, 255, 0.08);
  --bg-badge: rgba(217, 70, 239, 0.15);
  --bg-tag: rgba(124, 58, 237, 0.15);
  --bg-social: rgba(255, 255, 255, 0.05);

  /* Semantic Text */
  --text-primary: #fff;
  --text-secondary: #c3b7d7;
  --text-muted: #889;
  --text-on-dark: #000;

  /* Semantic Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(217, 70, 239, 0.5);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(217, 70, 239, 0.6);
  --border-dashed: rgba(255, 255, 255, 0.15);

  /* Accent Colors */
  --accent-primary: #d946ef;
  --accent-secondary: #7c3aed;
  --accent-dark: #482281;

  /* Status Colors */
  --color-success: #2ecc71;
  --color-success-bg: rgb(74 222 128 / 10%);
  --color-success-border: rgb(74 222 128 / 30%);
  --color-error: #ef4444;

  /* Typography */
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Font Sizes */
  --text-xs: 0.65rem;
  --text-sm: 0.75rem;
  --text-base: 0.8rem;
  --text-md: 0.85rem;
  --text-body: 0.9rem;
  --text-rg: 0.95rem;
  --text-lg: 1rem;
  --text-xl: 1.15rem;
  --text-2xl: 1.2rem;
  --text-3xl: 1.25rem;
  --text-4xl: 1.5rem;
  --text-5xl: 1.8rem;
  --text-6xl: 2.2rem;
  --text-7xl: 2.5rem;
  --text-8xl: 3rem;
  --text-9xl: 3.5rem;

  /* Spacing (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-15: 3.75rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-25: 6.25rem;
  --space-30: 7.5rem;
  --space-32: 8rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-4xl: 40px;
  --radius-5xl: 50px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 5px 20px rgb(255 255 255 / 20%);
  --shadow-md: 0 10px 30px rgb(0 0 0 / 20%);
  --shadow-lg: 0 20px 40px rgb(0 0 0 / 40%);
  --shadow-xl: 0 20px 50px rgb(0 0 0 / 50%);
  --shadow-2xl: 0 30px 80px rgb(0 0 0 / 50%);
  --shadow-glow: 0 0 40px rgb(61 27 138 / 40%);
  --shadow-glow-hover: 0 0 40px rgb(0 229 255 / 60%);
  --shadow-card: 0 10px 30px rgb(0 0 0 / 20%);
  --shadow-card-hover: 0 30px 60px rgb(0 0 0 / 40%);
  --shadow-inner-glow: none;
  --shadow-icon-hover: 0 0 10px rgb(77 168 255 / 50%);

  /* Transitions */
  --transition-fast: 0.2s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
  --transition-bounce: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1100px;
  --container-contact: 700px;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;
  --leading-xl: 1.8;
  --leading-2xl: 1.9;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 1px;
  --tracking-wider: 1.5px;
  --tracking-widest: 2px;
  --tracking-ultra: 3px;

  /* Breakpoints (reference only) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 900px;
  --breakpoint-xl: 1200px;

  /* ═══════════════════════════════════════════════════════════
     SPRINT COLORS (from components.css)
     ═══════════════════════════════════════════════════════════ */
  --sprint-inspector: #f5b7b7;
  --sprint-inspector-border: rgb(245 183 183 / 80%);
  --sprint-inspector-bg: rgb(245 183 183 / 15%);
  --sprint-inspector-glow: rgb(245 183 183 / 40%);
  --sprint-optimizer: #c084e8;
  --sprint-optimizer-border: rgb(192 132 232 / 80%);
  --sprint-optimizer-bg: rgb(192 132 232 / 15%);
  --sprint-optimizer-glow: rgb(192 132 232 / 40%);
  --sprint-fortress: #7ec8e3;
  --sprint-fortress-border: rgb(126 200 227 / 80%);
  --sprint-fortress-bg: rgb(126 200 227 / 15%);
  --sprint-fortress-glow: rgb(126 200 227 / 40%);
  --sprint-automator: #65afe1;
  --sprint-automator-border: rgb(101 175 225 / 80%);
  --sprint-automator-bg: rgb(101 175 225 / 15%);
  --sprint-automator-glow: rgb(101 175 225 / 40%);
  --sprint-vault: #00d27a;
  --sprint-vault-border: rgb(0 210 122 / 80%);
  --sprint-vault-bg: rgb(0 210 122 / 15%);
  --sprint-vault-glow: rgb(0 210 122 / 40%);
  --sprint-migrator: #5ec4c4;
  --sprint-migrator-border: rgb(94 196 196 / 80%);
  --sprint-migrator-bg: rgb(94 196 196 / 15%);
  --sprint-migrator-glow: rgb(94 196 196 / 40%);
  --sprint-guardian: #f9a826;
  --sprint-guardian-border: rgb(249 168 38 / 80%);
  --sprint-guardian-bg: rgb(249 168 38 / 15%);
  --sprint-guardian-glow: rgb(249 168 38 / 40%);
  --sprint-orchestrator: #6b74e6;
  --sprint-orchestrator-border: rgb(107 116 230 / 80%);
  --sprint-orchestrator-bg: rgb(107 116 230 / 15%);
  --sprint-orchestrator-glow: rgb(107 116 230 / 40%);

  /* ═══════════════════════════════════════════════════════════
     MATERIAL DESIGN (from premium.css)
     ═══════════════════════════════════════════════════════════ */
  --material-bg: #0a0a0a;
  --material-bg-hover: #0d0d0d;
  --material-border: 1px solid rgb(195 183 215 / 12%);
  --material-border-hover: 1px solid rgb(195 183 215 / 35%);
  --material-radius: 16px;
  --material-radius-sm: 12px;
  --material-shadow: 0 4px 6px -1px rgb(0 0 0 / 30%), 0 2px 4px -1px rgb(0 0 0 / 20%);
  --material-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 40%), 0 10px 10px -5px rgb(0 0 0 / 30%);
  --solid-deep: #0a0a0a;
  --solid-deep-hover: #0d0d0d;
  --solid-card: #1a1a1a;
  --solid-surface: #242424;
  --glow-primary: 0 0 30px rgb(195 183 215 / 15%);
  --glow-primary-hover: 0 0 40px rgb(195 183 215 / 25%);
  --glow-accent: 0 0 20px rgb(101 175 225 / 20%);
  --glow-border: rgb(195 183 215 / 40%);
  --section-padding: 120px;
  --section-padding-mobile: 80px;
  --card-padding: 40px;

  /* ═══════════════════════════════════════════════════════════
     BLOG POST (from blog-post.css)
     ═══════════════════════════════════════════════════════════ */
  --post-accent: #00e5ff;
  --post-accent-rgb: 0, 229, 255;
  --post-blue: #0096ff;

  /* ═══════════════════════════════════════════════════════════
     ANIMATION TIMING (from premium.css)
     ═══════════════════════════════════════════════════════════ */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.5s;
}

/* ───────────────────────────────────────────────────────────
   2. RESET & BASE
   ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  background-color: #000;
  color: var(--brand-white);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Background gradient triangles moved to premium.css for unified control */

/* Animation entfernt - Partikel sind statisch */

/* ───────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ─────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
  line-height: var(--leading-snug);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

/* ───────────────────────────────────────────────────────────
   4. LAYOUT UTILITIES
   ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  position: relative;
  z-index: 2;
}

.section {
  padding: var(--space-25) 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section > .container {
  width: 100%;
}

/* Section Variants */
.section-dark {
  background: #000;
  position: relative;
}

.section-alt {
  position: relative;
  width: 100%;
  background: #000;
  z-index: 1;
  padding-top: var(--space-20);
  padding-bottom: var(--space-30);
}

/* Ambient Hero Glow Effect */
.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(134, 25, 143, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.section-alt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-deep) 100%);
  pointer-events: none;
  z-index: 0;
}

.section-alt > * {
  position: relative;
  z-index: 1;
}

.tech-stack-bar {
  position: relative;
  width: 100%;
  background: var(--bg-deep);
  z-index: 10;
  padding: var(--space-30) 0;
  margin-top: 0;
  clear: both;
}

/* ───────────────────────────────────────────────────────────
   5. NAVIGATION
   ─────────────────────────────────────────────────────────── */
.nav {
  position: absolute;
  top: 0;
  width: 100%;
  padding: var(--space-6) 0;
  z-index: 100;
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-actions {
  margin-left: auto;
}

.nav-logo-custom {
  height: 48px !important;
  width: auto !important;
  max-width: 230px !important;
  object-fit: contain;
  transition: var(--transition-base);
}

.nav-logo-custom:hover {
  transform: scale(1.05);
  filter: drop-shadow(var(--shadow-icon-hover));
}

.btn-blog {
  padding: 8px 16px;
  font-size: 0.8rem;
  background: #0a0b12;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.btn-blog:hover {
  background: #0d0e16;
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(101 175 225 / 25%);
}

/* ───────────────────────────────────────────────────────────
   6. HERO SECTION
   ─────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-20);
  padding-bottom: var(--space-10);
  position: relative;
  background: transparent;
  overflow: hidden;
}

.hero-content {
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70vh;
  height: auto;
  padding-bottom: var(--space-6);
}

/* Badge */
.badge {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-full);
  background: #0a0b12;
  color: var(--accent-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  animation: float 6s ease-in-out infinite;
  align-self: center;
}

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

/* Hero Title */
.hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  text-shadow: var(--shadow-inner-glow);
  font-weight: 800;
}

.hero p {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-20);
  line-height: var(--leading-xl);
  max-width: var(--container-contact);
  margin-left: auto;
  margin-right: auto;
}

.text-gradient {
  background: linear-gradient(
    135deg,
    var(--text-primary) 0%,
    var(--accent-primary) 50%,
    var(--accent-secondary) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift-main 6s ease infinite;
}

@keyframes gradient-shift-main {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

/* Hero Stats */
.hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  background: #0a0b12;
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: var(--radius-lg);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.hero-stats.trust-bar {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #0d0e16;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--radius-md);
  color: var(--accent-secondary);
  margin-bottom: var(--space-1);
}

.stat-icon svg {
  width: 18px;
  height: 18px;
}

.stat-icon.success {
  color: var(--color-success);
}

.stat-num {
  display: block;
  font-weight: 700;
  font-size: var(--text-7xl);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.stat-sep {
  width: 1px;
  height: 35px;
  background: var(--border-subtle);
}

.hero-description {
  max-width: 600px;
  margin: 0 auto var(--space-6);
  font-size: var(--text-xl);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ───────────────────────────────────────────────────────────
   7. BUTTONS
   ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: var(--transition-base);
  min-height: 48px;
}

.btn-primary {
  background: var(--brand-blue-1);
  color: var(--text-on-dark);
  box-shadow: none;
  border: none;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: #7ab8e3;
  box-shadow:
    0 4px 12px rgb(101 175 225 / 25%),
    0 0 20px rgb(0 229 255 / 35%);
}

.btn-ghost {
  background: #0a0b12;
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.btn-ghost:hover {
  background: #0d0e16;
  border-color: var(--text-primary);
  transform: translateY(-5px);
}

.btn-full {
  width: 100%;
  margin-top: 10px;
}

/* ───────────────────────────────────────────────────────────
   8. TRUSTED BY (Social Proof)
   ─────────────────────────────────────────────────────────── */
.trusted-by {
  padding: var(--space-10) 0;
  background: #070810;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
}

.trusted-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-6);
}

.trusted-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.trusted-logo {
  opacity: 0.5;
  transition: all 0.3s ease;
  filter: grayscale(100%);
}

.trusted-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-3px);
}

.trusted-logo.featured {
  opacity: 0.9;
  filter: grayscale(0%);
}

.trusted-logo.featured:hover {
  opacity: 1;
}

.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 var(--space-6);
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ───────────────────────────────────────────────────────────
   9. TECH STACK
   ─────────────────────────────────────────────────────────── */
.stack-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}

.stack-category {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-secondary);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.stack-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.stack-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transition: var(--transition-base);
}

.stack-icon-item:hover {
  transform: translateY(-3px);
}

.stack-icon-item svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 30%));
}

.stack-icon-item span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ───────────────────────────────────────────────────────────
   10. CARDS & GRIDS
   ─────────────────────────────────────────────────────────── */
.section-label {
  text-align: center;
  margin-bottom: var(--space-15);
  font-family: var(--font-mono);
  color: var(--accent-secondary);
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ultra);
}

.section-header {
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-20);
}

.section-header h2 {
  font-size: var(--text-8xl);
  margin-bottom: var(--space-5);
  color: var(--text-primary);
  text-shadow: 0 0 30px rgb(0 0 0 / 30%);
}

.section-header p {
  font-size: var(--text-2xl);
  color: var(--text-muted);
}

/* Grids */
.tech-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (width >= 768px) {
  .tech-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bento-grid {
  display: grid;
  gap: var(--space-6);
  justify-content: center;
  max-width: var(--container-wide);
  margin: 0 auto;
}

@media (width >= 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tech Cards */
.tech-card {
  background: #0a0b12;
  border: 1px solid rgb(255 255 255 / 10%);
  padding: var(--space-10);
  border-radius: var(--radius-2xl);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.tech-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
  opacity: 0.7;
}

.tech-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 70, 239, 0.5);
  box-shadow: 0 var(--space-3) var(--space-6) -10px rgba(217, 70, 239, 0.2);
}

/* Sprint Cards */
.sprint-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sprint-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  box-shadow:
    0 20px 40px rgb(0 0 0 / 40%),
    0 0 40px rgb(101 175 225 / 10%);
}

.sprint-description {
  flex-grow: 1;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

/* Card Variants */
.card-security {
  border-top: 4px solid var(--accent-secondary);
}
.card-workplace {
  border-top: 4px solid var(--accent-primary);
}
.card-auto {
  border-top: 4px solid var(--accent-dark);
}

.card {
  position: relative;
  transition: var(--transition-base);
}

.card:hover {
  transform: translateY(-10px);
  background: var(--bg-card-dark-hover);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-card-hover);
}

.contact-card {
  background: #0d0e16;
  border: 1px solid var(--border-glow);
  padding: var(--space-12);
  border-radius: var(--radius-2xl);
  transition: var(--transition-base);
  box-shadow: var(--shadow-xl);
}

/* Card Content */
.tech-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: 800;
  font-size: var(--text-2xl);
}

.tech-head::before {
  content: "►";
  color: var(--accent-secondary);
  font-size: var(--text-lg);
}

.tech-list,
.check-list {
  list-style: none;
  padding: 0;
  color: var(--text-secondary);
}

.tech-list li,
.check-list li {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--text-rg);
}

.tech-list li::before {
  content: "•";
  color: var(--accent-primary);
  margin-right: var(--space-3);
  font-size: 1.5rem;
  line-height: 0;
}

.check-list li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 800;
  margin-right: var(--space-3);
}

.deliverables {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-dashed);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.deliverables strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid rgb(101 175 225 / 20%);
  background: rgb(77 168 255 / 10%);
  color: var(--accent-primary);
  font-size: var(--text-4xl);
  transition: var(--transition-base);
}

.card:hover .card-icon {
  transform: rotate(10deg) scale(1.1);
  background: var(--accent-primary);
  color: var(--text-on-dark);
}

.card h3 {
  color: var(--text-primary);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
}

.card p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* ───────────────────────────────────────────────────────────
   11. PROFILE & CERTIFICATES
   ─────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

@media screen and (width <= 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.about-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: var(--space-10) 0;
  width: 100%;
}

@media screen and (width >= 769px) {
  .about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.about-card {
  background: #0a0b12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  transition: var(--transition-base);
  width: 100%;
  box-sizing: border-box;
}

.about-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-primary);
  background: #0d0e16;
}

.about-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-badge);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  color: var(--accent-secondary);
}

.about-card h4 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.about-card p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.visual-inner {
  position: relative;
  background: #0a0b12;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: var(--radius-4xl);
  padding: var(--space-20) var(--space-12);
  text-align: center;
  box-shadow: 0 var(--space-8) var(--space-20) rgb(0 0 0 / 40%);
  transition: var(--transition-base);
}

.visual-inner:hover {
  transform: translateY(-5px);
  border-color: var(--accent-primary);
  box-shadow: 0 var(--space-10) var(--space-25) rgb(61 27 138 / 50%);
}

.profile-img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgb(255 255 255 / 10%);
  margin-bottom: var(--space-10);
  position: relative;
  z-index: 1;
  box-shadow: 0 var(--space-4) var(--space-12) rgb(0 0 0 / 40%);
  background-color: var(--text-on-dark);
}

/* Cert Badges */
.cert-badge {
  position: absolute;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 1px solid var(--border-glow);
  padding: var(--space-1);
  z-index: 2;
  box-shadow: 0 var(--space-2) var(--space-5) rgb(0 0 0 / 70%);
  animation: float-badge 6s ease-in-out infinite;
}

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

.badge-left-top {
  top: 50px;
  left: 10px;
  animation-delay: 0s;
}
.badge-right-top {
  top: 20px;
  right: 10px;
  animation-delay: 1.5s;
}
.badge-right-bottom {
  top: 160px;
  right: 20px;
  animation-delay: 3s;
}

.visual-text {
  position: relative;
  z-index: 3;
  color: var(--text-primary);
}

.code-badge {
  font-family: var(--font-mono);
  color: #c3b7d7;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
}

.about-content h2 {
  font-size: var(--text-9xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

.about-content p {
  font-size: var(--text-2xl);
  line-height: var(--leading-loose);
  color: var(--text-muted);
}

/* About Lead & Process */
.about-lead {
  font-size: var(--text-xl);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  max-width: 480px;
}

.about-content .process-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0 0;
}

.about-content .process-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-rg);
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
}

.about-content .process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, rgb(77 168 255 / 20%), rgb(0 229 255 / 10%));
  border: 1px solid rgb(77 168 255 / 30%);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.about-content .process-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: var(--space-1);
  flex-shrink: 0;
}

.about-content .process-desc {
  flex: 1;
  min-width: 0;
}

/* ───────────────────────────────────────────────────────────
   12. CONTACT FORM
   ─────────────────────────────────────────────────────────── */
.contact-container {
  max-width: var(--container-contact);
}

.contact-card h2 {
  color: var(--text-primary);
  font-weight: 900;
  margin-bottom: var(--space-3);
}

.form-group {
  margin-bottom: var(--space-6);
}

.form-group label {
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: block;
  margin-bottom: var(--space-2);
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: #0d0e16;
  border: 1px solid var(--border-light);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--text-lg);
  transition: var(--transition-base);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: #11131c;
  box-shadow: 0 0 var(--space-3) rgb(77 168 255 / 30%);
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-group-half {
  flex: 1;
  min-width: 200px;
}

.form-honeypot {
  display: none;
}

.form-status {
  color: #4ade80;
  font-size: 0.9rem;
  margin-top: 10px;
  display: none;
}

/* ───────────────────────────────────────────────────────────
   13. FOOTER
   ─────────────────────────────────────────────────────────── */
.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-15) 0;
  font-size: var(--text-body);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.footer-links a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: var(--transition-base);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-links .rss-link {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #0a0b12;
  border-radius: 50%;
  transition: var(--transition-base);
  color: var(--text-primary);
}

.social-icon:hover {
  background: var(--accent-primary);
  color: #fff;
  transform: translateY(-5px);
}

.social-icon:hover svg {
  fill: #fff;
}

.social-icon svg {
  width: 20px;
  height: 20px;
  fill: currentcolor;
}

.footer-subline {
  opacity: 0.5;
  font-size: 0.8em;
}

/* ───────────────────────────────────────────────────────────
   14. MOBILE STICKY CTA
   ─────────────────────────────────────────────────────────── */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.btn-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgb(0 229 255 / 30%);
  width: auto;
  min-width: max-content;
}

.btn-mobile svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ───────────────────────────────────────────────────────────
   15. BACK TO TOP
   ─────────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0b12;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 998;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-3px);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* ───────────────────────────────────────────────────────────
   16. ANIMATIONS & INTERACTIONS
   ─────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0ms;
}
.reveal-delay-2 {
  transition-delay: 100ms;
}
.reveal-delay-3 {
  transition-delay: 200ms;
}
.reveal-delay-4 {
  transition-delay: 300ms;
}

/* Card Glow Effect */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-2xl);
  padding: 1px;
  background: linear-gradient(135deg, transparent, transparent);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────
   17. HERO BACKGROUND SHAPES - AUSGEBLENDET
   ─────────────────────────────────────────────────────────── */
.hero-bg-shapes,
.shape,
.shape-1,
.shape-2,
.shape-3,
.shape-4,
.shape-5,
.shape-6 {
  display: none !important;
}

.shape {
  position: absolute;
  opacity: 0.6;
}

.shape-1 {
  width: 200px;
  height: 200px;
  top: 15%;
  right: 5%;
  animation: float-shape-1 20s ease-in-out infinite;
}

.shape-2 {
  width: 130px;
  height: 130px;
  top: 50%;
  right: 15%;
  animation: float-shape-2 25s ease-in-out infinite;
}

.shape-3 {
  width: 100px;
  height: 100px;
  top: 65%;
  right: 2%;
  animation: float-shape-3 18s ease-in-out infinite;
}

.shape-4 {
  width: 140px;
  height: 140px;
  top: 20%;
  left: 2%;
  animation: float-shape-4 22s ease-in-out infinite;
}

.shape-5 {
  width: 90px;
  height: 90px;
  top: 50%;
  left: 5%;
  animation: float-shape-5 16s ease-in-out infinite reverse;
}

.shape-6 {
  width: 70px;
  height: 70px;
  top: 75%;
  left: 1%;
  animation: float-shape-6 24s ease-in-out infinite;
}

@keyframes float-shape-1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(30px, -40px) rotate(5deg);
  }
}

@keyframes float-shape-2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-25px, 30px) rotate(-8deg);
  }
}

@keyframes float-shape-3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(15deg);
  }
  50% {
    transform: translate(20px, 35px) rotate(25deg);
  }
}

@keyframes float-shape-4 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-20px, 25px) scale(1.08);
  }
}

@keyframes float-shape-5 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(15px, -30px) rotate(12deg);
  }
}

@keyframes float-shape-6 {
  0%,
  100% {
    transform: translate(0, 0) rotate(-20deg);
  }
  50% {
    transform: translate(-10px, 20px) rotate(-35deg);
  }
}

/* Hero Cursor Glow - AUSGEBLENDET */
.hero-cursor-glow {
  display: none !important;
  opacity: 0;
  z-index: 0;
}

.hero:hover .hero-cursor-glow {
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────
   18. SECTION SHAPES
   ─────────────────────────────────────────────────────────── */
.section-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.section-shapes .shape {
  opacity: 0.25;
}

/* Sprint Section */
#sprints .section-shapes .shape-s1 {
  width: 180px;
  height: 180px;
  top: 10%;
  right: 3%;
  animation: float-shape-1 25s ease-in-out infinite;
}

#sprints .section-shapes .shape-s2 {
  width: 120px;
  height: 120px;
  top: 60%;
  left: 2%;
  animation: float-shape-3 20s ease-in-out infinite reverse;
}

/* About Section */
#about .section-shapes .shape-a1 {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 5%;
  animation: float-shape-2 22s ease-in-out infinite;
}

#about .section-shapes .shape-a2 {
  width: 100px;
  height: 100px;
  top: 70%;
  right: 8%;
  animation: float-shape-5 18s ease-in-out infinite;
}

/* Tech Stack */
.tech-stack-bar .section-shapes .shape-t1 {
  width: 130px;
  height: 130px;
  top: 30%;
  right: 10%;
  animation: float-shape-4 24s ease-in-out infinite;
}

.tech-stack-bar .section-shapes .shape-t2 {
  width: 80px;
  height: 80px;
  top: 50%;
  left: 15%;
  animation: float-shape-6 20s ease-in-out infinite reverse;
}

/* Project Showcase */
.section-dark .section-shapes .shape-p1 {
  width: 160px;
  height: 160px;
  top: 15%;
  left: 3%;
  animation: float-shape-1 23s ease-in-out infinite;
}

.section-dark .section-shapes .shape-p2 {
  width: 110px;
  height: 110px;
  top: 65%;
  right: 5%;
  animation: float-shape-3 19s ease-in-out infinite;
}

/* Contact */
#kontakt .section-shapes .shape-c1 {
  width: 140px;
  height: 140px;
  top: 25%;
  right: 5%;
  animation: float-shape-2 21s ease-in-out infinite;
}

#kontakt .section-shapes .shape-c2 {
  width: 90px;
  height: 90px;
  top: 60%;
  left: 8%;
  animation: float-shape-5 17s ease-in-out infinite;
}

/* ───────────────────────────────────────────────────────────
   19. UTILITY CLASSES
   ─────────────────────────────────────────────────────────── */
.case-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 15px;
}

.about-content .tech-list {
  margin-top: 20px;
}

/* Sprint Links */
.sprint-link {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 0;
  color: var(--accent-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.sprint-link:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  transform: translateX(5px);
}

.sprint-link:active {
  transform: translateX(3px);
}

/* ───────────────────────────────────────────────────────────
   20. SCOPE & ROI CARDS
   ─────────────────────────────────────────────────────────── */
.tech-scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: var(--container-wide);
  margin: 0 auto;
}

@media (width >= 768px) {
  .tech-scope-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.roi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--container-wide);
  margin: 0 auto;
}

@media (width >= 768px) {
  .roi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.roi-card {
  background: #0a0b12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  text-align: center;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.roi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.roi-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-card-hover);
}

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

.roi-number {
  display: block;
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--accent-primary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.roi-label {
  display: block;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.scope-card {
  background: #0a0b12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  transition: var(--transition-base);
}

.scope-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

.scope-card h3 {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.scope-description {
  color: var(--text-secondary);
  font-size: var(--text-body);
  margin-bottom: var(--space-4);
  font-style: italic;
}

.scope-card .check-list {
  margin-top: var(--space-4);
}

.scope-card .check-list li {
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

/* ───────────────────────────────────────────────────────────
   21. FAQ
   ─────────────────────────────────────────────────────────── */
.faq-list {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.faq-item {
  background: #0a0b12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  transition: var(--transition-base);
}

.faq-item:hover {
  border-color: var(--border-light);
}

.faq-item h3 {
  color: var(--text-primary);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.faq-item p {
  color: var(--text-secondary);
  font-size: var(--text-rg);
  line-height: var(--leading-relaxed);
}

.faq-item strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES (replacing inline styles)
   ═══════════════════════════════════════════════════════════ */

/* Links */
.link-underline {
  color: inherit;
  text-decoration: underline;
}

/* Text colors */
.text-brand {
  color: var(--brand-blue-1);
}

.text-faded {
  color: #888;
}

.text-muted-sm {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Legal page styles */
.legal-section-header {
  margin-bottom: 12px;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
}

.legal-container {
  max-width: 720px;
}

.legal-card {
  padding: 48px;
}

.legal-list {
  margin-bottom: 15px;
  padding-left: 20px;
  color: var(--text-muted);
}

.legal-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Page sections */
.section-hero-legal {
  min-height: 80vh;
  padding-top: 120px;
  padding-bottom: 80px;
}

.section-dark-bg {
  background: #000;
  padding: 40px 0;
}

/* Code/Mono text */
.mono-sm {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
}

/* RSS/Footer */
.rss-link {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.footer-note {
  font-size: 0.8rem;
  color: #888888;
  line-height: 1.5;
}

/* Out of scope box */
.out-of-scope-text {
  font-size: 0.8rem;
  color: #888888;
  line-height: 1.5;
}

/* Stats highlight */
.stat-highlight-text {
  margin-top: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

.stat-muted {
  color: #888;
  font-size: 0.9rem;
}

/* CTA Section */
.cta-center {
  padding: 1.5rem 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

/* Skip Link - allows keyboard users to skip navigation */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-primary);
  color: #000;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible - better keyboard navigation */
:focus-visible {
  outline: 2px solid var(--brand-blue-1);
  outline-offset: 2px;
}

/* Remove default focus outline when using mouse */
:focus:not(:focus-visible) {
  outline: none;
}

/* Focus styles for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-blue-1);
  outline-offset: 2px;
}

/* Form focus styles */
.form-group input:focus-visible,
.form-group textarea:focus-visible {
  border-color: var(--brand-blue-1);
  box-shadow: 0 0 0 3px rgba(101, 175, 225, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ═══════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 120px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--brand-blue-1);
  color: #000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(101, 175, 225, 0.3);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #7ab8e3;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(101, 175, 225, 0.4);
}

.back-to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (width <= 768px) {
  .back-to-top {
    bottom: 120px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT.CSS
   ═══════════════════════════════════════════════════════════ */
/**
 * ═══════════════════════════════════════════════════════════
 * FLOWBOTICS - LAYOUT STYLES
 * css/layout.css
 * ═══════════════════════════════════════════════════════════
 * 
 * Core layout components: Navigation, Hero, Container, Buttons
 * Extracted from styles.css
 */

/* ───────────────────────────────────────────────────────────
   1. BASE BODY (Override)
   ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: #000;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ───────────────────────────────────────────────────────────
   2. CONTAINER
   ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  position: relative;
  z-index: 2;
}

/* ───────────────────────────────────────────────────────────
   3. NAVIGATION
   ─────────────────────────────────────────────────────────── */
.nav {
  position: absolute;
  top: 0;
  width: 100%;
  padding: var(--space-6) 0;
  z-index: 100;
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-actions {
  margin-left: auto;
}

.nav-logo-custom {
  height: 48px !important;
  width: auto !important;
  max-width: 230px !important;
  object-fit: contain;
  transition: var(--transition-base);
}

.nav-logo-custom:hover {
  transform: scale(1.05);
  filter: drop-shadow(var(--shadow-icon-hover));
}

.btn-blog {
  padding: 8px 16px;
  font-size: 0.8rem;
  background: #0a0b12;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.btn-blog:hover {
  background: #0d0e16;
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(101 175 225 / 25%);
}

/* ───────────────────────────────────────────────────────────
   4. HERO SECTION
   ─────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-20);
  padding-bottom: var(--space-10);
  position: relative;
  background: transparent;
  overflow: hidden;
}

.hero-content {
  text-align: left;
  max-width: var(--container-narrow);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70vh;
}

/* Hero Left aligned (default for all pages) */
.hero-left {
  text-align: left;
}

.hero-left .hero-badge,
.hero-left .hero-title,
.hero-left .hero-subline,
.hero-left .hero-stats-premium {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(134, 25, 143, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: rgba(217, 70, 239, 0.1);
  border: 1px solid rgba(217, 70, 239, 0.3);
  border-radius: var(--radius-full);
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.hero-title {
  font-size: var(--text-8xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  margin: var(--space-6) 0;
}

.hero-title span {
  background: linear-gradient(135deg, var(--accent-primary), var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subline {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 0 var(--space-8) 0;
}

.hero-left .hero-subline {
  margin-left: 0;
  margin-right: auto;
}

.hero-cta {
  margin-top: var(--space-8);
}

/* Hero Stats */
.hero-stats-premium {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-12) 0;
}

.hero-left .hero-stats-premium {
  justify-content: flex-start;
}

.hero-stat-item {
  text-align: left;
}

/* Force left alignment overrides */
.hero-split {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.hero-left {
  align-items: flex-start !important;
}

.hero-left .hero-badge,
.hero-left .hero-title,
.hero-left .hero-subline {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Mobile: keep left aligned */
@media (max-width: 900px) {
  .hero-split {
    text-align: left !important;
  }

  .hero-left {
    align-items: flex-start !important;
  }
}

/* ───────────────────────────────────────────────────────────
   BLOG PAGES - Left aligned headers
   ─────────────────────────────────────────────────────────── */
.blog-page .sprint-header-compact,
.blog-post-page .sprint-header-compact {
  text-align: left;
}

.blog-page .sprint-header-compact .container,
.blog-post-page .sprint-header-compact .container {
  text-align: left;
}

.blog-page .sprint-title-main,
.blog-post-page .sprint-title-main,
.blog-page .sprint-subtitle,
.blog-post-page .sprint-subtitle {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.blog-page .hero-badge,
.blog-post-page .hero-badge {
  text-align: left;
  margin-left: 0;
}

.hero-stat-number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.hero-stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-subtle);
}

/* ───────────────────────────────────────────────────────────
   5. BUTTONS
   ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: var(--text-on-dark);
  border-color: transparent;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(217, 70, 239, 0.3);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.btn-ghost:hover {
  border-color: var(--accent-primary);
  background: rgba(217, 70, 239, 0.05);
}

/* ───────────────────────────────────────────────────────────
   6. SECTIONS
   ─────────────────────────────────────────────────────────── */
.section {
  padding: var(--space-25) 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section > .container {
  width: 100%;
}

.section-dark {
  background: #000;
  position: relative;
}

.section-alt {
  position: relative;
  width: 100%;
  background: #000;
  z-index: 1;
  padding-top: var(--space-20);
  padding-bottom: var(--space-30);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header h2 {
  font-size: var(--text-6xl);
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ───────────────────────────────────────────────────────────
   7. FOOTER
   ─────────────────────────────────────────────────────────── */
.footer {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-deep);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-links {
  display: flex;
  gap: var(--space-6);
}

.footer-links a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent-primary);
}

.footer-copy {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════
   COMPONENTS.CSS
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   FLOWBOTICS COMPONENTS CSS
   Extracted inline styles from index.html
   Includes: Hero, Sprint Cards, Case Studies, About, Contact
   
   Note: All CSS variables are now defined in styles.css
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   BASE STYLES OVERRIDE
   ═══════════════════════════════════════════════════════════ */
body {
  background-color: #000;
  color: #fff;
}

/* Tech Grid Background */
.tech-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgb(195 183 215 / 3%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(195 183 215 / 3%) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 0%, black 30%, transparent 70%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION STYLES
   ═══════════════════════════════════════════════════════════ */
.hero {
  padding: 140px 0 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.hero-bg-gradient {
  display: none !important;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 100%;
  min-width: 0;
}

.hero-badge {
  font-family: "Fira Code", monospace;
  font-size: 0.8rem;
  color: #d946ef;
  background: rgba(217, 70, 239, 0.08);
  padding: 8px 16px;
  border-radius: 30px;
  border: 1px solid rgba(217, 70, 239, 0.25);
  display: inline-block;
  width: fit-content;
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: 5rem;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.04em;
}

.hero-title span {
  background: linear-gradient(
    90deg,
    #65afe1 0%,
    #a5b4fc 25%,
    #65afe1 50%,
    #8fb8e3 75%,
    #65afe1 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.hero-subline {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  color: #fff9f9 !important;
}

.hero-stats-row {
  display: flex;
  gap: 24px;
  margin: 6px 0;
}

.hero-stat {
  display: flex;
  flex-direction: column;
}

.hero-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.hero-stat-label {
  font-size: 0.75rem;
  color: #888;
}

.hero-cta {
  margin-top: 10px;
}

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hero Trust Bar Small */
.hero-stats-sm {
  padding: 8px 16px;
  gap: 16px;
}

.hero-stats-sm .stat {
  transform: none;
  gap: 4px;
}

.hero-stats-sm .stat-icon {
  width: 20px;
  height: 20px;
}

.hero-stats-sm .stat-icon svg {
  width: 12px;
  height: 12px;
}

.hero-stats-sm .stat-num {
  font-size: 1.1rem;
  font-weight: 700;
}

.hero-stats-sm .stat-label {
  font-size: 0.7rem;
  color: #c3b7d7;
}

.hero-stats-sm .stat-sep {
  height: 24px;
}

@media (width <= 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-left {
    align-items: center;
  }
  .hero-title {
    font-size: 2.2rem;
  }
  .code-editor {
    display: none;
  }
  .hero-right {
    display: none !important;
  }
  .sprint-flow {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CODE WINDOW / EDITOR VISUAL
   ═══════════════════════════════════════════════════════════ */
.code-window-wrapper {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.code-window {
  background: rgb(7 8 16 / 95%);
  border: 1px solid rgb(101 175 225 / 25%);
  border-radius: 14px;
  padding: 22px;
  max-width: 420px;
  box-shadow:
    0 0 0 1px rgb(101 175 225 / 10%),
    0 25px 50px -12px rgb(0 0 0 / 60%),
    0 0 40px rgb(101 175 225 / 15%);
  transform: rotateY(-8deg) rotateX(4deg) translateZ(20px);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  animation: float 6s ease-in-out infinite;
}

.code-window:hover {
  transform: rotateY(-4deg) rotateX(2deg) translateZ(30px);
  box-shadow:
    0 0 0 1px rgb(101 175 225 / 20%),
    0 35px 60px -12px rgb(0 0 0 / 70%),
    0 0 60px rgb(101 175 225 / 25%);
}

@keyframes float {
  0%,
  100% {
    transform: rotateY(-8deg) rotateX(4deg) translateZ(20px) translateY(0);
  }
  50% {
    transform: rotateY(-8deg) rotateX(4deg) translateZ(20px) translateY(-8px);
  }
}

.code-header {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(101 175 225 / 15%);
}

.code-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentcolor;
}

.code-dot.red {
  background: #ff5f56;
  color: #ff5f56;
}
.code-dot.yellow {
  background: #ffbd2e;
  color: #ffbd2e;
}
.code-dot.green {
  background: #27c93f;
  color: #27c93f;
}

.code-filename {
  margin-left: auto;
  font-size: 0.7rem;
  color: #64748b;
  font-family: "Fira Code", monospace;
}

.code-content {
  font-family: "Fira Code", monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #e2e8f0;
}

.code-line {
  display: flex;
  gap: 12px;
  opacity: 0;
  animation: type-in 0.5s ease forwards;
}

.code-line:nth-child(1) {
  animation-delay: 0.5s;
}
.code-line:nth-child(2) {
  animation-delay: 0.8s;
}
.code-line:nth-child(3) {
  animation-delay: 1.1s;
}
.code-line:nth-child(4) {
  animation-delay: 1.4s;
}
.code-line:nth-child(5) {
  animation-delay: 1.7s;
}
.code-line:nth-child(6) {
  animation-delay: 2s;
}
.code-line:nth-child(7) {
  animation-delay: 2.3s;
}
.code-line:nth-child(8) {
  animation-delay: 2.6s;
}
.code-line:nth-child(9) {
  animation-delay: 2.9s;
}
.code-line:nth-child(10) {
  animation-delay: 3.2s;
}
.code-line:nth-child(11) {
  animation-delay: 3.5s;
}
.code-line:nth-child(12) {
  animation-delay: 3.8s;
}
.code-line:nth-child(13) {
  animation-delay: 4.1s;
}

@keyframes type-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.code-num {
  color: #475569;
  min-width: 22px;
  text-align: right;
  user-select: none;
}

.code-comment {
  color: #64748b;
  font-style: italic;
}
.code-cmd {
  color: #65afe1;
  text-shadow: 0 0 10px rgb(101 175 225 / 30%);
}
.code-str {
  color: #a5b4fc;
}
.code-var {
  color: #f9a8d0;
}
.code-keyword {
  color: #94e2d5;
}

@media (width <= 900px) {
  .hero-right {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SPRINT CARDS - Masonry Grid Layout
   ═══════════════════════════════════════════════════════════ */
.sprints-section {
  padding: 80px 0;
  background: transparent;
}

.sprints-subtitle {
  color: #8b7bb5;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.sprints-header {
  text-align: center;
  margin-bottom: 50px;
}

.sprints-title {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 15px;
}

.sprints-subtitle {
  color: #cbd5e1;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.sprints-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (width <= 1024px) {
  .sprints-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 640px) {
  .sprints-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact 2x2 Grid für Sprint-Unterseiten (4 Karten) */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (width <= 768px) {
  .scope-grid {
    grid-template-columns: 1fr;
  }
}

/* Sprint Card Base */
.sprint-card {
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Accent lines - partial (50%) by default, full (100%) on hover */
.sprint-accent-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 3px;
  background: var(--card-color);
  opacity: 0.8;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px var(--card-color);
}

.sprint-accent-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 50%;
  background: var(--card-color);
  opacity: 0.8;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px var(--card-color);
}

.sprint-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 30px var(--card-color);
  background: rgba(15, 15, 15, 0.98);
  border-color: var(--card-color);
}

.sprint-card:hover .sprint-accent-top {
  width: 100%;
  opacity: 1;
  box-shadow: 0 0 20px var(--card-color);
}

.sprint-card:hover .sprint-accent-left {
  height: 100%;
  opacity: 1;
  box-shadow: 0 0 20px var(--card-color);
}

/* Varying padding for masonry effect */
.sprint-card:nth-child(odd) {
  padding-bottom: 48px;
}
.sprint-card:nth-child(even) {
  padding-bottom: 32px;
}
.sprint-card:nth-child(3n) {
  padding-bottom: 56px;
}

/* Sprint Color Variables - Vibrant Neon System */
.card-inspector {
  --card-color: var(--sprint-inspector);
}
.card-optimizer {
  --card-color: var(--sprint-optimizer);
}
.card-fortress {
  --card-color: var(--sprint-fortress);
}
.card-automator {
  --card-color: var(--sprint-automator);
}
.card-migrator {
  --card-color: var(--sprint-migrator);
}
.card-vault {
  --card-color: var(--sprint-vault);
}
.card-guardian {
  --card-color: var(--sprint-guardian);
}
.card-orchestrator {
  --card-color: var(--sprint-orchestrator);
}

/* Sprint Card Header */
.sprint-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* Sprint Meta (ID + Duration) */
.sprint-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sprint-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.sprint-id svg {
  color: var(--card-color);
  stroke: var(--card-color);
}

.sprint-duration {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: #c3b7d7;
}

/* Sprint Badges */
.sprint-badge {
  font-family: "Fira Code", monospace;
  font-size: 0.7rem;
  color: rgb(255 255 255 / 70%);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 0;
}

.sprint-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Badge Colors */
.badge-inspector,
.badge-optimizer,
.badge-fortress,
.badge-automator,
.badge-vault,
.badge-cleaner,
.badge-migrator {
  background: rgba(10, 10, 10, 0.9) !important;
  border-color: rgba(205, 223, 212, 0.5);
}

.badge-case {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7) !important;
  white-space: nowrap;
}

.badge-case.badge-inspector {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-inspector svg {
  stroke: var(--sprint-inspector);
}

.badge-case.badge-optimizer {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-optimizer svg {
  stroke: var(--sprint-optimizer);
}

.badge-case.badge-fortress {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-fortress svg {
  stroke: var(--sprint-fortress);
}

.badge-case.badge-automator {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-automator svg {
  stroke: var(--sprint-automator);
}

.badge-case.badge-migrator {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-migrator svg {
  stroke: var(--sprint-migrator);
}

.badge-case.badge-vault {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-vault svg {
  stroke: var(--sprint-vault);
}

.badge-case.badge-guardian {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-guardian svg {
  stroke: var(--sprint-guardian);
}

.badge-case.badge-orchestrator {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.badge-case.badge-orchestrator svg {
  stroke: var(--sprint-orchestrator);
}

/* Sprint Title & Description */
.sprint-title {
  font-size: 1.3rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
}

.sprint-desc {
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Sprint Deliverables */
.sprint-deliverables {
  background: #070810;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.deliverables-header {
  font-family: "Fira Code", monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.deliverables-list svg {
  color: var(--card-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: "Fira Code", monospace;
  font-size: 0.8rem;
  color: #c3b7d7;
  margin-bottom: 8px;
  line-height: 1.4;
}

.deliverables-list li:last-child {
  margin-bottom: 0;
}

/* Sprint Link - uses card accent color */
.sprint-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--card-color, #65afe1);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: all 0.2s ease;
}

.sprint-link:hover {
  color: var(--card-color, #8fb8e3);
  filter: brightness(1.2);
  transform: translateX(4px);
}

@media (width <= 768px) {
  .sprints-grid {
    padding: 0 15px;
  }
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY STYLES
   ═══════════════════════════════════════════════════════════ */
.case-study-header-fix {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  padding: 1.25rem 1.5rem !important;
}

.case-study-header-left-fix {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.case-study-title-fix {
  text-align: left !important;
  margin: 0 !important;
}

.case-study-title-fix h3 {
  font-size: 1.35rem !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #fff, #4da8ff) !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.3 !important;
}

.client-logo-link-fix {
  flex-shrink: 0 !important;
}

.client-logo-link-fix img {
  width: 120px !important;
  height: auto !important;
  max-height: 50px !important;
  object-fit: contain !important;
}

.case-study-tech-stack-custom {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  gap: 1rem !important;
}

@media (width <= 768px) {
  .case-study-header-fix {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1rem 1rem 0.75rem !important;
    gap: 0.75rem !important;
  }

  .case-study-header-left-fix {
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .case-study-badges {
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .case-study-title-fix {
    text-align: center !important;
  }

  .case-study-title-fix h3 {
    text-align: center !important;
    font-size: 1.15rem !important;
  }

  .client-logo-link-fix {
    margin-top: 0.5rem !important;
  }

  .client-logo-link-fix img {
    width: 100px !important;
    max-height: 40px !important;
  }

  .case-study-tech-stack-custom {
    padding: 0.5rem 1rem 0.75rem !important;
    gap: 0.5rem !important;
  }

  .case-study-preview {
    padding: 0.5rem 1rem 0.75rem !important;
  }

  .case-expand-btn {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
  }

  .case-study-unified {
    padding: 1rem 0.75rem !important;
  }

  .unified-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  .unified-item {
    padding: 0.75rem !important;
  }

  .unified-desc {
    font-size: 0.8rem !important;
  }
}

/* Case Study Unified Grid */
.case-study-unified {
  padding: 1.5rem 1.25rem;
  background: #000;
}

.unified-title {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgb(255 255 255 / 50%);
  margin: 0 0 1.5rem;
}

.unified-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (width <= 768px) {
  .unified-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.unified-item {
  background: #0a0b12;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 10px;
  padding: 0.875rem;
  text-align: center;
  transition: all 0.3s ease;
}

.unified-item:hover {
  background: #0d0e16;
  border-color: rgb(101 175 225 / 30%);
  transform: translateY(-2px);
}

.unified-item.highlight {
  background: rgb(101 175 225 / 10%);
  border-color: rgb(101 175 225 / 40%);
}

.unified-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.unified-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #65afe1;
  margin-bottom: 0.5rem;
}

.unified-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 80%);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT SECTION STYLES
   ═══════════════════════════════════════════════════════════ */
.about-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.about-animated-lines {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  pointer-events: none;
}

.about-dark-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-unified-card {
  background: #0a0a0a;
  border: 1px solid rgb(255 255 255 / 10%);
  border-top: 4px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

.about-unified-card:hover {
  border-color: rgb(255 255 255 / 20%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.about-left {
  display: flex;
  flex-direction: column;
}

.about-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (width <= 900px) {
  .about-unified-card {
    grid-template-columns: 1fr;
    padding: 40px 30px;
    gap: 40px;
  }

  .about-left {
    display: flex;
    flex-direction: column;
  }

  .about-left .about-code-badge {
    order: -2;
  }

  .about-left .about-title {
    order: -1;
  }

  .about-right {
    order: 0;
  }
}

.about-code-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: #65afe1;
  background: rgb(101 175 225 / 8%);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #65afe1;
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 700;
}

.about-title {
  font-size: 2.8rem;
  color: #fff;
  font-weight: 800;
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.about-text {
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

.process-list-dark {
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-list-dark li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.process-list-dark li:last-child {
  border-bottom: none;
}

.process-num-dark {
  width: 32px;
  height: 32px;
  background: rgb(101 175 225 / 10%);
  border: 1px solid rgb(101 175 225 / 30%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #65afe1;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.process-title-dark {
  color: #fff;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.process-desc-dark {
  color: #888;
  font-size: 0.9rem;
  line-height: 1.5;
}

.about-profile-img {
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   CONTACT SECTION STYLES
   ═══════════════════════════════════════════════════════════ */
.contact-section {
  padding: 80px 0;
}

.contact-wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-header h2 {
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 12px;
}

.contact-header p {
  color: #c3b7d7;
  font-size: 1.1rem;
}

.contact-form-bright {
  background: #0d0e16;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 20px;
  padding: 48px;
}

.form-row-modern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group-modern {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group-modern.full {
  grid-column: 1 / -1;
}

.form-group-modern label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #65afe1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group-modern input,
.form-group-modern textarea {
  background: #d3d3d3;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 16px 18px;
  color: #070810;
  font-size: 1rem;
  transition: all 0.2s;
}

.form-group-modern input:focus,
.form-group-modern textarea:focus {
  outline: none;
  border-color: #65afe1;
  background: #d3d3d3;
  box-shadow: 0 0 0 3px rgba(101, 175, 225, 0.25);
}

.form-group-modern input::placeholder,
.form-group-modern textarea::placeholder {
  color: #555; /* Improved contrast: 4.7:1 for WCAG AA compliance */
}

.form-disclaimer {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 10px 0;
  line-height: 1.3;
}

.form-disclaimer a {
  color: #65afe1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-disclaimer a:hover {
  color: #8bd7f8;
}

/* Sprint page disclaimer uses sprint color */
.sprint-page .form-disclaimer a {
  color: var(--sprint-color, #65afe1);
}

.sprint-page .form-disclaimer a:hover {
  filter: brightness(1.2);
}

.form-note {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 16px 0 0 0;
  line-height: 1.3;
  font-family: "Inter", sans-serif;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  background: #65afe1;
  color: #070810;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 10px;
}

.btn-submit:hover {
  background: #7ab8e3;
  transform: translateY(-2px);
}

/* Mobile adjustments for form elements */
@media (max-width: 600px) {
  .form-disclaimer {
    font-size: 0.65rem;
  }

  .form-note {
    font-size: 0.65rem;
    margin-top: 12px;
  }
}

/* Submit Button Loading State */
.btn-submit.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.btn-submit.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: 8px;
  margin-top: -8px;
  border: 2px solid transparent;
  border-top-color: #070810;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (width <= 600px) {
  .form-row-modern {
    grid-template-columns: 1fr;
  }

  .contact-form-bright {
    padding: 24px;
  }
}

/* Form Validation Styles */
.contact-form-bright .form-group-modern.has-error input,
.contact-form-bright .form-group-modern.has-error textarea {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}

.contact-form-bright .form-group-modern.has-error input:focus,
.contact-form-bright .form-group-modern.has-error textarea:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4) !important;
}

.contact-form-bright .form-group-modern .field-error {
  display: none;
  color: #f87171;
  font-size: 0.85rem;
  margin-top: 8px;
  font-weight: 500;
}

.contact-form-bright .form-group-modern.has-error .field-error {
  display: block;
}

.contact-form-bright .checkbox-label.has-error .checkmark {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}

.contact-form-bright .checkbox-label.has-error .checkbox-text {
  color: #f87171;
}

.contact-form-bright .checkbox-label.has-error .checkbox-text a {
  color: #f87171;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE ABOUT GRID FIXES
   ═══════════════════════════════════════════════════════════ */
.about-grid {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
  gap: 3rem !important;
}

.about-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

.about-card {
  width: 100% !important;
  max-width: none !important;
}

.process-list-right {
  margin-top: 2rem !important;
  padding: 1.5rem !important;
  background: #0a0b12 !important;
  border: 1px solid rgb(255 255 255 / 8%) !important;
  border-radius: 12px !important;
}

.process-list-right li {
  margin-bottom: 1rem !important;
}

@media screen and (width <= 900px) {
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SPRINT ICON COLORS (for card icons)
   ═══════════════════════════════════════════════════════════ */
.card-inspector .card-icon {
  color: var(--sprint-inspector);
}
.card-optimizer .card-icon {
  color: var(--sprint-optimizer);
}
.card-fortress .card-icon {
  color: var(--sprint-fortress);
}
.card-automator .card-icon {
  color: var(--sprint-automator);
}
.card-vault .card-icon {
  color: var(--sprint-vault);
}
.card-migrator .card-icon {
  color: var(--sprint-migrator);
}
.card-guardian .card-icon {
  color: var(--sprint-guardian);
}
.card-orchestrator .card-icon {
  color: var(--sprint-orchestrator);
}

/* Sprint Deliverables legacy styles */
.deliverables {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #e5e7eb;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.deliverables strong {
  color: var(--text-color);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   BLOG PAGE STYLES
   ═══════════════════════════════════════════════════════════ */

/* Blog Header Section */
.sprint-header-compact {
  padding: 140px 0 60px;
  text-align: center;
}

.sprint-title-main {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.sprint-title-main span {
  color: var(--brand-blue-1);
}

.sprint-header-compact .sprint-subtitle {
  font-size: 1rem;
  color: #fff9f9;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Blog Feed Section */
.blog-feed-section {
  padding: 40px 0 80px;
}

.blog-grid-landscape {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Landscape Blog Card Layout */
.landscape-card {
  padding: 0;
  overflow: hidden;
}

.landscape-card .blog-card-link {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
}

.blog-image-side {
  position: relative;
  height: 100%;
  min-height: 220px;
}

.blog-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-date-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--brand-white);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.blog-content-side {
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.landscape-card .sprint-card-header {
  margin-bottom: 12px;
}

.landscape-card .sprint-title {
  font-size: 1.5rem;
  margin-bottom: 12px;
  line-height: 1.3;
}

.landscape-card .sprint-desc {
  margin-bottom: 20px;
  flex-grow: 1;
}

/* RSS Section */
.rss-section {
  padding: 40px 0 80px;
}

.rss-card {
  text-align: center;
  padding: 48px;
}

.rss-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.rss-card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.rss-card p {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.rss-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--brand-blue-1);
  color: #000;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.rss-btn:hover {
  background: var(--brand-blue-2);
  transform: translateY(-2px);
}

/* Mobile adjustments for blog */
@media (width <= 768px) {
  .sprint-header-compact {
    padding: 120px 0 40px;
  }

  .sprint-title-main {
    font-size: 2.5rem;
  }

  .landscape-card .blog-card-link {
    grid-template-columns: 1fr;
  }

  .blog-image-side {
    min-height: 180px;
  }

  .blog-content-side {
    padding: 24px;
  }

  .landscape-card .sprint-title {
    font-size: 1.2rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   SPRINTS COMPACT GRID (NEW LAYOUT)
   ═══════════════════════════════════════════════════════════ */

.sprint-pillar {
  margin-bottom: 48px;
}

.sprint-pillar:last-child {
  margin-bottom: 0;
}

.pillar-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pillar-title span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.sprints-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sprints-compact-grid.two-col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .sprints-compact-grid,
  .sprints-compact-grid.two-col {
    grid-template-columns: 1fr;
  }
}

.sprint-compact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.sprint-compact-card:hover {
  transform: translateX(4px);
  border-color: var(--card-color);
  background: rgba(15, 15, 15, 0.98);
}

.compact-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-color);
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

.sprint-compact-card:hover .compact-accent {
  opacity: 1;
  box-shadow: 0 0 12px var(--card-color);
}

.compact-content {
  flex: 1;
  min-width: 0;
}

.compact-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.compact-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compact-icon {
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all 0.25s ease;
}

.sprint-compact-card:hover .compact-icon {
  opacity: 1;
  filter: grayscale(0%);
}

.compact-content h4 {
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 6px 0;
  font-weight: 600;
  line-height: 1.3;
}

.compact-content p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

.compact-arrow {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.sprint-compact-card:hover .compact-arrow {
  color: var(--card-color);
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM SELECT DROPDOWN STYLING - MATCHES INPUT FIELDS
   ═══════════════════════════════════════════════════════════ */

.form-group-modern select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 16px 48px 16px 18px;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  color: #070810;
  background: #d3d3d3;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2365AFE1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
}

.form-group-modern select:hover {
  border-color: rgba(0, 0, 0, 0.35);
}

.form-group-modern select:focus {
  outline: none;
  border-color: #65afe1;
  box-shadow: 0 0 0 3px rgba(101, 175, 225, 0.25);
}

.form-group-modern select:required:invalid {
  color: #555;
}

.form-group-modern select option {
  background: #d3d3d3;
  color: #070810;
  padding: 12px;
  font-size: 0.95rem;
}

.form-group-modern select option:first-child {
  color: #666;
}

/* Error state for form fields - thick red border */
.form-group-modern select.has-error,
.form-group-modern select[style*="border-color: rgb(239"],
.form-group-modern input.has-error,
.form-group-modern input[style*="border-color: rgb(239"] {
  border: 2px solid #b91c1c !important;
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.35) !important;
}

/* Fix spacing between form rows */
.form-row-modern {
  margin-bottom: 20px;
}

.form-row-modern:last-of-type {
  margin-bottom: 0;
}

.form-group-modern.full {
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════
   CASE-STUDIES.CSS
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   CASE STUDIES - Clean Rebuild
   Flowbotics Website - Arbotex Case Study Card Only
   ═══════════════════════════════════════════════════════════ */

/* Grid */
#case-studies-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Section Header */
.section-dark .section-header {
  margin-bottom: 1.5rem;
}

.section-dark .section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.section-dark .section-header p {
  font-size: 1rem;
  color: #888;
}

/* Card Base - High Specificity */
#case-studies-container .case-study-card {
  position: relative;
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Gradient Border - Arbotex Brand Colors (Grau-Rot) */
#case-studies-container .case-study-card {
  border: 2px solid transparent;
  background:
    linear-gradient(#1a1a1a, #1a1a1a) padding-box,
    linear-gradient(135deg, #8b8b8b 0%, #a0a0a0 25%, #c41e3a 50%, #a0a0a0 75%, #8b8b8b 100%)
      border-box;
}

/* Hover */
#case-studies-container .case-study-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(196, 30, 58, 0.15);
  background:
    linear-gradient(#1a1a1a, #1a1a1a) padding-box,
    linear-gradient(135deg, #a5a5a5 0%, #b8b8b8 25%, #d6304a 50%, #b8b8b8 75%, #a5a5a5 100%)
      border-box;
}

/* Header */
#case-studies-container .case-study-card .case-study-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
  background: transparent;
}

#case-studies-container .case-study-card .case-study-header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Badges */
#case-studies-container .case-study-card .case-study-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#case-studies-container .case-study-card .badge-case {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

#case-studies-container .case-study-card .badge-case svg {
  width: 12px;
  height: 12px;
}

#case-studies-container .case-study-card .badge-fortress svg {
  color: #a0a0a0;
}

#case-studies-container .case-study-card .badge-cleaner svg {
  color: #c41e3a;
}

/* Title */
#case-studies-container .case-study-card .case-study-title {
  padding: 0;
}

#case-studies-container .case-study-card .case-study-title h3 {
  font-size: 1.25rem;
  margin: 0;
  color: #fff;
  line-height: 1.3;
}

/* Logo */
#case-studies-container .case-study-card .client-logo-link {
  flex-shrink: 0;
}

#case-studies-container .case-study-card .client-logo-link img {
  width: 110px;
  height: auto;
  max-height: 45px;
  object-fit: contain;
}

/* Expandable Content */
#case-studies-container .case-study-card .case-study-expandable {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.5s ease,
    opacity 0.3s ease;
  opacity: 0;
}

#case-studies-container .case-study-card.expanded .case-study-expandable {
  max-height: 2000px;
  opacity: 1;
}

/* Unified Grid */
#case-studies-container .case-study-card .case-study-unified {
  padding: 1rem 1.25rem;
  background: transparent;
}

#case-studies-container .case-study-card .unified-title {
  text-align: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

#case-studies-container .case-study-card .unified-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

#case-studies-container .case-study-card .unified-item {
  background: #242424;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
  transition: all 0.3s ease;
}

#case-studies-container .case-study-card .unified-item:hover {
  background: #2a2a2a;
  border-color: rgba(196, 30, 58, 0.4);
  transform: translateY(-2px);
}

#case-studies-container .case-study-card .unified-item.highlight {
  background: #242424;
  border-color: #c41e3a;
}

#case-studies-container .case-study-card .unified-icon {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  color: #c41e3a;
}

#case-studies-container .case-study-card .unified-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a0a0a0;
  margin-bottom: 0.35rem;
}

#case-studies-container .case-study-card .unified-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════ */
@media screen and (width <= 768px) {
  #case-studies-container .case-study-card {
    border-radius: 12px;
  }

  #case-studies-container .case-study-card .case-study-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1rem 0.75rem;
    gap: 0.75rem;
  }

  #case-studies-container .case-study-card .case-study-header-left {
    align-items: center;
    gap: 0.5rem;
  }

  #case-studies-container .case-study-card .case-study-badges {
    justify-content: center;
  }

  #case-studies-container .case-study-card .case-study-title h3 {
    font-size: 1.1rem;
    text-align: center;
  }

  #case-studies-container .case-study-card .client-logo-link img {
    width: 90px;
    max-height: 35px;
  }

  #case-studies-container .case-study-card .case-study-unified {
    padding: 0.75rem;
    background: transparent;
  }

  #case-studies-container .case-study-card .unified-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  #case-studies-container .case-study-card .unified-item {
    padding: 0.625rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  #case-studies-container .case-study-card .unified-desc {
    font-size: 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM.CSS
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   FLOWBOTICS PREMIUM DESIGN SYSTEM v2026 - SOLID EDITION
   Unified Material · Solid Backgrounds · No Glassmorphism
   
   Diese Datei überschreibt und erweitert styles.css & components.css
   
   Note: All CSS variables are now defined in styles.css
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. SEAMLESS BACKGROUND ARCHITECTURE
   ─────────────────────────────────────────────────────────── */

/* Tech Grid deaktiviert */
.tech-grid {
  display: none !important;
}

/* Premium Ambient Canvas - Pitch Black Hintergrund */
.ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #000;
  overflow: hidden;
}

/* ───────────────────────────────────────────────────────────
   3. HERO STATS PREMIUM - SOLID DESIGN
   ─────────────────────────────────────────────────────────── */
.hero-stats-premium {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--solid-card);
  border: 1px solid rgb(195 183 215 / 12%);
  border-radius: 0 16px 16px;

  /* KEIN backdrop-filter mehr */
  position: relative;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-stats-premium::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 50%;
  height: 2px;
  background: #c3b7d7;
}

.hero-stats-premium::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2px;
  height: 50%;
  background: #c3b7d7;
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 0 12px;
}

/* Extra padding for stat labels to prevent text touching edges */
.hero-stat-number {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #c3b7d7 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
  white-space: nowrap;
  margin: 0 0 8px;
  padding: 0;
  display: block;
  line-height: 1;
}

.hero-stat-highlight .hero-stat-number {
  display: block;
  line-height: 1;
}

/* ───────────────────────────────────────────────────────────
   4. WORKFLOW SECTION - SOLID DESIGN
   ─────────────────────────────────────────────────────────── */
.workflow-section {
  padding: 100px 0;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.workflow-header {
  text-align: center;
  margin-bottom: 60px;
}

.workflow-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: #8bd7f8;
  background: rgb(139 215 248 / 8%);
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgb(139 215 248 / 25%);
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.workflow-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.workflow-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.workflow-step {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 32px;
  background: var(--solid-card);
  border: 1px solid rgb(195 183 215 / 10%);
  border-radius: 0 16px 16px;
  position: relative;
  transition: all 0.3s ease;

  /* KEIN backdrop-filter */
}

.workflow-step:hover {
  background: var(--solid-surface);
  border-color: rgb(101 175 225 / 30%);
  transform: translateY(-4px);
}

.workflow-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 40%;
  height: 2px;
  background: #c3b7d7;
}

.workflow-step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2px;
  height: 40%;
  background: #c3b7d7;
}

.workflow-step-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 2.5rem;
  font-weight: 800;
  color: rgb(195 183 215 / 40%);
  line-height: 1;
  min-width: 60px;
}

.workflow-step-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.workflow-step-content p {
  font-size: 0.95rem;
  color: #a0a0b0;
  line-height: 1.6;
  margin-bottom: 16px;
}

.workflow-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.workflow-step-list li {
  font-size: 0.85rem;
  color: #c3b7d7;
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}

.workflow-step-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #c3b7d7;
}

.workflow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(195 183 215 / 40%);
  padding: 0 20px;
  align-self: center;
}

.workflow-step:last-child .workflow-arrow {
  display: none;
}

@media (width <= 900px) {
  .workflow-steps {
    flex-direction: column;
  }

  .workflow-arrow {
    display: none;
  }

  .workflow-step {
    margin-bottom: 20px;
  }
}

.hero-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e7e7ef;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
  margin-bottom: 2px;
  padding-right: 4px;
}

.hero-stat-sublabel {
  font-size: 0.7rem;
  color: #889;
  font-weight: 400;
  line-height: 1.3;
}

.hero-stat-divider {
  width: 1px;
  min-height: 60px;
  background: linear-gradient(180deg, transparent, rgb(195 183 215 / 30%), transparent);
  align-self: center;
}

@media (width <= 768px) {
  .hero-stats-premium {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    width: 100%;
  }

  .hero-stat-item {
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 8px 0;
  }

  .hero-stat-number {
    font-size: 2rem;
    margin-bottom: 8px;
  }

  .hero-stat-divider {
    width: 1px;
    height: 30px;
    min-height: 30px;
    background: linear-gradient(180deg, transparent, rgb(195 183 215 / 20%), transparent);
    margin: 0 4px;
  }
}

/* ───────────────────────────────────────────────────────────
   5. UNIFIED MATERIAL COMPONENTS - SOLID (NO GLASS)
   ─────────────────────────────────────────────────────────── */

/* Base Material Card - SOLID */
.material-card {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;

  /* KEIN backdrop-filter */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Material Card Gradient - Disabled for Case Study cards */
.material-card:not(.case-study-card)::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}

/* Case study card gradient border - now handled in case-studies.css */
/* .material-card.case-study-card::before {
  display: none !important;
} */

.material-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Sprint Cards - Unified Material SOLID mit L-förmigem Akzent */
.sprint-card {
  background: var(--solid-card);
  border: 1px solid rgb(195 183 215 / 10%);
  border-radius: 0 var(--material-radius) var(--material-radius) var(--material-radius);

  /* KEIN backdrop-filter */
  padding: var(--card-padding);
  box-shadow: var(--material-shadow);
  transition:
    transform var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.sprint-card:hover {
  transform: translateY(-6px);
  border-color: var(--glow-border);
  box-shadow:
    var(--material-shadow-hover),
    0 0 60px rgb(101 175 225 / 10%);
  background: var(--solid-surface);
}

/* Case Study Card - Styles moved to case-studies.css for consistency */

/* About Card - Unified SOLID mit L-Akzent */
.about-unified-card {
  background: var(--solid-card);
  border: var(--material-border);
  border-radius: 0 var(--material-radius) var(--material-radius) var(--material-radius);

  /* KEIN backdrop-filter */
  box-shadow: var(--material-shadow);
  padding: 60px;
  position: relative;
}

.about-unified-card:hover {
  border-color: rgb(255 255 255 / 20%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.about-unified-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 50%;
  height: 2px;
  background: #c3b7d7;
  transition:
    width var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}

.about-unified-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2px;
  height: 50%;
  background: #c3b7d7;
  transition:
    height var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}

.about-unified-card:hover::before {
  width: calc(100% + 2px);
  box-shadow: 0 0 15px rgb(195 183 215 / 50%);
}

.about-unified-card:hover::after {
  height: calc(100% + 2px);
  box-shadow: 0 0 15px rgb(195 183 215 / 50%);
}

/* Contact Form - Unified SOLID mit L-Akzent */
.contact-form-bright {
  background: var(--solid-card);
  border: var(--material-border);
  border-radius: 0 var(--material-radius) var(--material-radius) var(--material-radius);

  /* KEIN backdrop-filter */
  box-shadow: var(--material-shadow);
  padding: 48px;
  position: relative;
}

.contact-form-bright:hover {
  background: var(--solid-surface);
}

.contact-form-bright::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 50%;
  height: 2px;
  background: #c3b7d7;
  transition:
    width var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}

.contact-form-bright::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2px;
  height: 50%;
  background: #c3b7d7;
  transition:
    height var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}

.contact-form-bright:hover::before {
  width: calc(100% + 2px);
  box-shadow: 0 0 15px rgb(195 183 215 / 50%);
}

.contact-form-bright:hover::after {
  height: calc(100% + 2px);
  box-shadow: 0 0 15px rgb(195 183 215 / 50%);
}

/* Form Inputs - Unified Material */
.form-group-modern input,
.form-group-modern textarea {
  background: rgb(255 255 255 / 95%);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: var(--material-radius-sm);
  padding: 16px 18px;
  transition:
    border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
}

.form-group-modern input:hover,
.form-group-modern textarea:hover {
  border-color: rgb(101 175 225 / 50%);
}

.form-group-modern input:focus,
.form-group-modern textarea:focus {
  outline: none;
  border-color: #65afe1;
  box-shadow: 0 0 0 3px rgb(101 175 225 / 15%);
  transform: translateY(-1px);
}

/* ───────────────────────────────────────────────────────────
   6. MICRO-INTERACTIONS
   ─────────────────────────────────────────────────────────── */

/* Primary Button mit Shine-Effekt */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #65afe1 0%, #4d8fb8 100%);
  border: none;
  transition:
    transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 20%), transparent);
  transition: left 0.6s var(--ease-smooth);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(101 175 225 / 35%);
}

.btn-primary:hover::before {
  left: 100%;
}

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

/* Ghost Button Hover */
.btn-ghost {
  transition:
    background var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
}

.btn-ghost:hover {
  background: rgb(101 175 225 / 10%);
  border-color: rgb(101 175 225 / 40%);
  transform: translateY(-2px);
}

/* Code Window mit verbessertem Parallax - SOLID */
.code-window-wrapper {
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.1s linear;
}

.code-window {
  background: #0a0b14;
  border: var(--material-border);
  border-color: rgb(101 175 225 / 25%);
  border-radius: var(--material-radius-sm);

  /* KEIN backdrop-filter */
  box-shadow:
    0 25px 50px -12px rgb(0 0 0 / 60%),
    0 0 0 1px rgb(101 175 225 / 10%);
  transform: rotateY(-5deg) rotateX(2deg) translateZ(20px);
  transition:
    transform var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
  will-change: transform;
}

.code-window:hover {
  box-shadow:
    0 35px 60px -12px rgb(0 0 0 / 70%),
    0 0 0 1px rgb(101 175 225 / 20%);
}

/* Tech Cards */
.tech-card {
  background: var(--solid-card);
  border: var(--material-border);
  border-radius: var(--material-radius);

  /* KEIN backdrop-filter */
  box-shadow: var(--material-shadow);
  transition:
    transform var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}

.tech-card:hover {
  transform: translateY(-5px);
  border-color: var(--glow-border);
  box-shadow: var(--material-shadow-hover);
  background: var(--solid-surface);
}

/* Sprint Link Animation */
.sprint-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #65afe1;
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
}

.sprint-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #65afe1, #8bd7f8);
  transition: width var(--duration-base) var(--ease-smooth);
}

.sprint-link:hover {
  color: #8bd7f8;
  transform: translateX(4px);
}

.sprint-link:hover::after {
  width: 100%;
}

.sprint-link svg {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.sprint-link:hover svg {
  transform: translateX(3px);
}

/* Submit Button Shine */
.btn-submit {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #65afe1 0%, #4d8fb8 100%);
  transition:
    transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.btn-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 30%), transparent);
  transition: left 0.6s var(--ease-smooth);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(101 175 225 / 35%);
}

.btn-submit:hover::before {
  left: 100%;
}

/* ───────────────────────────────────────────────────────────
   7. TYPOGRAPHY & WHITESPACE REFINEMENT
   ─────────────────────────────────────────────────────────── */

/* Section Spacing */
.section {
  padding: var(--section-padding) 0;
}

.sprints-section {
  padding: 100px 0;
}

.about-section {
  padding: 100px 0;
}

.contact-section {
  padding: 100px 0;
}

.tech-stack-bar {
  padding: 60px 0 80px;
}

/* Hero Typography Refinement */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: var(--letter-display);
  line-height: var(--leading-display);
  font-weight: 800;
}

/* Section Headers */
.sprints-title,
.section-header h2,
.contact-header h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: var(--letter-display);
  line-height: var(--leading-display);
  font-weight: 800;
}

.about-title {
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: var(--letter-display);
  line-height: var(--leading-display);
}

/* Sprint Cards Typography */
.sprint-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.sprint-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #a0a0b0;
}

/* Labels & Badges */
.badge-case {
  letter-spacing: 0.5px;
  font-weight: 600;
}

.about-code-badge {
  letter-spacing: 1px;
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────
   8. PREMIUM ANIMATIONS (reduced-motion safe)
   ─────────────────────────────────────────────────────────── */

/* Smooth Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s var(--ease-bounce),
    transform 0.8s var(--ease-bounce);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Delays */
.reveal-delay-1 {
  transition-delay: 0ms;
}
.reveal-delay-2 {
  transition-delay: 100ms;
}
.reveal-delay-3 {
  transition-delay: 200ms;
}
.reveal-delay-4 {
  transition-delay: 300ms;
}
.reveal-delay-5 {
  transition-delay: 400ms;
}
.reveal-delay-6 {
  transition-delay: 500ms;
}

/* Hover Transitions für alle interaktiven Elemente */
a,
button,
.card,
.sprint-card,
.tech-card {
  transition-timing-function: var(--ease-smooth);
}

/* ───────────────────────────────────────────────────────────
   9. MOBILE OPTIMIZATION
   ─────────────────────────────────────────────────────────── */

@media (width <= 768px) {
  :root {
    --section-padding: var(--section-padding-mobile);
    --card-padding: 28px;
  }

  .section {
    padding: var(--section-padding-mobile) 0;
  }

  .sprints-section,
  .about-section,
  .contact-section {
    padding: var(--section-padding-mobile) 0;
  }

  /* Reduced Complexity auf Mobile */
  .ambient-canvas::before {
    animation: none;
    opacity: 0.5;
  }

  /* Hero Stats auf Mobile */
  .hero-stats-premium {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-stat-item {
    align-items: center;
    text-align: center;
    min-width: auto;
    width: 100%;
  }

  .hero-stat-number {
    min-width: auto;
    text-align: center;
  }

  /* Einfachere Hover-States */
  .sprint-card:hover,
  .case-study-card:hover,
  .tech-card:hover {
    transform: translateY(-2px);
  }

  /* Kein Parallax auf Touch */
  .code-window {
    transform: none !important;
    animation: none !important;
  }

  /* Weniger Schatten für Performance */
  .material-card,
  .sprint-card,
  .case-study-card {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 30%);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ambient-canvas::before {
    animation: none;
  }

  .code-window {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────
   10. UTILITY CLASSES
   ─────────────────────────────────────────────────────────── */

.glow-hover {
  transition: box-shadow var(--duration-base) var(--ease-smooth);
}

.glow-hover:hover {
  box-shadow: var(--glow-primary-hover);
}

.border-glow {
  position: relative;
}

.border-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--glow-border), transparent 50%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-smooth);
  z-index: -1;
}

.border-glow:hover::after {
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────
   11. OVERRIDE FIXES (styles.css / components.css compatibility)
   ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   BACKGROUND GRADIENT TRIANGLES - Fixed
   ═══════════════════════════════════════════════════════════ */

/* Top-right pink/violet gradient - steeper/more vertical */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 20vw;
  height: 50vh;
  background: linear-gradient(
    225deg,
    rgba(217, 70, 239, 0.5) 0%,
    rgba(192, 38, 211, 0.4) 30%,
    rgba(124, 58, 237, 0.3) 60%,
    transparent 80%
  );
  background-size: 200% 200%;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  animation: gradientShift1 25s ease-in-out infinite;
  pointer-events: none;
  z-index: -10;
}

/* Bottom-left blue gradient - steeper/more vertical */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 23vw;
  height: 54vh;
  background: linear-gradient(
    45deg,
    rgba(101, 175, 225, 0.4) 0%,
    rgba(59, 130, 246, 0.35) 40%,
    rgba(124, 58, 237, 0.2) 70%,
    transparent 85%
  );
  background-size: 200% 200%;
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  animation: gradientShift2 30s ease-in-out infinite;
  animation-delay: -10s;
  pointer-events: none;
  z-index: -5;
}

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

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

/* Alte Section-Styles überschreiben */
.section-alt {
  background: transparent;
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-alt::after {
  display: none;
}

/* Hero Background anpassen */
.hero {
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgb(101 175 225 / 5%) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgb(72 34 129 / 8%) 0%, transparent 40%);
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Entferne alte Hero-Cursor-Glow (wir haben was besseres) */
.hero-cursor-glow {
  display: none !important;
}

/* Tech-Grid im SEO-Bereich ausblenden */
.section.section-dark .tech-grid {
  display: none !important;
}

/* Alte Card-Styles überschreiben */
.contact-card {
  background: var(--solid-card);
  border: var(--material-border);
}

/* Unified Item Hover aus case-studies.css beibehalten aber verbessern */
.unified-item {
  transition:
    background var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth),
    transform var(--duration-base) var(--ease-smooth);
}

.unified-item:hover {
  transform: translateY(-3px);
  background: #0d0e16;
  border-color: var(--glow-border);
}

/* Detail Item Hover aus case-studies.css verbessern */
.detail-item {
  transition:
    background var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth),
    transform var(--duration-base) var(--ease-smooth);
}

.detail-item:hover {
  transform: translateY(-3px);
  background: #0d0e16;
  border-color: var(--glow-border);
}

/* Story Step Hover verbessern */
.story-step {
  transition:
    background var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth),
    transform var(--duration-base) var(--ease-smooth);
}

.story-step:hover {
  transform: translateY(-3px);
}

/* Expand Button verbessern */
.case-expand-btn {
  transition:
    background var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth),
    transform var(--duration-base) var(--ease-smooth);
}

.case-expand-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(101 175 225 / 20%);
}

/* Tech Tag Hover verbessern */
.case-study-tech-stack .tech-tag {
  transition:
    background var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
}

.case-study-tech-stack .tech-tag:hover {
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE.CSS
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE STYLES
   Flowbotics Website - Mobile-First Overrides
   
   This file contains ONLY mobile-specific overrides.
   Base styles are in styles.css.
   
   Breakpoints:
   - max-width: 900px  → Tablets & large phones
   - max-width: 768px  → Standard mobile
   - max-width: 480px  → Small phones  (iPhone SE, Mini)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE STYLES + PREMIUM OVERRIDES
   Flowbotics Website - Mobile-First Overrides
   ═══════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on all mobile devices */
@media (width <= 900px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ensure all containers respect viewport width */
  .container,
  .section,
  .hero,
  .footer,
  nav,
  header,
  main {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* ───────────────────────────────────────────────────────────
   TABLET & LARGE MOBILE (max-width: 900px)
   ─────────────────────────────────────────────────────────── */
@media (width <= 900px) {
  /* Typography */
  h1 {
    font-size: var(--text-7xl);
  }
  .hero h2 {
    font-size: var(--text-5xl);
  }
  .section-header h2 {
    font-size: var(--text-7xl);
  }
  .about-content h2 {
    font-size: var(--text-6xl);
  }

  /* Hero */
  .hero {
    min-height: 100svh;
    padding-top: var(--space-25);
    padding-bottom: var(--space-10);
    text-align: center;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: var(--space-6);
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .hero-description {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
  }

  /* Hero Stats */
  .hero-stats {
    display: flex;
    flex-flow: row nowrap;
    gap: 12px;
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) auto;
    background: rgb(255 255 255 / 3%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: var(--radius-lg);
    width: fit-content;
  }

  .hero-stats.trust-bar {
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .hero-stats .stat {
    flex: 0 0 auto;
    text-align: center;
    white-space: nowrap;
  }

  .hero-stats .stat-num {
    font-size: 1rem;
    margin-bottom: 2px;
  }

  .hero-stats .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.3px;
    line-height: 1.2;
  }

  .hero-stats .stat-sep {
    display: block;
    height: 18px;
    flex-shrink: 0;
  }

  /* Hero Stats Premium - Tablet breakpoint */
  .hero-stats-premium {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    padding: var(--space-4) var(--space-6) !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-stats-premium .hero-stat-item {
    flex: 0 1 auto !important;
    text-align: center !important;
  }

  .hero-stats-premium .hero-stat-number {
    font-size: var(--text-3xl) !important;
    line-height: 1.2 !important;
  }

  .hero-stats-premium .hero-stat-highlight .hero-stat-number {
    font-size: var(--text-3xl) !important;
    line-height: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-stats-premium .hero-stat-highlight .stat-zero {
    font-size: var(--text-3xl) !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
  }

  .hero-stats-premium .hero-stat-highlight .stat-chaos {
    font-size: var(--text-sm) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;
  }

  .hero-stats-premium .hero-stat-label {
    font-size: var(--text-sm) !important;
    letter-spacing: 0.3px !important;
    margin-top: var(--space-2) !important;
  }

  .hero-stats-premium .hero-stat-divider {
    width: 1px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(
      180deg,
      transparent,
      rgb(195 183 215 / 25%),
      transparent
    ) !important;
  }

  /* Layout */
  .section-alt,
  .tech-stack-bar {
    padding-top: var(--space-15);
    padding-bottom: var(--space-25);
  }

  .section {
    padding: var(--space-15) 0;
  }

  /* Grids */
  .tech-grid,
  .about-grid,
  .bento-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Cards */
  .tech-card,
  .card,
  .contact-card {
    padding: var(--space-6) var(--space-5);
  }

  /* Buttons */
  .btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  /* Tech Stack */
  .stack-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .tech-stack-bar .stack-category,
  .section-alt .stack-category {
    text-align: center;
    min-width: 0;
    width: 100%;
    margin-bottom: var(--space-1);
  }

  /* About Section */
  .about-grid {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--space-10);
  }

  .about-content .process-list {
    text-align: left;
    display: block;
    width: 100%;
  }

  .about-content .process-list li {
    display: grid;
    grid-template-columns: 24px auto 1fr;
    gap: var(--space-3);
    text-align: left;
    justify-items: start;
  }

  .about-content .process-desc {
    text-align: left;
    justify-self: start;
  }

  .visual-inner {
    margin: 0 auto;
    max-width: 320px;
    padding: var(--space-12) var(--space-5);
  }

  .profile-img {
    width: 150px;
    height: 150px;
  }

  /* Cert Badges */
  .cert-badge {
    width: 60px;
    height: 60px;
  }

  .badge-left-top {
    left: 5%;
    top: 40px;
  }
  .badge-right-top {
    right: 5%;
    top: 30px;
  }
  .badge-right-bottom {
    right: 8%;
    top: 130px;
  }

  /* Contact */
  .contact-form .btn {
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-5);
  }

  /* Footer - Mobile: 2-zeilig, kompakt */
  .footer {
    padding: var(--space-8) 0;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-5);
  }

  .copyright {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .footer-subline {
    opacity: 0.7;
    font-size: 0.85em;
    color: var(--text-muted);
  }

  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-6);
    width: 100%;
  }

  .footer-links a {
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
  }

  .footer-links .social-icon {
    width: 36px;
    height: 36px;
    order: -1; /* LinkedIn Icon zuerst */
    margin-bottom: var(--space-2);
  }

  .footer-links .social-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Mobile Sticky CTA */
  .mobile-sticky-cta {
    display: block;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(100px);
  }

  .mobile-sticky-cta.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Section Fade */
  .section-alt::after {
    z-index: 0;
  }

  .section-alt > * {
    position: relative;
    z-index: 1;
  }

  /* Hidden Elements */
  .sprint-flow,
  .hero-right {
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────
   STANDARD MOBILE (max-width: 768px)
   ─────────────────────────────────────────────────────────── */
@media (width <= 768px) {
  /* Container */
  .container {
    padding: 0 var(--space-4);
  }

  /* Navigation */
  .nav {
    padding: var(--space-5) 0;
  }

  .nav-inner {
    padding: 0 var(--space-4);
  }

  .nav-logo-custom {
    height: 36px !important;
    max-width: 180px !important;
  }

  .nav .btn-ghost {
    padding: 12px 16px;
    font-size: 0.75rem;
    min-height: 44px;
    min-width: 44px;
    width: auto;
  }

  /* Hero */
  .hero {
    padding-top: var(--space-20);
  }

  .hero h1 {
    font-size: var(--text-6xl);
    margin-bottom: var(--space-5);
  }

  .hero p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-10);
  }

  .badge {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-4);
    margin-bottom: var(--space-10);
  }

  /* Hero Stats Premium - Fix for mobile */
  .hero-stats-premium {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: var(--space-4) var(--space-5) !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-stat-item {
    flex: 0 1 auto !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  .hero-stat-number {
    font-size: var(--text-2xl) !important;
    line-height: 1.2 !important;
  }

  .hero-stat-highlight .hero-stat-number {
    font-size: var(--text-2xl) !important;
    line-height: 1.2 !important;
  }

  .hero-stat-label {
    font-size: var(--text-xs) !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
    margin-top: var(--space-2) !important;
  }

  .hero-stat-divider {
    width: 1px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(
      180deg,
      transparent,
      rgb(195 183 215 / 20%),
      transparent
    ) !important;
  }

  /* Buttons */
  .btn {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    padding: var(--space-5) var(--space-8);
  }

  /* Hero Stats */
  .hero-stats {
    gap: 6px;
    padding-top: var(--space-4);
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    justify-content: space-around;
  }

  .hero-stats .stat {
    flex-shrink: 0;
    min-width: 0;
  }

  .hero-stats .stat-num {
    font-size: 0.8rem;
  }

  .stat-label {
    font-size: 0.5rem;
    letter-spacing: 0.1px;
  }

  .stat-sep {
    height: 10px;
    flex-shrink: 0;
  }

  /* Section Headers */
  .section-header h2 {
    font-size: var(--text-6xl);
  }

  .section-header p {
    font-size: var(--text-lg);
  }

  /* Cards */
  .card h3 {
    font-size: var(--text-2xl);
  }

  .card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-5);
  }

  .card-icon svg {
    width: 20px;
    height: 20px;
  }

  /* About Section */
  .about-content h2 {
    font-size: var(--text-6xl);
  }

  .visual-inner {
    max-width: 260px;
    padding: var(--space-10) var(--space-4);
  }

  .profile-img {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-6);
  }

  /* Cert Badges */
  .cert-badge {
    width: 80px;
    height: 80px;
  }

  .badge-left-top {
    top: 30px;
    left: 5px;
  }
  .badge-right-top {
    top: 10px;
    right: 5px;
  }
  .badge-right-bottom {
    top: 100px;
    right: 10px;
  }

  /* About Cards */
  .about-cards {
    grid-template-columns: 1fr;
  }

  /* Mobile Sticky CTA */
  .mobile-sticky-cta {
    display: block;
  }

  /* Back to Top */
  .back-to-top.visible {
    bottom: 100px;
    right: var(--space-4);
    width: 40px;
    height: 40px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }

  /* Section Shapes */
  .section-shapes {
    display: none;
  }

  /* Case Studies */
  .case-study-card {
    padding: var(--space-6);
  }

  .case-study-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .case-study-details {
    padding: var(--space-5);
  }

  .detail-item {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgb(255 255 255 / 3%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: var(--radius-lg);
  }

  .detail-icon {
    margin-bottom: var(--space-2);
  }
}

/* ───────────────────────────────────────────────────────────
   SMALL MOBILE (max-width: 480px)
   iPhone SE, Mini, small Android devices
   ─────────────────────────────────────────────────────────── */
@media (width <= 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  /* Navigation */
  .nav {
    padding: var(--space-4) 0;
  }

  .nav-logo-custom {
    height: 28px;
  }

  /* Hero */
  .hero {
    padding-top: var(--space-20);
  }

  .hero h1 {
    font-size: var(--text-6xl);
    margin-bottom: var(--space-5);
  }

  .hero p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-10);
  }

  .badge {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-4);
    margin-bottom: var(--space-10);
  }

  /* Hero Stats - small mobile */
  .hero-stats {
    flex-direction: row !important;
    gap: 8px;
    padding: var(--space-3) var(--space-4);
  }

  .stat {
    text-align: center;
    flex-shrink: 0;
  }

  .stat-num {
    font-size: var(--text-lg);
  }

  .stat-sep {
    display: block;
    height: 10px;
  }

  /* Hero Stats Premium - small mobile */
  .hero-stats-premium {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: var(--space-3) var(--space-4) !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-stat-item {
    flex: 0 1 auto !important;
    padding: 0 var(--space-2) !important;
  }

  .hero-stat-number {
    font-size: var(--text-xl) !important;
    line-height: 1.1 !important;
  }

  .hero-stat-highlight .hero-stat-number {
    font-size: var(--text-xl) !important;
    line-height: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-stat-highlight .stat-zero {
    font-size: var(--text-xl) !important;
    line-height: 1.1 !important;
    margin: 0 0 6px !important;
  }

  .hero-stat-highlight .stat-chaos {
    font-size: var(--text-xs) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.3px !important;
  }

  .hero-stat-label {
    font-size: var(--text-xs) !important;
    letter-spacing: 0.1px !important;
    margin-top: var(--space-1) !important;
  }

  .hero-stat-divider {
    width: 1px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(
      180deg,
      transparent,
      rgb(195 183 215 / 20%),
      transparent
    ) !important;
  }

  /* Buttons */
  .hero-actions {
    width: 100%;
  }

  .btn {
    width: 100%;
    max-width: 100%;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-rg);
  }

  /* Tech Tags */
  .tag-list {
    gap: var(--space-2);
  }

  .tech-tag {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
  }

  .stack-category {
    font-size: var(--text-xs);
  }

  /* Section Headers */
  .section {
    padding: var(--space-12) 0;
  }

  .section-header h2 {
    font-size: var(--text-5xl);
  }

  .section-header p {
    font-size: var(--text-lg);
  }

  /* Cards */
  .tech-card,
  .card {
    padding: var(--space-4) var(--space-4);
  }

  /* About Section */
  .about-content h2 {
    font-size: var(--text-6xl);
  }

  .visual-inner {
    max-width: 260px;
    padding: var(--space-10) var(--space-4);
  }

  .profile-img {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-6);
  }

  /* Cert Badges */
  .cert-badge {
    width: 45px;
    height: 45px;
  }

  .badge-left-top {
    left: 2%;
    top: 30px;
  }
  .badge-right-top {
    right: 2%;
    top: 20px;
  }
  .badge-right-bottom {
    right: 5%;
    top: 100px;
  }

  .visual-text strong {
    font-size: var(--text-lg);
  }

  /* Contact Form */
  .contact-card {
    padding: var(--space-6) var(--space-5);
  }

  .contact-card h2 {
    font-size: var(--text-4xl);
  }

  .form-group {
    margin-bottom: var(--space-5);
  }

  .form-group label {
    font-size: var(--text-sm);
  }

  .form-group input,
  .form-group textarea {
    padding: var(--space-3);
    font-size: var(--text-lg);
  }

  /* Case Study Specific */
  .case-study-header {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem;
  }

  .case-study-title h3 {
    font-size: 1.3rem;
  }

  .case-study-tech-stack {
    padding: 0.75rem 1rem 1rem;
  }

  .case-study-tech-stack .tech-tag {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
  }

  .case-study-tech-stack .tech-tag img {
    width: 18px;
    height: 18px;
  }

  .case-study-story {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
    gap: 1rem;
  }

  .story-step::after {
    display: none;
  }

  .story-step {
    padding: 1.25rem;
  }

  .case-study-details {
    padding: 1.5rem 1rem;
  }

  .detail-items {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .detail-item {
    padding: 1.25rem;
  }

  .detail-item > div:last-child {
    font-size: 0.9rem;
  }

  .case-tab {
    flex: 1 1 33%;
    padding: 0.75rem 0.25rem;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
  }

  .case-tab-icon {
    font-size: 1rem;
  }

  .case-tab-panel {
    padding: 1.5rem 1rem;
  }

  /* Footer Small Screens */
  .footer-links {
    gap: var(--space-3) var(--space-4);
  }

  .footer-links a {
    font-size: 0.7rem;
    letter-spacing: 0.3px;
  }
}

/* ───────────────────────────────────────────────────────────
   PREMIUM MOBILE OVERRIDES
   ─────────────────────────────────────────────────────────── */

@media (width <= 768px) {
  /* Material Cards auf Mobile vereinfachen */
  .material-card,
  .sprint-card,
  .case-study-card,
  .about-unified-card,
  .contact-form-bright {
    /* Kein backdrop-filter */
  }

  /* Weniger Padding auf Mobile */
  .sprint-card {
    padding: 24px;
  }

  .about-unified-card {
    padding: 32px 24px;
  }

  .contact-form-bright {
    padding: 32px 24px;
  }

  /* Einfachere Animationen */
  .reveal {
    transition-duration: 0.5s;
  }

  /* Keine komplexen Hintergründe auf Mobile */
  .ambient-canvas {
    background: var(--bg-deep);
  }

  .ambient-canvas::before {
    display: none;
  }
}

/* Small Mobile */
@media (width <= 480px) {
  .sprint-card {
    padding: 20px;
  }

  .about-unified-card {
    padding: 24px 20px;
  }

  .contact-form-bright {
    padding: 24px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT FORM RESPONSIVE (index.html)
   ═══════════════════════════════════════════════════════════ */

@media (width <= 768px) {
  /* Contact Card */
  .contact-form-bright {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .contact-form-bright h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  /* Form rows: single column on mobile */
  .form-row-modern {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  /* Form groups */
  .form-group-modern {
    margin-bottom: 16px;
  }

  .form-group-modern.full {
    margin-top: 16px;
  }

  /* Labels */
  .form-group-modern label {
    font-size: 0.75rem;
    margin-bottom: 6px;
  }

  /* Inputs */
  .form-group-modern input,
  .form-group-modern textarea,
  .form-group-modern select {
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 10px;
  }

  /* Submit button */
  .btn-submit {
    padding: 14px 24px;
    font-size: 0.9rem;
    margin-top: 8px;
  }

  /* Form disclaimer */
  .form-disclaimer {
    font-size: 0.7rem;
    margin: 10px 0;
  }

  /* Error message */
  .form-error-message {
    font-size: 0.8rem;
    padding: 10px 14px;
  }
}

@media (width <= 480px) {
  .contact-form-bright {
    padding: 24px 16px;
    border-radius: 12px;
  }

  .contact-form-bright h2 {
    font-size: 1.3rem;
    margin-bottom: 16px;
  }

  .form-group-modern input,
  .form-group-modern textarea,
  .form-group-modern select {
    padding: 12px 14px;
    border-radius: 8px;
  }

  .btn-submit {
    padding: 12px 20px;
    font-size: 0.85rem;
  }

  .form-disclaimer {
    font-size: 0.65rem;
  }
}