/* ============================================
   ENDRE TRANS - Premium Transport Website CSS
   OPTIMIZED FOR PERFORMANCE + SUBTLE ANIMATIONS
   Modern • Lightweight • 60 FPS • Responsive
   ============================================ */

:root {
  --nav-h: 72px;
  
  /* Brand Colors */
  --primary: #22c55e;
  --primary-dark: #16a34a;
  --primary-light: #4ade80;
  --accent: #06b6d4;
  --accent-dark: #0891b2;
  --accent-glow: rgba(34, 197, 94, 0.3);
  
  /* Dark Theme (default) */
  --bg-base: #0a0a0f;
  --bg-elevated: #14141f;
  --bg-card: rgba(20, 20, 31, 0.85);
  --bg-glass: rgba(25, 25, 35, 0.75);
  --bg-glass-hover: rgba(30, 30, 42, 0.85);
  
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
  
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.1);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
}

/* Light Theme */
[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-hover: rgba(248, 250, 252, 0.95);
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  
  --border-color: rgba(15, 23, 42, 0.08);
  --border-hover: rgba(15, 23, 42, 0.15);
  --border-subtle: rgba(15, 23, 42, 0.1);
  
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
  --accent-glow: rgba(34, 197, 94, 0.2);
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--transition-base), color var(--transition-base);
}

::selection {
  background: var(--primary);
  color: white;
}

/* ============================================
   BACKGROUND PARTICLES - OPTIMIZED
   ============================================ */

.bg-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  will-change: auto;
}

[data-theme="light"] .bg-particles {
  opacity: 0.2;
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar {
  background: var(--bg-glass);
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-base);
  z-index: 1000;
}

.glass-nav {
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  font-size: 1.25rem;
  color: var(--text-primary) !important;
  transition: transform var(--transition-fast);
}

.navbar-brand:hover {
  transform: scale(1.03);
}

.brand-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-smooth);
}

.navbar-brand:hover .brand-logo {
  transform: rotate(-5deg);
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.navbar-brand:hover .brand-dot {
  transform: scale(1.3);
  box-shadow: 0 0 16px var(--primary);
}

.brand-name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Nav Pills - Subtle Animations */
.nav-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  color: var(--text-secondary) !important;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.nav-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-glass-hover);
  border-radius: inherit;
  transform: scale(0);
  transition: transform var(--transition-smooth);
}

.nav-pill:hover::before {
  transform: scale(1);
}

.nav-pill:hover {
  color: var(--text-primary) !important;
  transform: translateY(-2px);
}

.nav-pill.active {
  color: var(--primary) !important;
  font-weight: 600;
}

.nav-pill.active::before {
  transform: scale(1);
}

.nav-pill i {
  font-size: 1.1em;
  position: relative;
  z-index: 1;
  transition: transform var(--transition-smooth);
}

.nav-pill:hover i {
  transform: scale(1.15);
}

.nav-pill span {
  position: relative;
  z-index: 1;
}

/* Fancy Hamburger */
.fancy-toggler {
  border: 1px solid var(--border-color);
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  transition: all var(--transition-fast);
}

.fancy-toggler:hover {
  background: var(--bg-glass-hover);
  transform: scale(1.05);
}

.toggler-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 24px;
}

.toggler-lines span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.fancy-toggler.is-open .toggler-lines span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.fancy-toggler.is-open .toggler-lines span:nth-child(2) {
  opacity: 0;
}

.fancy-toggler.is-open .toggler-lines span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Nav CTA */
.nav-cta {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-cta:hover::before {
  opacity: 1;
}

.nav-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}

.nav-cta i,
.nav-cta span {
  position: relative;
  z-index: 1;
  color: var(--text-primary);
}

/* ============================================
   BUTTONS - WITH SUBTLE ANIMATIONS
   ============================================ */

.btn {
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: all var(--transition-fast);
  border: none;
  position: relative;
  overflow: hidden;
}

.btn i {
  transition: transform var(--transition-smooth);
}

.btn:hover i {
  transform: translateX(3px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  color: white;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

.btn-primary span,
.btn-primary i {
  position: relative;
  z-index: 1;
}

.btn-glass {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.btn-glass:hover {
  background: var(--bg-glass-hover);
  transform: translateY(-2px);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.btn-outline-light {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
}

.btn-outline-light:hover {
  background: var(--bg-glass);
  color: var(--text-primary);
  transform: translateY(-2px);
  border-color: var(--primary);
}

.theme-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle i {
  font-size: 1.2em;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.theme-toggle:hover i {
  transform: rotate(180deg) scale(1.1);
}

/* ============================================
   HERO SECTION - FIXED MOBILE PADDING
   ============================================ */

.hero {
  position: relative;
  min-height: max(100vh, 700px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 1rem);
}

@media (max-width: 991.98px) {
  .hero {
    padding-top: calc(var(--nav-h) + 2rem);
  }

  .badge-pill {
    margin-top: calc(var(--nav-h) + 1rem);
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  pointer-events: none;
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: var(--primary);
  top: -15%;
  left: -15%;
}

.blob-2 {
  width: 500px;
  height: 500px;
  background: var(--accent);
  bottom: -15%;
  right: -15%;
}

.grid-noise {
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, var(--border-color) 2px, var(--border-color) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, var(--border-color) 2px, var(--border-color) 3px);
  background-size: 50px 50px;
  opacity: 0.2;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 100%);
  pointer-events: none;
}

.hero .container {
  z-index: 1;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-smooth);
}

.badge-pill:hover {
  transform: scale(1.05);
  border-color: var(--primary);
}

.badge-pill i {
  color: var(--primary);
  font-size: 1.1em;
  transition: transform var(--transition-smooth);
}

.badge-pill:hover i {
  transform: rotate(360deg);
}

.display-5 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.lead {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
}

/* Text color fix for light theme */
.text-white-50 {
  color: var(--text-secondary) !important;
}

/* Hero Card */
.hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-smooth);
}

.hero-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 0 24px var(--accent-glow);
}

.hero-card-top {
  padding: 1rem 1.5rem;
  background: var(--bg-glass);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: transform var(--transition-smooth);
}

.hero-card:hover .dot {
  transform: scale(1.2);
}

.dot-r { background: #ef4444; }
.dot-y { background: #eab308; }
.dot-g { background: var(--primary); }

.mini-title {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

.hero-card .fs-4 {
  color: var(--text-primary);
}

/* Parallax Card */
.parallax-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

.parallax-card i {
  font-size: 1.75rem;
  color: var(--primary);
  transition: transform var(--transition-smooth);
}

.parallax-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
}

.parallax-card:hover i {
  transform: scale(1.15) rotate(5deg);
}

/* Stats (FIX: icon always on top + stable layout) */
.stats{
  display:flex;
  flex-wrap:wrap;
  gap: 1.5rem;
}

/* Karta jako kolumna -> zawsze: ikona / liczba / label */
.stat-card{
  flex: 1 1 220px;
  min-width: 180px;
  padding: 1.35rem 1.25rem 1.15rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
  text-align: center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 0.6rem;
}

.stat-card:hover{
  transform: translateY(-6px) scale(1.03);
  border-color: var(--primary);
  box-shadow: 0 8px 24px var(--accent-glow);
}

/* Ikona ZAWSZE u góry */
.stat-ic{
  order: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px; /* wygląda jak na screenie */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.15rem;

  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}

/* Jak ikony nie ma, a wrapper zostaje pusty -> nie rób dziury */
.stat-ic:empty{ display:none; }

.stat-ic i{
  font-size: 1.35rem;
  color: var(--primary);
}

/* Liczba + prefix/suffix w jednej linii, na jednej bazie */
.stat-num-wrap{
  order: 1;
  display:inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1;
}

.stat-num{
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin: 0;
}

.stat-prefix,
.stat-suffix{
  font-weight: 800;
  color: var(--text-secondary);
  opacity: 0.9;
  transform: translateY(-0.05em);
  font-size: 1.05rem;
}

/* Label zawsze na dole sekcji karty i równe wysokości */
.stat-label{
  order: 2;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;

  /* stabilizacja wysokości gdy label ma 2 linie */
  min-height: 2.2em;
  display:flex;
  align-items:center;
  justify-content:center;
}



/* ============================================
   SECTIONS
   ============================================ */

.section-pad {
  padding: var(--space-2xl) 0;
  position: relative;
}

.section-alt {
  background: var(--bg-elevated);
  position: relative;
}

.section-alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

/* ============================================
   GLASS CARDS - WITH SUBTLE HOVER
   ============================================ */

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

.glass-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Service Cards */
.service-card {
  height: 100%;
  transition: all var(--transition-smooth);
}

.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--primary);
  box-shadow: 0 12px 32px var(--accent-glow);
}

.service-card .icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-md);
  color: white;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  margin-bottom: 1rem;
  transition: transform var(--transition-smooth);
}

.service-card:hover .icon {
  transform: rotate(5deg) scale(1.1);
}

.service-card h3 {
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.service-card:hover h3 {
  color: var(--primary);
}

.service-card p {
  color: var(--text-secondary);
}

/* ============================================
   PROCESS FLOW - REDESIGNED GRID LAYOUT
   ============================================ */

.process-flow {
  background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-elevated) 100%);
}

.pf-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.pf-head {
  text-align: center;
  margin-bottom: 3rem;
}

.pf-kicker {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
}

.pf-sub {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

/* Progress Rail - Hidden on mobile, shown on tablet+ */
.pf-rail {
  display: none;
}

@media (min-width: 768px) {
  .pf-rail {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 2.5rem;
    max-width: 800px;
    position: relative;
  }
  
  .pf-rail::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      var(--primary) 0%,
      var(--accent) 100%
    );
    transform: translateY(-50%);
    z-index: 0;
  }
  
  .pf-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 16px var(--accent-glow);
    position: relative;
    z-index: 1;
    transition: transform var(--transition-smooth);
  }
  
  .pf-dot:hover {
    transform: scale(1.3);
  }
}

/* Grid Layout for Steps */
.pf-steps {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .pf-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1200px) {
  .pf-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pf-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-glass-hover);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all var(--transition-smooth);
  height: 100%;
}

.pf-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.pf-ic {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: var(--radius-md);
  font-size: 1.5rem;
  color: white;
  box-shadow: 0 4px 12px var(--accent-glow);
  transition: transform var(--transition-smooth);
}

.pf-step:hover .pf-ic {
  transform: rotate(5deg) scale(1.1);
}

.pf-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.pf-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.pf-desc {
  font-size: 0.9375rem;
  margin: 0;
  color: var(--text-secondary);
}

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.pf-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.pf-tag:hover {
  border-color: var(--primary);
  transform: scale(1.05);
}

.pf-tag i {
  font-size: 0.875rem;
  color: var(--primary);
}

.pf-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================
   FLEET SECTION
   ============================================ */

.fleet-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-smooth);
}

.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px) scale(1.05);
}

.chip i {
  color: var(--primary);
  transition: transform var(--transition-smooth);
}

.chip:hover i {
  transform: rotate(360deg);
}

.fleet-tiles {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.fleet-shot {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

.fleet-shot:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.fleet-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.fleet-shot:hover img {
  transform: scale(1.08);
}

.fleet-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform var(--transition-smooth);
}

.fleet-shot:hover .fleet-cap {
  transform: translateY(0);
}

/* ============================================
   PARTNERS MARQUEE
   ============================================ */

.partners-marquee {
  overflow: hidden;
  padding: var(--space-lg) 0;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.partners-track {
  display: flex;
  gap: var(--space-xl);
  animation: marquee 40s linear infinite;
  will-change: transform;
}

.partners-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-item {
  flex-shrink: 0;
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-smooth);
  filter: grayscale(100%) opacity(0.6);
}

.partner-item:hover {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-6px) scale(1.05);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.partner-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--transition-smooth);
}

.partner-item:hover img {
  transform: scale(1.1);
}

/* ============================================
   GALLERY
   ============================================ */

.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  z-index: 1;
  mix-blend-mode: overlay;
}

.gallery-item:hover::before {
  opacity: 0.2;
}

.gallery-item:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.gallery-item:hover img {
  transform: scale(1.1) rotate(2deg);
}

.gallery-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform var(--transition-smooth);
  z-index: 2;
}

.gallery-item:hover .gallery-cap {
  transform: translateY(0);
}

/* ============================================
   TESTIMONIALS
   ============================================ */

.glass-card .fw-semibold {
  color: var(--text-primary);
}

.glass-card .small,
.glass-card .text-white-50 {
  color: var(--text-muted) !important;
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.contact-card {
  padding: var(--space-lg);
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

.contact-card > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  font-size: 1rem;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.contact-card > div:hover {
  color: var(--primary);
  transform: translateX(4px);
}

.contact-card > div:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.contact-card i {
  font-size: 1.25rem;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform var(--transition-smooth);
}

.contact-card > div:hover i {
  transform: scale(1.15);
}

.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

.map-wrap:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.map-wrap iframe {
  display: block;
  filter: grayscale(20%);
  transition: filter var(--transition-base);
}

.map-wrap:hover iframe {
  filter: grayscale(0%);
}

/* Form Styles */
.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.form-control {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  transition: all var(--transition-smooth);
}

.form-control:focus {
  background: var(--bg-elevated);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  outline: none;
  color: var(--text-primary);
  transform: scale(1.01);
}

.form-control::placeholder {
  color: var(--text-muted);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-color);
}

.footer .text-white-50 {
  color: var(--text-muted) !important;
}

.footer a {
  transition: all var(--transition-fast);
}

.footer a:hover {
  color: var(--primary) !important;
  text-decoration: underline;
  transform: translateX(2px);
}

/* ============================================
   REVEAL ANIMATIONS - LIGHTWEIGHT
   ============================================ */

.reveal {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.reveal[data-reveal="fade-up"] {
  transform: translateY(20px);
}

.reveal[data-reveal="fade-in"] {
  transform: none;
}

.reveal[data-reveal="scale-in"] {
  transform: scale(0.97);
}

.reveal.is-in {
  opacity: 1;
  transform: none !important;
  will-change: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 991.98px) {
  :root {
    --space-xl: 2rem;
    --space-2xl: 3rem;
  }
  
  .navbar-collapse {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  
  .navbar-nav {
    gap: 0.5rem;
  }
  
  .nav-pill {
    justify-content: flex-start;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
  }
  
  .nav-pill span {
    display: inline !important;
  }
  
  .nav-pill i {
    font-size: 1.1em;
  }
  
  .theme-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 0.625rem 1rem;
  }
  
  .theme-toggle span {
    display: inline;
  }
  
  .nav-cta {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }
  
  .hero {
    min-height: auto;
  }
  
  .display-5 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  
  .fleet-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  :root {
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
  }
  
  .section-pad {
    padding: var(--space-xl) 0;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  
  .stats {
    justify-content: center;
  }
  
  .stat-card {
    min-width: 100px;
  }
  
  .stat-num {
    font-size: 2rem;
  }
  
  .pf-wrap {
    padding: var(--space-lg);
  }
  
  .pf-ic {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
  
  .pf-title {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .stats {
    gap: 2rem;
  }
}

@media (min-width: 992px) {
  .fleet-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
  
  .hero {
    min-height: max(100vh, 800px);
  }
  
  .navbar-nav {
    gap: 0.5rem;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
  
  .navbar-nav {
    gap: 0.625rem;
  }
  
  .nav-pill {
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
  }
}

/* ============================================
   NAVBAR COMPACT + ICON-ONLY (992px–1399.98px)
   ============================================ */
@media (max-width: 1399.98px) and (min-width: 992px) {

  /* mniejsze odstępy i brak "puchnięcia" */
  .navbar-nav { 
    gap: 0.25rem; 
  }

  .nav-pill {
    padding: 0.4rem 0.6rem;     /* było 0.5rem 1rem */
    font-size: 0.9rem;          /* stabilnie */
    gap: 0.35rem;
  }

  /* IKONY tylko (ukryj tekst) */
  .nav-pill span { 
    display: none; 
  }

  .nav-pill i { 
    font-size: 1.15em; 
  }

  /* CTA/Toggle też trochę ciaśniej */
  .nav-cta {
    padding: 0.45rem 0.7rem;
  }
  .nav-cta span { display:none; } /* jeśli chcesz CTA też jako ikona */

  .theme-toggle {
    width: 38px;
    height: 38px;
  }

  /* opcjonalnie: trochę mniejszy brand */
  .navbar-brand { 
    font-size: 1.1rem; 
  }
  .brand-logo { 
    height: 32px; 
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1460px;
  }
  
  .navbar-nav {
    gap: 0.75rem;
  }
  
  .nav-pill {
    padding: 0.5rem 1.125rem;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .navbar,
  .bg-particles,
  .hero-bg,
  .theme-toggle,
  .btn,
  .footer {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .glass-card,
  .service-card {
    border: 1px solid #ccc;
    background: white;
    page-break-inside: avoid;
  }
}

/* ===== JOBS ===== */
.job-card .job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.job-details summary.job-summary {
  cursor: pointer;
  user-select: none;
  color: var(--text-secondary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.job-details summary.job-summary::marker { display: none; }
.job-details summary.job-summary::before {
  content: "▸";
  transition: transform var(--transition-smooth);
  opacity: 0.8;
}
.job-details[open] summary.job-summary::before { transform: rotate(90deg); }

/* ===== DOWNLOADS ===== */
.downloads-wrap { display: grid; gap: 1rem; }
.download-item { padding: 1.25rem; }
.download-ic {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.download-ic i { font-size: 1.6rem; color: var(--primary); }

/* ===== CERTS (like gallery) ===== */
.cert-item {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}
.cert-item:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}
.cert-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.cert-item:hover img { transform: scale(1.08); }
.cert-cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.9rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform var(--transition-smooth);
}
.cert-item:hover .cert-cap { transform: translateY(0); }

.contact-card .text-white {
  color: var(--text-secondary) !important;
}

/* ============================================
   HERO PHOTO BACKGROUND (LIGHT/DARK SWITCH)
   ============================================ */

.hero-bg .hero-photo{
  position:absolute;
  inset:0;
  z-index:0;                 /* najniżej w hero-bg */
  background-position: center right;
  background-repeat:no-repeat;
  background-size: cover;
  opacity: 0.22;             /* default pod dark */
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05);
}

/* Dark mode */
:root .hero-bg .hero-photo{
  background-image: url("../img/hero/hero-dark.png"); /* lub .webp */
  opacity: 0.22;
  filter: saturate(1.05) contrast(1.08);
}

/* Light mode */
[data-theme="light"] .hero-bg .hero-photo{
  background-image: url("../img/hero/hero-light.png"); /* lub .webp */
  opacity: 0.18;
  filter: saturate(1.05) contrast(1.02);
}

/* Czytelność tekstu: dodatkowa miękka "mgiełka" */
.hero-bg .hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
      60% 70% at 20% 30%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.06) 45%,
      rgba(0,0,0,0.00) 70%
    );
  pointer-events:none;
}

/* Light: mgiełka jaśniejsza (żeby nie przyciemniało za mocno) */
[data-theme="light"] .hero-bg .hero-photo::after{
  background: radial-gradient(
      60% 70% at 20% 30%,
      rgba(255,255,255,0.60) 0%,
      rgba(255,255,255,0.25) 45%,
      rgba(255,255,255,0.00) 70%
    );
}

/* Upewnij się, że Twoje istniejące warstwy są NAD zdjęciem */
.blob, .grid-noise, .hero-vignette { position:absolute; inset:auto; z-index:1; }
.grid-noise, .hero-vignette { inset:0; }

/* ============================================
   CONTACT BACKGROUND (image light/dark)
   ============================================ */

.contact-section{
  position: relative;
  overflow: hidden;
}

/* warstwa tła */
.contact-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* LIGHT domyślnie (u Ciebie dark jest default — ale tło ustawimy per theme) */
  background: url("../img/bg/contact-light.png") center/cover no-repeat;
  opacity: 1;
}

/* DARK gdy data-theme="dark" (albo bez atrybutu, jeśli dark jest default) */
:root:not([data-theme="light"]) .contact-bg{
  background-image: url("../img/bg/contact-dark.png");
}

/* LIGHT gdy data-theme="light" */
[data-theme="light"] .contact-bg{
  background-image: url("../img/bg/contact-light.png");
}

/* opcjonalnie: lekka winieta dla czytelności kart */
.contact-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 35%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 100%);
  opacity: .35;
}

[data-theme="light"] .contact-bg::after{
  background: radial-gradient(circle at 50% 35%,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 100%);
  opacity: .55;
}

/* upewnij się, że content jest nad tłem */
#kontakt .container{
  position: relative;
  z-index: 1;
}

/* ============================================
   HERO MOBILE FIX (<= 575.98px)
   ============================================ */
@media (max-width: 575.98px){

  /* HERO: mniej "powietrza", lepsze ułożenie */
  .hero{
    min-height: auto;                 /* ważne */
    padding-top: calc(var(--nav-h) + 1rem);
    padding-bottom: 1.25rem;
    align-items: flex-start;          /* zamiast centrowania */
  }

  /* usuń sztuczny margines badge (teraz Ci wypycha content) */
  .badge-pill{
    margin-top: 0 !important;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* tekst hero bardziej "mobile-friendly" */
  .hero h1{
    margin-top: 0.75rem !important;
    letter-spacing: -0.02em;
  }

  .hero .lead{
    margin-top: 0.75rem !important;
    font-size: 1.05rem;
    line-height: 1.55;
  }

  /* CTA: pełna szerokość, ładne odstępy */
  .hero .d-flex.flex-wrap.gap-2.mt-4{
    gap: 0.75rem !important;
  }
  .hero .btn-lg{
    width: 100%;
    justify-content: center;
  }

  /* STATY: zamiast wielkich kart 1 pod 1 -> 2 kolumny */
  .stats{
    margin-top: 1.25rem !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    justify-items: stretch;
  }

  .stat-card{
    min-width: 0;                /* ważne przy grid */
    padding: 1rem 0.9rem;
    border-radius: 18px;
  }

  .stat-ic{
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .stat-num{
    font-size: 2rem;             /* mniej "billboard" */
  }

  .stat-label{
    font-size: 0.75rem;
    min-height: 2.1em;
  }

  /* HERO FOTO: na mobile lepiej center + mniej skali */
  .hero-bg .hero-photo{
    background-position: center;
    transform: none;
    opacity: 0.16;               /* delikatniej */
  }

  :root:not([data-theme="light"]) .hero-bg .hero-photo{
    opacity: 0.18;               /* dark minimalnie mocniej */
  }

  /* MGIEŁKA: na mobile mniejsza i bardziej pod tekst */
  .hero-bg .hero-photo::after{
    background: radial-gradient(
      80% 60% at 50% 22%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.10) 45%,
      rgba(0,0,0,0.00) 75%
    );
  }

  [data-theme="light"] .hero-bg .hero-photo::after{
    background: radial-gradient(
      80% 60% at 50% 22%,
      rgba(255,255,255,0.70) 0%,
      rgba(255,255,255,0.30) 45%,
      rgba(255,255,255,0.00) 75%
    );
  }

  .hero .col-lg-5{ display:block; }
  .hero-card{ margin-top: 1rem; }
}

/* Uładź animację collapse na mobile */
@media (max-width: 991.98px) {
  .navbar-collapse {
    transition: height .28s ease, opacity .22s ease, transform .22s ease;
    transform-origin: top;
  }
  .navbar-collapse.collapse:not(.show) {
    opacity: 0;
    transform: translateY(-6px);
  }
  .navbar-collapse.collapse.show {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   NAVBAR: BIG ON TOP -> COMPACT ON SCROLL (FIXED)
   ============================================ */

:root{
  --nav-h-top: 84px;        /* mniej agresywnie */
  --nav-h-scrolled: 72px;
  --nav-pad-y: 0.55rem;
}

/* bazowy navbar */
.navbar.glass-nav{
  min-height: var(--nav-h-scrolled);
  padding-top: var(--nav-pad-y);
  padding-bottom: var(--nav-pad-y);
  display: flex;
  align-items: center;

  transition:
    min-height 220ms ease,
    padding 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease,
    backdrop-filter 220ms ease,
    border-color 220ms ease;
}

/* ważne: container też centruj w pionie */
.navbar.glass-nav > .container{
  display: flex;
  align-items: center;
}

/* brand: stabilna linia bazowa + zero skakania */
.navbar .navbar-brand{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1;
}

/* logo i nazwa – stabilne przejścia */
.navbar .brand-logo{
  height: 36px;
  width: auto;
  display: block;
  transition: height 220ms ease, transform 220ms ease;
}
.navbar .brand-name{
  font-size: 1.15rem;
  transition: font-size 220ms ease, transform 220ms ease;
}

/* linki: bez zmian wysokości między stanami */
.navbar .nav-pill{
  padding: 0.5rem 1rem;
  transition: background-color 180ms ease, transform 180ms ease, color 180ms ease;
}

/* ====== STAN TOP ====== */
.navbar.glass-nav.is-top{
  min-height: var(--nav-h-top);

  /* delikatnie inne szkło, ale nie „wyprane” */
  background: rgba(25, 25, 35, 0.50);
  backdrop-filter: blur(16px);
  box-shadow: none;
  border-color: rgba(255,255,255,0.06);
}

/* Light */
[data-theme="light"] .navbar.glass-nav.is-top{
  background: rgba(255,255,255,0.68);
  border-color: rgba(15,23,42,0.06);
}

/* na górze: większy brand, ale bez rozjeżdżania reszty */
.navbar.glass-nav.is-top .navbar-brand{
  gap: 0.8rem;
}
.navbar.glass-nav.is-top .brand-logo{
  height: 42px;
}
.navbar.glass-nav.is-top .brand-name{
  font-size: 1.28rem;
}

/* opcjonalnie: linki mogą być ciut „lżejsze” na top (bez zmiany paddingu) */
.navbar.glass-nav.is-top .nav-pill{
  transform: translateY(0); /* upewnienie – bez „podskoków” */
}

/* ====== MOBILE ====== */
@media (max-width: 991.98px){
  :root{
    --nav-h-top: 78px;
    --nav-h-scrolled: 70px;
    --nav-pad-y: 0.5rem;
  }

  .navbar.glass-nav.is-top .brand-logo{ height: 38px; }
  .navbar.glass-nav.is-top .brand-name{ font-size: 1.16rem; }
}

/* ============================================
   MOBILE OFFCANVAS DRAWER
   ============================================ */
.mobile-drawer{
  width: min(86vw, 360px);
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.mobile-drawer .offcanvas-header{
  border-bottom: 1px solid var(--border-color);
}

.mobile-drawer .offcanvas-body{
  padding: 1rem;
}

/* linki w drawerze pełna szerokość */
.mobile-drawer .nav-pill{
  width: 100%;
  justify-content: flex-start;
}

/* close button w light mode */
[data-theme="light"] .mobile-drawer .btn-close{
  filter: none;
}

/* Kontakt: odznaki / badge */
.contact-badges{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.contact-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.contact-badge:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}

.contact-badge img{
  display:block;
  max-height:72px;       /* ujednolica wysokość */
  max-width:100%;
  height:auto;
  width:auto;
  border:0 !important;   /* przebija inline style */
}

@media (max-width: 420px){
  .contact-badge img{ max-height:64px; }
}