/* ============================================================
   Honar IT – Global Stylesheet
   ============================================================ */

/* ---------- Self-hosted Fonts (Inter – Latin) ---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/inter-300.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/inter-800.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- CSS Custom Properties ---------- */
/*
   Farbpsychologie:
   – Tiefes Ozean-Teal  → Hoffnung, Klarheit, Aufbruch, Zukunft
   – Sattes Blau        → Vertrauen, Stabilität, Professionalität
   – Warmes Cyan-Teal   → Kombination: Hoffnung + Verlässlichkeit
   – Helles Aqua-Glow   → Energie, Offenheit, Optimismus
*/
:root {
  /* Hintergründe – warmes Tiefsee-Teal statt kaltem Navy */
  --navy-900:   #051419;   /* tiefster Grund – Teal-Schwarz */
  --navy-800:   #091E26;   /* Haupt-Hintergrund – dunkles Ozean-Teal */
  --navy-700:   #0E2A35;   /* Sektionswechsel – etwas heller */
  --navy-600:   #153645;   /* Karten-Hintergrund sichtbar */

  /* Blau-Familie – Vertrauen & Verlässlichkeit */
  --blue-700:   #155E8A;
  --blue-600:   #1A7AAD;
  --blue-500:   #2490C8;
  --blue-400:   #3AAAD8;
  --blue-300:   #60C4E8;
  --blue-100:   #A8DFF5;

  /* Teal-Familie – Hoffnung, Wachstum & Klarheit */
  --teal-700:   #0C6B61;
  --teal-600:   #0E8F82;
  --teal-500:   #14B8A6;
  --teal-400:   #2DD4BF;
  --teal-300:   #5EEAD4;

  /* Haupt-Akzent = Teal (Hoffnung) */
  --accent:     #2DD4BF;

  /* Texte */
  --white:          #FFFFFF;
  --text-primary:   #F0FAFA;   /* leicht warm-weiß statt reinem Weiß */
  --text-secondary: #9DCFCC;   /* Teal-getönt */
  --text-muted:     #4E8A87;   /* gedämpftes Teal */

  /* Karten */
  --card-bg:     rgba(20,184,166,0.04);   /* hauchdünn Teal */
  --card-border: rgba(45,212,191,0.10);
  --card-hover:  rgba(45,212,191,0.08);

  /* Schatten */
  --shadow-card:  0 8px 32px rgba(0,0,0,0.4);
  --shadow-hover: 0 16px 48px rgba(0,0,0,0.55);

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background-color: var(--navy-800);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem,5vw,3.8rem); }
h2 { font-size: clamp(1.8rem,3.5vw,2.6rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 600; }

.section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.section-label::before {
  content: ''; display: inline-block;
  width: 20px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.section-title   { margin-bottom: 1.1rem; }
.section-subtitle { color: var(--text-secondary); font-size: 1.05rem; max-width: 560px; line-height: 1.75; }
#kompetenzen .section-subtitle { max-width: 100%; }
#warum-ich .section-subtitle { max-width: 100%; }
#leistungen .section-subtitle { max-width: 100%; }
#projekte .section-subtitle { max-width: 100%; }

/* ---------- Layout ---------- */
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
section { padding: 115px 0; }
.section-header { margin-bottom: 4rem; }

/* ---------- Background Variants ---------- */
.gradient-hero {
  /* Ozean-Horizont: tiefes Teal + Blau → Hoffnung trifft Vertrauen */
  background:
    radial-gradient(ellipse 80% 55% at 72% 38%, rgba(14,143,130,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 18% 75%, rgba(36,144,200,0.15) 0%, transparent 58%),
    linear-gradient(158deg, #040F14 0%, #071A22 35%, #0A2430 65%, #0C2C3C 100%);
  position: relative; overflow: hidden;
}
/* Subtiles Dot-Grid als Textur */
.gradient-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(45,212,191,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none; z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.gradient-section {
  background: linear-gradient(180deg, #091E26 0%, #0E2A35 100%);
}
.gradient-section-alt {
  background: #051419;
}

/* Ambient blobs – Teal (Hoffnung) + Blau (Vertrauen) */
.blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.16; pointer-events: none; }
.blob-1 { width:640px;height:640px; background:radial-gradient(circle,var(--teal-500),transparent); top:-200px;right:-150px; }
.blob-2 { width:440px;height:440px; background:radial-gradient(circle,var(--blue-500),transparent); bottom:-100px;left:-100px; }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed; top:0;left:0;right:0; z-index:1000;
  padding: 1rem 0;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.navbar.scrolled {
  background: rgba(7,21,37,0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.4);
  padding: 0.65rem 0;
}
.navbar-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo img { height:40px; width:auto; }

.nav-links { display:flex; align-items:center; gap:0.2rem; }
.nav-links a {
  padding: 0.45rem 0.85rem; font-size:0.88rem; font-weight:500;
  color:var(--text-secondary); border-radius:var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.06); }
.nav-cta {
  background: linear-gradient(135deg,var(--teal-600),var(--teal-500)) !important;
  color:var(--navy-900) !important; border-radius:var(--radius-sm) !important;
  padding: 0.5rem 1.1rem !important; font-weight:700 !important;
  box-shadow: 0 4px 16px rgba(20,184,166,0.35);
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(20,184,166,0.55) !important; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; border:none; background:none; }
.hamburger span { display:block;width:24px;height:2px;background:var(--text-secondary);border-radius:2px;transition:all var(--transition); }
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding: 0.8rem 1.8rem; border-radius:var(--radius-md);
  font-size:0.95rem; font-weight:600; cursor:pointer; border:none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn-primary {
  /* Vertrauen (Blau) + Hoffnung (Teal) im Verlauf */
  background: linear-gradient(135deg,var(--blue-600),var(--teal-500));
  color:var(--white); box-shadow:0 6px 24px rgba(20,184,166,0.35);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(20,184,166,0.5); }

.btn-outline {
  background:transparent; color:var(--white);
  border:1.5px solid rgba(45,212,191,0.25); backdrop-filter:blur(8px);
}
.btn-outline:hover { background:rgba(45,212,191,0.07); border-color:rgba(45,212,191,0.5); transform:translateY(-2px); }

.btn-accent {
  background: linear-gradient(135deg,var(--teal-500),var(--teal-400));
  color:var(--navy-900); box-shadow:0 6px 24px rgba(20,184,166,0.4); font-weight:700;
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(20,184,166,0.6); }

.btn-lg { padding:1rem 2.2rem; font-size:1rem; }
.btn svg { width:20px;height:20px;flex-shrink:0; }

/* ---------- Hero ---------- */
.hero { min-height:100vh; display:flex; align-items:center; padding-top:88px; }
.hero-inner {
  display:grid; grid-template-columns:1fr 460px; gap:4rem;
  align-items:center; padding:4rem 0;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(20,184,166,0.12); border:1px solid rgba(45,212,191,0.30);
  border-radius:100px; padding:0.35rem 1rem; font-size:0.82rem;
  font-weight:500; color:var(--teal-300); margin-bottom:1.5rem;
}
.hero-badge-dot {
  width:7px;height:7px; background:#4ade80; border-radius:50%;
  box-shadow:0 0 6px #4ade80; animation:pulse-dot 2s ease-in-out infinite;
  will-change: opacity;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }

.hero-name {
  font-size:clamp(2.6rem,5vw,4rem); font-weight:800;
  letter-spacing:-0.03em; margin-bottom:0.3rem;
  background:linear-gradient(135deg, var(--white) 30%, var(--teal-300) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-title { font-size:clamp(1rem,2vw,1.3rem); font-weight:400; color:var(--accent); margin-bottom:0.3rem; }
.hero-subtitle { font-size:0.9rem; color:var(--text-muted); margin-bottom:1.5rem; font-weight:500; }
.hero-description { font-size:1rem; color:var(--text-secondary); line-height:1.8; max-width:520px; margin-bottom:2.5rem; }

.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }

.hero-social { display:flex; align-items:center; gap:1.2rem; }
.hero-social-label { font-size:0.78rem; color:var(--text-muted); font-weight:500; letter-spacing:0.05em; }

.social-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:42px;height:42px; border-radius:var(--radius-sm);
  background:var(--card-bg); border:1px solid var(--card-border);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.social-icon-btn:hover { background:rgba(255,255,255,0.1); border-color:var(--blue-400); transform:translateY(-2px); }
.social-icon-btn svg { width:20px;height:20px; }

/* Hero Image */
.hero-image-wrap { position:relative; }
.hero-image-frame {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  box-shadow: 0 0 0 1px rgba(45,212,191,0.20), 0 0 80px rgba(45,212,191,0.14), var(--shadow-card);
}
.hero-image-frame::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius-xl);
  background:linear-gradient(180deg,transparent 55%,rgba(7,21,37,0.7) 100%);
  z-index:1; pointer-events:none;
}
.hero-image-frame img { width:100%; height:520px; object-fit:cover; object-position:center top; }

.hero-card {
  position:absolute; bottom:1.8rem; left:1.5rem; right:1.5rem; z-index:2;
  background:rgba(7,21,37,0.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-md);
  padding:1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.hero-card-stat { text-align:center; }
.hero-card-stat-number { font-size:1.5rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:0.15rem; }
.hero-card-stat-label { font-size:0.7rem; color:var(--text-muted); font-weight:500; }
.hero-card-divider { width:1px;height:32px; background:rgba(255,255,255,0.12); }

.hero-ring {
  position:absolute; width:520px;height:520px;
  border:1px solid rgba(45,212,191,0.15); border-radius:50%;
  top:50%;left:50%; transform:translate(-50%,-50%);
  pointer-events:none; animation:rotate-ring 20s linear infinite;
  will-change: transform;
}
.hero-ring-2 { width:420px;height:420px; border-color:rgba(91,191,222,0.1); animation-direction:reverse; animation-duration:15s; }
@keyframes rotate-ring {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}

/* Floating Tech Badges */
.hero-float-badge {
  position: absolute; z-index: 10;
  display: flex; align-items: center; gap: 0.45rem;
  background: rgba(9,30,38,0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(45,212,191,0.22); border-radius: 100px;
  padding: 0.45rem 1rem; font-size: 0.78rem; font-weight: 600; color: var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(45,212,191,0.08);
  white-space: nowrap;
  animation: float-badge 4s ease-in-out infinite;
  will-change: transform;
}
.hero-float-badge .hero-float-icon { font-size: 1rem; line-height: 1; }
.hero-float-java   { top: 12%; left: -3rem; animation-delay: 0s; }
.hero-float-spring { top: 28%; right: -2.5rem; animation-delay: 1.4s; }
.hero-float-k8s    { bottom: 22%; left: -2.5rem; animation-delay: 2.8s; }
.hero-float-ai     { bottom: 32%; right: -3rem; animation-delay: 2.1s; }
@keyframes float-badge {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}

/* Scroll Indicator */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  z-index: 5; opacity: 0.55;
  animation: hero-scroll-fade 3s ease-in-out infinite;
}
.hero-scroll-text { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.3; }
}
@keyframes hero-scroll-fade { 0%,100%{opacity:0.55} 50%{opacity:0.85} }

/* ---------- About ---------- */
.about-inner { display:grid; grid-template-columns:380px 1fr; gap:5rem; align-items:center; }
.about-image-frame { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.about-image-frame img { width:100%; height:490px; object-fit:cover; object-position:center top; }
.about-image-wrap { position:relative; }
.about-image-badge {
  position:absolute; top:-1.2rem; right:-1.2rem;
  background:linear-gradient(135deg,var(--teal-600),var(--blue-500));
  border-radius:var(--radius-md); padding:1.1rem 1.4rem; text-align:center;
  box-shadow:0 12px 32px rgba(20,184,166,0.40);
}
.about-image-badge-number { font-size:1.8rem; font-weight:800; color:var(--white); line-height:1; }
.about-image-badge-text { font-size:0.7rem; color:rgba(255,255,255,0.8); font-weight:500; margin-top:0.2rem; }
.about-text p { color:var(--text-secondary); line-height:1.8; margin-bottom:1.1rem; }
.about-list { list-style:none; color:var(--text-secondary); line-height:1.8; margin:0 0 1.1rem 0; padding:0; }
.about-list li { margin-bottom:0.5rem; padding-left:1.6rem; position:relative; }
.about-list li::before { content:""; position:absolute; left:0; top:0.65em; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.about-highlights { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.about-highlight-item {
  display:flex; align-items:flex-start; gap:0.75rem;
  padding:1rem; background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-md); transition:background var(--transition), border-color var(--transition);
}
.about-highlight-item:hover { background:var(--card-hover); border-color:rgba(45,212,191,0.25); }
.about-highlight-icon { width:36px;height:36px; background:rgba(20,184,166,0.15); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; }
.about-highlight-title { font-size:0.82rem; font-weight:600; color:var(--white); margin-bottom:0.15rem; }
.about-highlight-desc { font-size:0.76rem; color:var(--text-muted); line-height:1.4; }

/* ---------- Services ---------- */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:2rem;
  transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition);
  position:relative; overflow:hidden; counter-increment:service-counter;
}
/* Top accent border */
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.service-card:nth-child(1)::before { background:linear-gradient(90deg,var(--teal-500),var(--teal-400)); }
.service-card:nth-child(2)::before { background:linear-gradient(90deg,var(--blue-600),var(--blue-400)); }
.service-card:nth-child(3)::before { background:linear-gradient(90deg,var(--teal-600),var(--blue-500)); }
/* Numbered badge top-right */
.service-card::after {
  content: "0" counter(service-counter);
  position:absolute; top:1.1rem; right:1.3rem;
  font-size:2rem; font-weight:800; letter-spacing:-0.04em;
  color:rgba(45,212,191,0.07); line-height:1;
  pointer-events:none;
}
.service-card:hover { transform:translateY(-5px); background:var(--card-hover); border-color:rgba(45,212,191,0.30); box-shadow:var(--shadow-hover); }
.service-icon {
  width:60px;height:60px;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:1.4rem;
  position:relative; z-index:1;
}
.service-card:nth-child(1) .service-icon { background:linear-gradient(135deg,rgba(20,184,166,0.25),rgba(20,184,166,0.08)); border:1px solid rgba(45,212,191,0.30); }
.service-card:nth-child(2) .service-icon { background:linear-gradient(135deg,rgba(36,144,200,0.25),rgba(36,144,200,0.08)); border:1px solid rgba(58,170,216,0.30); }
.service-card:nth-child(3) .service-icon { background:linear-gradient(135deg,rgba(14,143,130,0.25),rgba(36,144,200,0.12)); border:1px solid rgba(45,212,191,0.25); }
.service-card h3 { margin-bottom:0.7rem; font-size:1.08rem; position:relative; z-index:1; }
.service-card p { font-size:0.87rem; color:var(--text-secondary); line-height:1.75; position:relative; z-index:1; }

/* Services 3-column featured */
.services-grid { counter-reset: service-counter; }
.services-grid-3 { grid-template-columns: repeat(3,1fr); }
.service-card-featured { display:flex; flex-direction:column; }
.service-list {
  margin-top:1.2rem; padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:0.5rem; flex:1;
  position:relative; z-index:1;
}
.service-list li {
  font-size:0.83rem; color:var(--text-secondary); line-height:1.55;
  padding-left:1.3rem; position:relative;
}
.service-list li::before {
  content:''; position:absolute; left:0; top:0.56em;
  width:6px; height:6px; background:var(--teal-500);
  border-radius:50%;
}

/* ---------- Trust Section ---------- */
.trust-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  margin-top:1rem;
}
.trust-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:2rem 1.6rem;
  transition:transform var(--transition),background var(--transition),
             border-color var(--transition),box-shadow var(--transition);
  position:relative; overflow:hidden;
}
.trust-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.trust-card:nth-child(1)::before { background:linear-gradient(90deg,#f59e0b,#f97316); }
.trust-card:nth-child(2)::before { background:linear-gradient(90deg,var(--blue-500),var(--blue-300)); }
.trust-card:nth-child(3)::before { background:linear-gradient(90deg,var(--teal-600),var(--teal-400)); }
.trust-card:nth-child(4)::before { background:linear-gradient(90deg,#8b5cf6,#6366f1); }
.trust-card:hover {
  transform:translateY(-5px); background:var(--card-hover);
  border-color:rgba(45,212,191,0.30); box-shadow:var(--shadow-hover);
}
.trust-icon {
  font-size:1.8rem; margin-bottom:1.1rem;
  display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:var(--radius-md);
}
.trust-card:nth-child(1) .trust-icon { background:linear-gradient(135deg,rgba(245,158,11,0.20),rgba(249,115,22,0.08)); border:1px solid rgba(245,158,11,0.25); }
.trust-card:nth-child(2) .trust-icon { background:linear-gradient(135deg,rgba(36,144,200,0.22),rgba(36,144,200,0.08)); border:1px solid rgba(58,170,216,0.28); }
.trust-card:nth-child(3) .trust-icon { background:linear-gradient(135deg,rgba(20,184,166,0.22),rgba(20,184,166,0.08)); border:1px solid rgba(45,212,191,0.28); }
.trust-card:nth-child(4) .trust-icon { background:linear-gradient(135deg,rgba(139,92,246,0.22),rgba(99,102,241,0.08)); border:1px solid rgba(139,92,246,0.28); }
.trust-card h3 { font-size:1rem; margin-bottom:0.7rem; color:var(--white); }
.trust-card p { font-size:0.85rem; color:var(--text-secondary); line-height:1.75; }

/* ---------- Skills ---------- */
.skills-container { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; }
.skills-group h3 {
  font-size:0.82rem; font-weight:700; color:var(--accent);
  margin-bottom:1.6rem; padding-bottom:0.8rem;
  border-bottom:1px solid rgba(45,212,191,0.12);
  text-transform:uppercase; letter-spacing:0.12em;
}
.skill-item { margin-bottom:1.3rem; }
.skill-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.55rem; }
.skill-name { font-size:0.88rem; font-weight:500; color:var(--text-primary); }
.skill-pct { font-size:0.76rem; font-weight:700; color:var(--teal-400); }

/* Skill bar – modern with glow */
.skill-bar {
  height:8px; background:rgba(255,255,255,0.06);
  border-radius:100px; overflow:visible; position:relative;
}
.skill-bar-fill {
  height:100%; border-radius:100px;
  background:linear-gradient(90deg,var(--blue-500),var(--teal-500),var(--teal-400));
  transform-origin:left; transform:scaleX(0);
  transition:transform 1.2s cubic-bezier(0.4,0,0.2,1);
  will-change: transform; position:relative;
  box-shadow:0 0 10px rgba(45,212,191,0.35);
}
/* Glowing end-dot */
.skill-bar-fill::after {
  content:''; position:absolute; right:-2px; top:50%;
  transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
  background:var(--teal-400);
  box-shadow:0 0 8px rgba(45,212,191,0.9), 0 0 20px rgba(45,212,191,0.4);
  opacity:0; transition:opacity 0.4s ease 1s;
}
.skill-bar-fill.animated::after { opacity:1; }
.skill-bar-fill.animated { transform:scaleX(1); }

.skills-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
.skill-tag {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:100px; padding:0.32rem 0.9rem;
  font-size:0.78rem; font-weight:500; color:var(--text-secondary);
  transition:background var(--transition),border-color var(--transition),color var(--transition),transform var(--transition);
}
.skill-tag:hover { background:rgba(20,184,166,0.15); border-color:rgba(45,212,191,0.40); color:var(--white); transform:translateY(-1px); }

/* ---------- Projects Timeline ---------- */
.timeline { position:relative; padding-left:2rem; }
.timeline::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:linear-gradient(180deg,var(--teal-500),rgba(20,184,166,0.08));
  border-radius:2px;
}
.timeline-item { position:relative; margin-bottom:2.5rem; }
.timeline-dot {
  position:absolute; left:-2.6rem; top:0.3rem;
  width:12px; height:12px; background:var(--teal-500);
  border:2px solid var(--navy-800); border-radius:50%;
  box-shadow:0 0 10px rgba(20,184,166,0.7);
}
.timeline-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:1.6rem 2rem;
  transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.timeline-card:hover { background:var(--card-hover); border-color:rgba(45,212,191,0.30); transform:translateX(4px); box-shadow:var(--shadow-hover); }
.timeline-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:0.75rem;
  margin-bottom:0.9rem;
}
.timeline-period {
  font-size:0.75rem; font-weight:600; color:var(--accent);
  background:rgba(91,191,222,0.1); border:1px solid rgba(91,191,222,0.2);
  border-radius:100px; padding:0.25rem 0.8rem;
}
.timeline-client {
  font-size:0.75rem; font-weight:600; color:var(--teal-300);
  background:rgba(20,184,166,0.10); border:1px solid rgba(45,212,191,0.20);
  border-radius:100px; padding:0.25rem 0.8rem;
}
.timeline-industry {
  font-size:0.72rem; color:var(--text-muted);
  background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
  border-radius:100px; padding:0.25rem 0.75rem;
}
.timeline-card h3 { font-size:1.05rem; margin-bottom:0.6rem; }
.timeline-role { font-size:0.82rem; color:var(--text-muted); margin-bottom:0.9rem; font-style:italic; }
.timeline-tasks { margin-bottom:1rem; }
.timeline-tasks li {
  font-size:0.85rem; color:var(--text-secondary); line-height:1.6;
  padding:0.2rem 0 0.2rem 1.2rem; position:relative;
}
.timeline-tasks li::before {
  content:'›'; position:absolute; left:0; color:var(--accent); font-weight:700;
}
.timeline-tech { display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1rem; }
.tech-tag {
  font-size:0.72rem; font-weight:500; color:var(--teal-300);
  background:rgba(20,184,166,0.08); border:1px solid rgba(45,212,191,0.18);
  border-radius:var(--radius-sm); padding:0.2rem 0.6rem;
}

/* Employer heading in timeline – see card style definition below */

/* ---------- Certifications ---------- */
.certs-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; }
.cert-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:1.6rem 1.2rem; text-align:center;
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition),background var(--transition);
  position:relative;
}
.cert-card:hover { transform:translateY(-4px); border-color:rgba(45,212,191,0.35); box-shadow:var(--shadow-hover); background:var(--card-hover); }
.cert-icon {
  width:52px;height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal-700),var(--blue-500));
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin:0 auto 1rem; box-shadow:0 8px 20px rgba(20,184,166,0.35);
}
.cert-org { font-size:0.68rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.4rem; }
.cert-name { font-size:0.85rem; font-weight:600; color:var(--white); line-height:1.3; }
.cert-abbr { font-size:1rem; font-weight:800; color:var(--teal-300); display:block; margin-top:0.3rem; }

/* ---------- Testimonials ---------- */
.testimonials-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.testimonial-source { display:flex; align-items:center; gap:0.75rem; }
.testimonial-avatar {
  width:44px;height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal-700),var(--blue-500));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.testimonial-name { font-size:0.85rem; font-weight:600; color:var(--white); }
.testimonial-role { font-size:0.76rem; color:var(--text-muted); }

/* ---------- Availability CTA ---------- */
.availability-section { position:relative; overflow:hidden; }
.availability-inner {
  background:linear-gradient(135deg,var(--navy-700),var(--teal-700));
  border:1px solid rgba(45,212,191,0.18); border-radius:var(--radius-xl);
  padding:4rem 3.5rem; display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:3rem; position:relative; overflow:hidden;
}
.availability-inner::before {
  content:''; position:absolute; width:500px;height:500px;
  background:radial-gradient(circle,rgba(20,184,166,0.25),transparent 70%);
  right:-100px;top:-150px; pointer-events:none;
}
.availability-status {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.3);
  border-radius:100px; padding:0.35rem 1rem;
  font-size:0.8rem; font-weight:600; color:#4ade80; margin-bottom:1.2rem;
}
.availability-status-dot { width:7px;height:7px; background:#4ade80; border-radius:50%; box-shadow:0 0 8px #4ade80; animation:pulse-dot 2s ease-in-out infinite; }
.availability-text h2 { margin-bottom:0.75rem; }
.availability-text p { color:rgba(255,255,255,0.7); max-width:480px; }
.availability-actions { display:flex; flex-direction:column; gap:0.8rem; flex-shrink:0; min-width:220px; align-items:stretch; }

/* ---------- Contact ---------- */
.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info-list { display:flex; flex-direction:column; gap:1.2rem; margin-top:2rem; }
.contact-item {
  display:flex; align-items:center; gap:1rem;
  padding:1.2rem 1.5rem; background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-md); transition:background var(--transition),border-color var(--transition);
  color:inherit; text-decoration:none;
}
.contact-item:hover { background:var(--card-hover); border-color:rgba(45,212,191,0.25); }
.contact-icon {
  width:44px;height:44px; background:rgba(20,184,166,0.12); border:1px solid rgba(45,212,191,0.22);
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.contact-item-label { font-size:0.73rem; font-weight:500; color:var(--text-muted); margin-bottom:0.15rem; text-transform:uppercase; letter-spacing:0.06em; }
.contact-item-value { font-size:0.95rem; font-weight:500; color:var(--white); }
.contact-item-value a { transition:color var(--transition); }
.contact-item-value a:hover { color:var(--teal-300); }

.social-profiles { margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.social-profile-btn {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.5rem; background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.social-profile-btn:hover { background:var(--card-hover); border-color:rgba(45,212,191,0.30); transform:translateX(4px); }
.social-profile-logo {
  width:40px;height:40px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.social-profile-info { flex:1; }
.social-profile-name { font-size:0.9rem; font-weight:600; color:var(--white); margin-bottom:0.1rem; }
.social-profile-desc { font-size:0.78rem; color:var(--text-muted); }
.social-profile-arrow { color:var(--text-muted); font-size:1rem; transition:transform var(--transition),color var(--transition); }
.social-profile-btn:hover .social-profile-arrow { transform:translateX(4px); color:var(--teal-300); }

/* ---------- Footer ---------- */
footer { background:var(--navy-900); border-top:1px solid rgba(255,255,255,0.06); padding:3rem 0 2rem; }
.footer-inner {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:1.5rem;
}
.footer-logo img { height:36px; width:auto; }
.footer-tagline { font-size:0.8rem; color:var(--text-muted); margin-top:0.4rem; }
.footer-links { display:flex; gap:0.4rem; flex-wrap:wrap; }
.footer-links a {
  padding:0.45rem 0.85rem; font-size:0.83rem; color:var(--text-muted);
  border-radius:var(--radius-sm); transition:color var(--transition),background var(--transition);
}
.footer-links a:hover { color:var(--white); background:rgba(255,255,255,0.05); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:0.78rem; color:var(--text-muted); }
.footer-social { display:flex; gap:0.75rem; }

/* ---------- Inner Pages (Impressum / Datenschutz) ---------- */
.page-hero {
  padding:140px 0 80px;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800));
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.page-hero-label { font-size:0.74rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem; }
.page-hero h1 { font-size:clamp(2rem,4vw,3rem); }
.legal-content { padding:80px 0 100px; max-width:800px; }
.legal-content h2 { font-size:1.25rem; margin-top:2.5rem; margin-bottom:0.75rem; color:var(--white); padding-bottom:0.5rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.legal-content h3 { font-size:1rem; margin-top:1.5rem; margin-bottom:0.4rem; color:var(--blue-100); }
.legal-content p, .legal-content li { font-size:0.91rem; color:var(--text-secondary); line-height:1.8; margin-bottom:0.6rem; }
.legal-content ul { list-style:disc; padding-left:1.5rem; margin-bottom:0.8rem; }
.legal-content a { color:var(--teal-300); transition:color var(--transition); }
.legal-content a:hover { color:var(--accent); }

/* ---------- Scroll Animations ---------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); will-change: opacity, transform; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }
.reveal-delay-5 { transition-delay:0.5s; }

/* ---------- Divider ---------- */
.divider { height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent); }

/* ---------- AI Skills Section ---------- */
.ai-skills-section {
  background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(20,184,166,0.08) 100%);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem 2rem;
}

.ai-skills-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(124,58,237,0.15);
}

.ai-skills-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.ai-skills-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.ai-skills-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ai-skills-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 3rem;
  margin-bottom: 2rem;
}

/* AI Providers grid */
.ai-providers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.ai-provider-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.ai-provider-card:hover {
  background: rgba(124,58,237,0.1);
  border-color: rgba(124,58,237,0.35);
  transform: translateY(-2px);
}

.ai-provider-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-provider-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.ai-provider-models {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* AI tag variant */
.skill-tag.ai-tag {
  background: rgba(124,58,237,0.1);
  border-color: rgba(124,58,237,0.25);
  color: #C4B5FD;
}
.skill-tag.ai-tag:hover {
  background: rgba(124,58,237,0.22);
  border-color: rgba(124,58,237,0.5);
  color: #E9D5FF;
}

/* ---------- Tags group label ---------- */
.tags-section-label {
  font-size:0.72rem; font-weight:700; color:var(--teal-400);
  margin-bottom:0.8rem; text-transform:uppercase; letter-spacing:0.16em;
  display:inline-flex; align-items:center; gap:0.5rem;
}
.tags-section-label::before {
  content:''; display:inline-block; width:14px; height:2px;
  background:var(--teal-500); border-radius:2px;
}

/* ---------- Trusted By Strip ---------- */
.trusted-by-strip {
  background: rgba(5,20,25,0.95);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 1.1rem 0;
  overflow: hidden;
}
.trusted-by-strip .container {
  display: flex; align-items: center; gap: 2rem;
}
.trusted-by-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
}
.trusted-by-track-wrap { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); }
.trusted-by-track {
  display: flex; align-items: center; gap: 1.8rem;
  width: max-content;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trusted-logo {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(240,250,250,0.35);
  white-space: nowrap;
  transition: color 0.2s;
}
.trusted-logo:hover { color: rgba(240,250,250,0.7); }
.trusted-sep { color: rgba(45,212,191,0.25); font-size: 0.8rem; }

/* ---------- Testimonials – improved ---------- */
.testimonial-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:2rem;
  transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  position:relative;
  border-left: 3px solid transparent;
}
.testimonial-card:nth-child(1) { border-left-color: var(--teal-500); }
.testimonial-card:nth-child(2) { border-left-color: var(--blue-500); }
.testimonial-card::before {
  content:'\201C'; position:absolute; top:0.8rem; right:1.4rem;
  font-size:6rem; line-height:1; color:rgba(45,212,191,0.10);
  font-family:Georgia,serif; pointer-events:none;
}
.testimonial-card:hover { background:var(--card-hover); border-color:rgba(45,212,191,0.25); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.testimonial-stars { color:#FBBF24; font-size:1rem; letter-spacing:0.1em; margin-bottom:1rem; }
.testimonial-text {
  font-size:0.91rem; color:var(--text-secondary); line-height:1.85;
  margin-bottom:1.5rem; font-style:italic;
}

/* ---------- Cert card – verified badge ---------- */
.cert-card::after {
  content:'✓'; position:absolute; top:0.8rem; right:0.9rem;
  width:20px; height:20px; border-radius:50%;
  background:rgba(74,222,128,0.15); border:1px solid rgba(74,222,128,0.35);
  color:#4ade80; font-size:0.62rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ---------- Employer Heading – card style ---------- */
.employer-heading {
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.8rem; margin-top:1rem;
  background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(36,144,200,0.04));
  border: 1px solid rgba(45,212,191,0.12);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
}
.employer-name {
  font-size:1rem; font-weight:700; color:var(--white);
  padding-bottom:0; border-bottom:none;
  margin-bottom:0.2rem;
}
.employer-period { font-size:0.78rem; color:var(--text-muted); white-space:normal; line-height:1.5; }

/* ---------- Nav active link ---------- */
.nav-links a.nav-active {
  color: var(--white);
  background: rgba(45,212,191,0.10);
}

/* ---------- Contact Form ---------- */
.contact-form-wrap {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem;
}
.contact-form { display:flex; flex-direction:column; gap:1.1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-label { font-size:0.78rem; font-weight:600; color:var(--text-secondary); letter-spacing:0.04em; }
.form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font); font-size:0.9rem; color:var(--white);
  outline: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
  border-color: rgba(45,212,191,0.45);
  background: rgba(45,212,191,0.04);
  box-shadow: 0 0 0 3px rgba(45,212,191,0.10);
}
.form-textarea { resize:vertical; min-height:130px; }
.form-submit { width:100%; justify-content:center; margin-top:0.4rem; }
.form-note { font-size:0.72rem; color:var(--text-muted); text-align:center; margin-top:0.2rem; }

/* Contact social pills */
.contact-social-row { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.5rem; }
.contact-social-pill {
  display:inline-flex; align-items:center; gap:0.45rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:100px; padding:0.4rem 0.9rem;
  font-size:0.78rem; font-weight:500; color:var(--text-secondary);
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.contact-social-pill:hover { background:rgba(45,212,191,0.10); border-color:rgba(45,212,191,0.35); color:var(--white); }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .certs-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; gap:3rem; }
  .hero-description { margin:0 auto 2.5rem; }
  .hero-actions { justify-content:center; }
  .hero-social { justify-content:center; }
  .hero-image-wrap { max-width:400px; margin:0 auto; }
  .about-inner { grid-template-columns:1fr; gap:3rem; text-align:center; }
  .about-image-wrap { max-width:360px; margin:0 auto; }
  .about-highlights { justify-items:center; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid-3 { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .availability-inner { grid-template-columns:1fr; text-align:center; }
  .availability-actions { flex-direction:row; flex-wrap:wrap; justify-content:center; min-width:auto; }
  .contact-inner { grid-template-columns:1fr; gap:3rem; }
  .testimonials-grid { grid-template-columns:1fr; }
}
@media (max-width:1024px) {
  .ai-providers-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-skills-bars { grid-template-columns: 1fr; }
}

@media (max-width:768px) {
  section { padding:70px 0; }
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column; position:fixed;
    inset:0; top:64px; background:rgba(7,21,37,0.98);
    backdrop-filter:blur(20px); padding:2rem 1.5rem; gap:0.5rem; z-index:999;
  }
  .nav-links.open a { padding:0.9rem 1rem; font-size:1.05rem; border-radius:var(--radius-md); }
  .hamburger { display:flex; }
  .services-grid { grid-template-columns:1fr; }
  .services-grid-3 { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr; }
  .skills-container { grid-template-columns:1fr; gap:2rem; }
  .availability-inner { padding:2.5rem 1.5rem; }
  .availability-actions { flex-direction:column; }
  .footer-inner { grid-template-columns:1fr; text-align:center; }
  .footer-links { justify-content:center; }
  .footer-bottom { justify-content:center; text-align:center; }
  .hero-image-frame img { height:380px; }
  .hero-float-badge { display:none; }
  .hero-scroll { display:none; }
  .trusted-by-strip .container { flex-direction:column; gap:0.75rem; align-items:flex-start; }
  .contact-inner { grid-template-columns:1fr; }
  .contact-form-wrap { padding:1.6rem 1.2rem; }
  .form-row { grid-template-columns:1fr; }
  .about-image-frame img { height:360px; }
  .about-highlights { grid-template-columns:1fr; }
  .certs-grid { grid-template-columns:repeat(2,1fr); }
  .ai-providers-grid { grid-template-columns:1fr 1fr; }
  .ai-skills-section { padding:1.4rem; }
  .timeline { padding-left:1.5rem; }
  .timeline-dot { left:-2.1rem; }
}
@media (max-width:480px) {
  .hero-actions { flex-direction:column; align-items:center; }
  .btn-lg { width:100%; justify-content:center; }
  .availability-actions .btn { width:100%; justify-content:center; }
  .certs-grid { grid-template-columns:1fr 1fr; }
}

/* ---------- Language Switcher ---------- */
.lang-switcher {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-sm); padding:0.4rem 0.75rem;
  font-size:0.82rem; font-weight:600; color:var(--text-secondary);
  cursor:pointer; transition:background var(--transition),
  border-color var(--transition), color var(--transition);
  white-space:nowrap;
}
.lang-switcher:hover {
  background:rgba(45,212,191,0.10);
  border-color:rgba(45,212,191,0.40);
  color:var(--white);
}
.lang-flag-icon {
  display:inline-flex; align-items:center; line-height:0;
}
.lang-flag-icon svg {
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.12);
  display:block;
}

/* ---------- Accessibility: skip-to-main ---------- */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--teal-500);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-to-main:focus { top: 1rem; }

/* ---------- Accessibility: focus-visible ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Accessibility: prefers-reduced-motion ---------- */
@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;
  }
  .reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .skill-bar-fill {
    transition: none;
    will-change: auto;
  }
  .hero-ring, .hero-ring-2 {
    animation: none;
    will-change: auto;
  }
  .hero-badge-dot, .availability-status-dot {
    animation: none;
    will-change: auto;
  }
}

/* ============================================================
   KI-AGENTUR SECTION
   ============================================================ */

/* ── Hero ── */
.ki-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 1rem;
}
.ki-hero-title {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, var(--white) 30%, var(--teal-300) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ki-hero-sub {
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto;
}

/* ── Section blocks (sub-sections inside ki-agentur) ── */
.ki-section-block {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Cards grid – top accent for items 4–6 ── */
.ki-services-grid .service-card:nth-child(4)::before {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
}
.ki-services-grid .service-card:nth-child(5)::before {
  background: linear-gradient(90deg, var(--teal-700), var(--teal-500));
}
.ki-services-grid .service-card:nth-child(6)::before {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}
/* ── Icon backgrounds for items 4–6 ── */
.ki-services-grid .service-card:nth-child(4) .service-icon {
  background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(99,102,241,0.08));
  border: 1px solid rgba(124,58,237,0.28);
}
.ki-services-grid .service-card:nth-child(5) .service-icon {
  background: linear-gradient(135deg, rgba(14,143,130,0.22), rgba(20,184,166,0.08));
  border: 1px solid rgba(45,212,191,0.25);
}
.ki-services-grid .service-card:nth-child(6) .service-icon {
  background: linear-gradient(135deg, rgba(14,165,233,0.22), rgba(56,189,248,0.08));
  border: 1px solid rgba(56,189,248,0.28);
}
/* Tech-tag row inside service cards */
.ki-card-tags { position: relative; z-index: 1; margin-top: 1rem; }

/* Card CTA link */
.ki-card-cta {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-400);
  position: relative;
  z-index: 1;
  transition: color var(--transition);
}
.ki-card-cta:hover { color: var(--teal-300); }

/* ── Quote ── */
.ki-quote {
  background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(36,144,200,0.05));
  border: 1px solid rgba(45,212,191,0.18);
  border-left: 4px solid var(--teal-500);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}
.ki-quote::after {
  content: '\201C';
  position: absolute;
  top: 0.2rem; right: 1.5rem;
  font-size: 7rem; line-height: 1;
  color: rgba(45,212,191,0.08);
  font-family: Georgia, serif;
  pointer-events: none;
}
.ki-quote blockquote {
  font-size: clamp(1rem, 2vw, 1.22rem);
  font-weight: 600;
  font-style: italic;
  color: var(--white);
  line-height: 1.65;
  position: relative; z-index: 1;
}

/* ── USP Grid ── */
.ki-usp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.ki-usp-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.ki-usp-item:hover {
  background: var(--card-hover);
  border-color: rgba(45,212,191,0.28);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.ki-usp-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: rgba(20,184,166,0.12);
  border: 1px solid rgba(45,212,191,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.ki-usp-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.ki-usp-desc {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ── Tech-Stack Pills ── */
.ki-pills { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.ki-pill {
  background: rgba(20,184,166,0.10);
  border: 1px solid rgba(45,212,191,0.22);
  border-radius: 100px;
  padding: 0.42rem 1.05rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--teal-300);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.ki-pill:hover {
  background: rgba(45,212,191,0.18);
  border-color: rgba(45,212,191,0.50);
  color: var(--white);
  transform: translateY(-1px);
}

/* ── Contact form wrapper ── */
.ki-form-wrap { max-width: 720px; margin: 0 auto; }

/* ── Select dropdown ── */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E8A87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  cursor: pointer;
  padding-right: 2.5rem;
}
.form-select option {
  background: var(--navy-700);
  color: var(--text-primary);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ki-usp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .ki-hero-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .ki-hero-sub   { font-size: 0.97rem; }
  .ki-section-block { margin-top: 3.5rem; padding-top: 3rem; }
  .ki-quote { padding: 1.4rem 1.6rem; }
  .ki-usp-grid { grid-template-columns: 1fr; }
  .ki-form-wrap { max-width: 100%; }
}

/* ============================================================
   WEBSITE-ENTWICKLUNG SECTION
   ============================================================ */
.web-cta {
  margin-top: 4rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.web-cta-text {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 2rem;
}

/* ============================================================
   DESIGN IMPROVEMENTS – v2
   ============================================================ */

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--teal-600), var(--blue-600));
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--teal-400); }

/* --- Text Selection --- */
::selection { background: rgba(45,212,191,0.25); color: var(--white); }
::-moz-selection { background: rgba(45,212,191,0.25); color: var(--white); }

/* --- Refined CSS Variables --- */
:root {
  --card-bg:      rgba(255,255,255,0.025);
  --card-border:  rgba(45,212,191,0.13);
  --card-hover:   rgba(45,212,191,0.09);
  --shadow-card:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-hover: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(45,212,191,0.18), 0 0 50px rgba(45,212,191,0.06);
}

/* --- Hero Name – more vibrant gradient --- */
.hero-name {
  background: linear-gradient(135deg, var(--white) 15%, var(--teal-300) 55%, var(--teal-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Hero Badge – subtle glow --- */
.hero-badge {
  box-shadow: 0 0 24px rgba(45,212,191,0.09), 0 2px 8px rgba(0,0,0,0.25);
}

/* --- Status dots – stronger glow --- */
.hero-badge-dot {
  box-shadow: 0 0 10px #4ade80, 0 0 4px #4ade80;
}
.availability-status-dot {
  box-shadow: 0 0 12px #4ade80, 0 0 6px #4ade80;
}

/* --- Section Label – subtle text glow --- */
.section-label {
  text-shadow: 0 0 28px rgba(45,212,191,0.4);
}

/* --- Dividers – visible teal gradient instead of faint white --- */
.divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(45,212,191,0.12) 20%,
    rgba(45,212,191,0.22) 50%,
    rgba(45,212,191,0.12) 80%,
    transparent 100%
  );
}

/* --- Section Backgrounds – ambient glow per side --- */
.gradient-section {
  background:
    radial-gradient(ellipse 65% 50% at 90% 50%, rgba(45,212,191,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #091E26 0%, #0E2A35 100%);
}
.gradient-section-alt {
  background:
    radial-gradient(ellipse 55% 40% at 10% 60%, rgba(36,144,200,0.04) 0%, transparent 55%),
    #051419;
}

/* --- Card hover – teal glow shadow (global) --- */
.service-card:hover,
.trust-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}
.testimonial-card:hover {
  box-shadow: 0 16px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(45,212,191,0.18);
}
.ki-usp-item:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(45,212,191,0.18);
}

/* --- Timeline dot – pulsing glow --- */
@keyframes timeline-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(20,184,166,0.7); }
  50%       { box-shadow: 0 0 20px rgba(20,184,166,1), 0 0 36px rgba(20,184,166,0.35); }
}
.timeline-dot {
  animation: timeline-pulse 3s ease-in-out infinite;
  will-change: box-shadow;
}

/* --- Timeline card hover – left glow --- */
.timeline-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), -2px 0 20px rgba(45,212,191,0.07);
}

/* --- Cert icon – stronger glow --- */
.cert-icon {
  box-shadow: 0 8px 24px rgba(20,184,166,0.4), 0 0 0 1px rgba(45,212,191,0.15);
}

/* --- Cert card hover – refined --- */
.cert-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(45,212,191,0.3), 0 0 40px rgba(45,212,191,0.07);
}

/* --- Social icon btn – teal border on hover --- */
.social-icon-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--teal-400);
  box-shadow: 0 4px 16px rgba(45,212,191,0.15);
}

/* --- Buttons – inner highlight + stronger shadow --- */
.btn-primary {
  background: linear-gradient(135deg, var(--blue-600) 0%, var(--teal-500) 100%);
  box-shadow: 0 6px 24px rgba(20,184,166,0.28), 0 1px 0 rgba(255,255,255,0.09) inset;
}
.btn-primary:hover {
  box-shadow: 0 12px 40px rgba(20,184,166,0.42), 0 1px 0 rgba(255,255,255,0.09) inset;
}
.btn-accent {
  box-shadow: 0 6px 24px rgba(20,184,166,0.38), 0 1px 0 rgba(255,255,255,0.12) inset;
}

/* --- Availability CTA – stronger glow --- */
.availability-inner {
  box-shadow: 0 0 80px rgba(14,143,130,0.15), 0 0 0 1px rgba(45,212,191,0.14) inset;
}

/* --- Contact form wrap --- */
.contact-form-wrap {
  background: rgba(255,255,255,0.022);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* --- Form input – crisper focus ring --- */
.form-input:focus {
  border-color: rgba(45,212,191,0.5);
  background: rgba(45,212,191,0.028);
  box-shadow: 0 0 0 3px rgba(45,212,191,0.12), 0 0 20px rgba(45,212,191,0.05);
}

/* --- AI section – harmonise with teal brand --- */
.ai-skills-section {
  background: linear-gradient(135deg,
    rgba(20,184,166,0.05) 0%,
    rgba(36,144,200,0.06) 50%,
    rgba(124,58,237,0.04) 100%
  );
  border-color: rgba(45,212,191,0.14);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* --- Employer heading – teal shadow line --- */
.employer-heading {
  box-shadow: -3px 0 0 var(--teal-500), 0 4px 20px rgba(0,0,0,0.25);
}

/* --- Navbar scrolled – crisp bottom border --- */
.navbar.scrolled {
  background: rgba(5,20,25,0.97);
  border-bottom: 1px solid rgba(45,212,191,0.09);
}

/* --- Footer – deeper background + teal top border --- */
footer {
  background: linear-gradient(180deg, var(--navy-900) 0%, #020b0f 100%);
  border-top: 1px solid rgba(45,212,191,0.11);
}

/* --- About highlight icons – subtle glow --- */
.about-highlight-icon {
  box-shadow: 0 4px 16px rgba(20,184,166,0.12);
}

/* --- Skill bar – 1px taller --- */
.skill-bar { height: 9px; }

/* --- Trusted-by logos – slightly brighter --- */
.trusted-logo { color: rgba(240,250,250,0.44); }
.trusted-logo:hover { color: rgba(240,250,250,0.78); }

/* --- Skill tags – slightly crisper border --- */
.skill-tag {
  border-color: rgba(45,212,191,0.16);
}
.skill-tag:hover {
  box-shadow: 0 2px 12px rgba(45,212,191,0.12);
}

/* --- Contact single-column layout (after form removal) --- */
.contact-single { max-width: 680px; }
.contact-single .contact-info-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) {
  .contact-single .contact-info-list { grid-template-columns: 1fr; }
}

/* --- Tech tags (timeline) – subtle hover --- */
.tech-tag {
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.tech-tag:hover {
  background: rgba(20,184,166,0.14);
  border-color: rgba(45,212,191,0.3);
  color: var(--teal-300);
  cursor: default;
}