/* ============================================================
   ZMIENNE I RESET
   ============================================================ */

:root {
  --bg:             #050505;
  --bg-soft:        #0d0d0f;
  --bg-card:        rgba(255, 255, 255, 0.04);
  --bg-card-strong: rgba(255, 255, 255, 0.06);
  --text:           #f4f4f5;
  --text-muted:     #a1a1aa;
  --line:           rgba(255, 255, 255, 0.12);
  --line-strong:    rgba(255, 255, 255, 0.22);
  --accent:         #ffffff;
  --shadow:         0 10px 30px rgba(0, 0, 0, 0.35);
  --radius:         22px;
  --container:      1180px;
  --nav-height:     78px;
  --transition:     0.3s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.35) transparent;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(56,  189, 248, 0.55)  0%,
    rgba(96,  165, 250, 0.65) 30%,
    rgba(129, 140, 248, 0.65) 60%,
    rgba(168,  85, 247, 0.55) 100%
  );
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(56,  189, 248, 0.85)  0%,
    rgba(96,  165, 250, 0.9)  30%,
    rgba(129, 140, 248, 0.9)  60%,
    rgba(168,  85, 247, 0.8)  100%
  );
}



a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
}

.section,
.hero {
  position: relative;
  overflow: hidden;
}

.hero {
  padding: calc(var(--nav-height) + 48px) 0 80px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.section {
  padding: 110px 0;
}

/* ============================================================
   TŁA / WZORY
   ============================================================ */

.pattern-solid {
  background: #050505;
}

.pattern-dots {
  background-color: #060606;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 0.8px, transparent 0.8px);
  background-size: 24px 24px;
}

.pattern-grid {
  background-color: #050505;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px;
  background-position: 0 0, 0 0;
}

.pattern-grid-light {
  background-color: #090909;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #050505;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px;
  background-position: 0 0, 0 0;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}

.topbar.scrolled {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.nav-wrapper {
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-menu a {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(180, 195, 220, 0.55);
  transition: color 0.25s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: rgba(240, 245, 255, 0.92);
  border-color: transparent;
  background: transparent;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
  margin: 5px 0;
}

/* ============================================================
   NAV LOGO
   ============================================================ */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(180, 200, 255, 0.6);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.nav-logo:hover { color: rgba(220, 235, 255, 0.85); }

.nav-logo-name {
  background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 40%, #818cf8 75%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   FLOATING LANGUAGE SWITCHER (bottom-left)
   ============================================================ */

.lang-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lang-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(120, 170, 255, 0.22);
  background: rgba(10, 14, 28, 0.75);
  backdrop-filter: blur(12px);
  color: #dbeafe;
  cursor: pointer;
  transition: 0.3s ease;
  font: inherit;
  font-size: 0.88rem;
}

.lang-float-btn:hover {
  background: rgba(80, 140, 255, 0.14);
  border-color: rgba(140, 190, 255, 0.38);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.18);
}

.lang-float-btn.active {
  background: linear-gradient(90deg, rgba(59,130,246,0.25), rgba(129,140,248,0.25));
  border-color: rgba(96, 165, 250, 0.55);
  color: #ffffff;
  box-shadow:
    0 0 12px rgba(96, 165, 250, 0.3),
    0 0 24px rgba(129, 140, 248, 0.18);
}

.lang-flag {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* ============================================================
   HERO — WYGASZENIE SIATKI
   ============================================================ */
.hero-grid-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0) 0%,
    rgba(5, 5, 5, 0.22) 35%,
    rgba(5, 5, 5, 0.55) 68%,
    rgba(5, 5, 5, 0.82) 85%,
    #050505 100%
  );
}

/* ============================================================
   HERO — SEKCJA O MNIE
   ============================================================ */

.hero-profile {
  position: relative;
  overflow: hidden;
}

.hero-grid-profile {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: center;
  min-height: 88vh;
}
.hero-subline {
  margin-top: 18px;
  font-size: 1.05rem;
  color: rgba(200, 210, 225, 0.7);
  letter-spacing: 0.04em;
}
/* Lewa kolumna */
.hero-content {
  max-width: 760px;
}

.hero-tagline {
  display: inline-block;
  margin-bottom: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfe4ff;
  background: rgba(70, 120, 255, 0.08);
  border: 1px solid rgba(120, 170, 255, 0.22);
  box-shadow: 0 0 18px rgba(80, 140, 255, 0.08);
}

.hero-title {
  margin: 0 0 20px;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08em;
}

.hero-title .hero-intro {
  display: block;
  width: 100%;
  color: #ffffff;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: #ffffff;
  background-clip: initial;
  font-size: 0.52em;
  line-height: 1.05;
  font-weight: 800;
}

.hero-title .hero-name {
  display: block;
  width: 100%;
  background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 35%, #818cf8 70%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-lead {
  font-size: 1.45rem;
  line-height: 1.55;
  color: rgba(244, 248, 255, 0.95);
  margin-bottom: 18px;
  max-width: 900px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

/* Przyciski hero */
.hero-btn-main,
.hero-btn-outline {
  min-width: 180px;
  justify-content: center;
  text-align: center;
  padding: 14px 24px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

.hero-btn-main {
  color: #f8fbff;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 45%, #818cf8 100%);
  border: 1px solid rgba(140, 190, 255, 0.28);
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.22);
}

.hero-btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(59, 130, 246, 0.3);
  filter: brightness(1.05);
}

.hero-btn-outline {
  color: #dbeafe;
  background: rgba(80, 140, 255, 0.08);
  border: 1px solid rgba(120, 170, 255, 0.24);
  box-shadow: 0 0 18px rgba(80, 140, 255, 0.08);
}

.hero-btn-outline:hover {
  transform: translateY(-3px);
  color: #ffffff;
  background: rgba(80, 140, 255, 0.15);
  border-color: rgba(150, 195, 255, 0.38);
}

.hero-name-block {
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  padding: 8px 14px 10px 0;
  border-radius: 24px;
}

.hero-name-block::before,
.hero-name-block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 35%, #818cf8 70%, #a855f7 100%);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.hero-name-block::before {
  transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-name-block::after {
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.96;
}

.hero-name-block:hover::after {
  transform: scaleX(1);
}

.hero-name-block:hover::before {
  transform: scaleX(1);
  transition-delay: 0.12s;
}

.hero-name-block .hero-intro,
.hero-name-block .hero-title,
.hero-name-block .hero-name {
  position: relative;
  z-index: 2;
  transition:
    color 0.28s ease 0.24s,
    -webkit-text-fill-color 0.28s ease 0.24s,
    background 0.28s ease 0.24s;
}

.hero-name-block:hover .hero-intro {
  color: #ffffff;
}

.hero-name-block:hover .hero-title {
  color: #ffffff;
}

.hero-name-block:hover .hero-name {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
}

/* Prawa kolumna — karta profilowa */
.profile-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 28px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 0 34px rgba(56, 189, 248, 0.10),
    0 0 60px rgba(96, 165, 250, 0.08),
    0 0 82px rgba(168, 85, 247, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
  overflow: visible;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  pointer-events: none;
  background: radial-gradient(circle at 20% 15%, rgba(56, 189, 248, 0.10), transparent 30%),
              radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.08), transparent 28%),
              radial-gradient(circle at 50% 100%, rgba(168, 85, 247, 0.10), transparent 34%);
  filter: blur(18px);
  opacity: 0.85;
  z-index: -1;
}

.profile-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.45),
    0 0 42px rgba(56, 189, 248, 0.14),
    0 0 72px rgba(96, 165, 250, 0.10),
    0 0 96px rgba(168, 85, 247, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.profile-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: floatBadge 3.5s ease-in-out infinite;
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(6deg); }
}

/* Zdjęcie profilowe */
.profile-image-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 10px auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
  
.profile-image-wrap::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  z-index: 0;
}

.profile-image-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0) 45%,
    rgba(56, 189, 248, 0.10) 62%,
    rgba(96, 165, 250, 0.08) 70%,
    rgba(168, 85, 247, 0.07) 78%,
    transparent 88%
  );
  filter: blur(18px);
  animation: pulseGlow 4s ease-in-out infinite;
  z-index: 1;
}
.profile-image-ring,
.profile-image-ring-2 {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.profile-image-ring {
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 10deg,
      #38bdf8 10deg 24deg,
      transparent 24deg 40deg,
      #60a5fa 40deg 58deg,
      transparent 58deg 78deg,
      #818cf8 78deg 94deg,
      transparent 94deg 122deg,
      #a855f7 122deg 138deg,
      transparent 138deg 164deg,
      #38bdf8 164deg 178deg,
      transparent 178deg 206deg,
      #60a5fa 206deg 220deg,
      transparent 220deg 246deg,
      #818cf8 246deg 262deg,
      transparent 262deg 292deg,
      #a855f7 292deg 308deg,
      transparent 308deg 334deg,
      #38bdf8 334deg 348deg,
      transparent 348deg 360deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation:
    rotateProfileRing 10s linear infinite,
    pulseProfileRing 3.8s ease-in-out infinite;
  opacity: 0.95;
}

.profile-image-ring-2 {
  inset: -20px;
  background:
    conic-gradient(
      from 40deg,
      transparent 0deg 18deg,
      rgba(56, 189, 248, 0.95) 18deg 28deg,
      transparent 28deg 52deg,
      rgba(96, 165, 250, 0.95) 52deg 64deg,
      transparent 64deg 96deg,
      rgba(129, 140, 248, 0.95) 96deg 106deg,
      transparent 106deg 146deg,
      rgba(168, 85, 247, 0.95) 146deg 156deg,
      transparent 156deg 192deg,
      rgba(56, 189, 248, 0.95) 192deg 202deg,
      transparent 202deg 238deg,
      rgba(96, 165, 250, 0.95) 238deg 248deg,
      transparent 248deg 286deg,
      rgba(129, 140, 248, 0.95) 286deg 296deg,
      transparent 296deg 330deg,
      rgba(168, 85, 247, 0.95) 330deg 340deg,
      transparent 340deg 360deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  filter: blur(0.3px);
  animation:
    rotateProfileRingReverse 14s linear infinite,
    pulseProfileRingSoft 5s ease-in-out infinite;
  opacity: 0.72;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.06); opacity: 1;   }
}

@keyframes rotateProfileRing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateProfileRing {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes rotateProfileRingReverse {
  from {
    transform: rotate(360deg) scale(1);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes pulseProfileRing {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  20% {
    transform: scale(1.008);
    opacity: 1;
  }
  40% {
    transform: scale(1.016);
    opacity: 0.98;
  }
  60% {
    transform: scale(1.008);
    opacity: 0.94;
  }
  80% {
    transform: scale(1.014);
    opacity: 1;
  }
}

@keyframes pulseProfileRingSoft {
  0%, 100% {
    transform: scale(1);
    opacity: 0.64;
  }
  30% {
    transform: scale(1.012);
    opacity: 0.78;
  }
  65% {
    transform: scale(1.020);
    opacity: 0.70;
  }
}

.profile-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(96, 165, 250, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  z-index: 3;
}

.profile-card:hover .profile-image {
  transform: scale(1.04) rotate(-1deg);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(255, 255, 255, 0.08);
}

.profile-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%, transparent 60%, rgba(255, 255, 255, 0.08));
  opacity: 0.7;
  pointer-events: none;
}

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

/* Dane kontaktowe w karcie */
.profile-card-content h2 {
  margin-bottom: 18px;
  font-size: 1.55rem;
  line-height: 1.2;
  text-align: center;
}

.profile-info-list {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.profile-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
}

.info-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Social media */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.social-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(80, 140, 255, 0.08);
  border: 1px solid rgba(120, 170, 255, 0.2);
  overflow: hidden;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.social-button:hover {
  transform: translateY(-4px) scale(1.06);
  background: rgba(80, 140, 255, 0.16);
  border-color: rgba(140, 190, 255, 0.45);
  box-shadow: 0 0 18px rgba(80, 140, 255, 0.22);
}

.social-button img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  filter: brightness(0) saturate(100%) invert(70%) sepia(37%) saturate(1623%) hue-rotate(186deg) brightness(101%) contrast(101%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.social-button:hover img {
  transform: scale(1.08);
  filter: brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(1373%) hue-rotate(178deg) brightness(103%) contrast(103%);
}

/* ============================================================
   NAGŁÓWKI SEKCJI
   ============================================================ */

.section-header {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-header h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, #e0f0ff 0%, #93c5fd 40%, #a5b4fc 75%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header p {
  font-size: 1.08rem;
  color: rgba(200, 215, 240, 0.78);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

.eyebrow,
.section-tag,
.timeline-date {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
}

/* ============================================================
   PRZYCISKI GLOBALNE
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: #fff;
  color: #050505;
}

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ============================================================
   PROJEKTY — SLIDER
   ============================================================ */
   

.projects-section {
  position: relative;
  overflow: visible;
}

.projects-shell {
  position: relative;
  margin-top: 28px;
}

.projects-viewport {
  width: 100%;
  overflow: hidden;
}

.projects-slider {
  display: flex;
  gap: 28px;
  overflow: hidden;
  padding: 8px 0 10px;
  position: relative;
}

/* Inner track — slides behind the overflow:hidden mask */
.projects-track {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
  min-width: 100%;
  will-change: transform;
}

/* Karta projektu */
.project-card {
  flex: 0 0 calc((var(--slider-w, 100%) - 56px) / 3);
  min-width: 320px;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 18, 24, 0.98), rgba(10, 10, 14, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(96, 165, 250, 0.06),
    0 0 22px rgba(96, 165, 250, 0.05),
    0 0 30px rgba(168, 85, 247, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  padding: 12px;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(120, 170, 255, 0.18);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(96, 165, 250, 0.10),
    0 0 28px rgba(96, 165, 250, 0.10),
    0 0 40px rgba(168, 85, 247, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Miniatura projektu */
.project-image {
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 18, 32, 0.96), rgba(10, 12, 22, 0.98));
  padding: 18px 18px 12px;
  border-radius: 20px;
}

.project-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  transition: transform 0.45s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.04);
}

/* Treść karty */
.project-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-content h3 {
  margin: 0 0 14px;
  font-size: 1.75rem;
  line-height: 1.15;
  color: #ffffff;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.project-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #beddff;
  background: rgba(80, 140, 255, 0.08);
  border: 1px solid rgba(120, 170, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.project-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(220, 230, 245, 0.78);
}

/* Link do GitHub — zawsze na dole karty */
.project-links {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  justify-content: flex-start;
}

.project-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  color: #eef6ff;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 45%, #818cf8 100%);
  border: 1px solid rgba(140, 190, 255, 0.26);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.project-links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(59, 130, 246, 0.30);
  filter: brightness(1.05);
}

/* Strzałki nawigacji slidera */
.projects-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(120, 170, 255, 0.18);
  border-radius: 50%;
  background: rgba(13, 19, 35, 0.92);
  color: #d9ebff;
  font-size: 1.8rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.projects-nav:hover {
  background: rgba(30, 58, 138, 0.9);
  border-color: rgba(147, 197, 253, 0.4);
  transform: translateY(-50%) scale(1.06);
}

.projects-nav-left  { left: -72px; }
.projects-nav-right { right: -72px; }


/* ============================================================
   CERTYFIKATY I KURSY
   ============================================================ */

.cert-section {
  position: relative;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 30px;
}

.cert-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(16, 22, 38, 0.96), rgba(9, 13, 24, 0.98));
  border: 1px solid rgba(120, 170, 255, 0.12);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.cert-card:hover {
  transform: translateY(-8px);
  border-color: rgba(120, 170, 255, 0.26);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(96, 165, 250, 0.10);
}

.cert-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.cert-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fd0ff;
  background: rgba(80, 140, 255, 0.08);
  border: 1px solid rgba(120, 170, 255, 0.18);
}

.cert-date {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(185, 200, 225, 0.72);
}

.cert-card h3 {
  margin: 0 0 16px;
  font-size: 1.55rem;
  line-height: 1.2;
  color: #7cc7ff;
}

.cert-card p {
  margin: 0;
  color: rgba(216, 226, 240, 0.78);
  line-height: 1.75;
  font-size: 1rem;
}

.cert-actions {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: flex-start;
}

.cert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 12px 18px;
  border: 1px solid rgba(140, 190, 255, 0.26);
  border-radius: 14px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 45%, #818cf8 100%);
  color: #eef6ff;
  font-weight: 700;
  font-size: 0.96rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.cert-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(59, 130, 246, 0.30);
  filter: brightness(1.05);
}

.cert-btn-disabled {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(210, 220, 235, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: default;
}

.cert-btn-disabled:hover {
  transform: none;
  filter: none;
  box-shadow: none;
}

.cert-card-muted {
  border-style: dashed;
  opacity: 0.92;
}

/* --- cert preview thumbnail --- */
.cert-preview {
  position: relative;
  width: 100%;
  height: 148px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  flex-shrink: 0;
  background: rgba(10, 15, 28, 0.7);
  border: 1px solid rgba(120, 170, 255, 0.10);
}

.cert-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}

.cert-card:hover .cert-preview img {
  transform: scale(1.04);
}

/* overlay on hover */
.cert-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 22, 0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cert-card:hover .cert-preview-overlay {
  opacity: 1;
}

.cert-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 45%, #818cf8 100%);
  color: #eef6ff;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
  transform: translateY(6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  white-space: nowrap;
}

.cert-card:hover .cert-preview-btn {
  transform: translateY(0);
}

.cert-preview-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.45);
}

.cert-preview-btn svg {
  flex-shrink: 0;
}

/* no-preview placeholder */
.cert-preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(150, 170, 210, 0.3);
}

/* hide the old bottom actions row when there's a preview overlay */
.cert-card.has-preview .cert-actions {
  display: none;
}

/* ============================================================
   UMIEJĘTNOŚCI
   ============================================================ */

.skills-section {
  padding: 120px 0;
}

/* Group block */
.hex-group {
  margin-bottom: 52px;
  position: relative;
}

/* XML-style labels */
.hex-group-label {
  display: inline-block;
  font-size: 0.78rem;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(96, 165, 250, 0.55);
  padding: 3px 0;
}

.hex-group-label-open  { display: block; margin-bottom: 18px; }
.hex-group-label-close { display: block; margin-top: 18px; text-align: right; }

/* Hex grid row — centered */
.hex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 0;
}

/* Single hexagon wrapper — handles glow, lift, tooltip */
.hex-item {
  position: relative;
  width: 84px;
  height: 94px;
  cursor: pointer;
  /* glow lives here, outside clip-path */
  filter: drop-shadow(0 0 0px rgba(96, 165, 250, 0));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.hex-item:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.55))
          drop-shadow(0 0 22px rgba(129, 140, 248, 0.3));
}

/* Tooltip label */
.hex-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: rgba(180, 210, 255, 0.8);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.hex-item:hover::after {
  opacity: 1;
}

/* Border ring — slightly larger hex behind the inner one */
.hex-item::before {
  content: '';
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, rgba(96, 165, 250, 0.22), rgba(129, 140, 248, 0.15));
  transition: background 0.3s ease;
  z-index: 0;
}

.hex-item:hover::before {
  background: linear-gradient(160deg, rgba(96, 165, 250, 0.7), rgba(168, 85, 247, 0.55));
}

/* The hexagon shape */
.hex-inner {
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, rgba(28, 36, 62, 0.97), rgba(16, 20, 40, 0.99));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 1;
}

.hex-item:hover .hex-inner {
  background: linear-gradient(160deg, rgba(36, 50, 90, 0.99), rgba(24, 30, 62, 0.99));
}

.hex-inner img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  filter: brightness(0.88) saturate(1.1);
  transition: filter 0.3s ease, transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.hex-item:hover .hex-inner img {
  filter: brightness(1.2) saturate(1.35);
  transform: scale(1.1);
}

/* ============================================================
   DOŚWIADCZENIE — OŚ CZASU
   ============================================================ */

.timeline {
  position: relative;
  margin-top: 48px;
  padding: 10px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  border-radius: 999px;
  background: rgba(120, 170, 255, 0.12);
  overflow: hidden;
}

.timeline-line-progress {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
}

.timeline-item {
  position: relative;
  width: 50%;
  margin-bottom: 42px;
}

.timeline-item.left {
  left: 0;
  padding-right: 48px;
}

.timeline-item.right {
  left: 50%;
  padding-left: 48px;
}

.timeline-dot {
  position: absolute;
  top: 28px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #60a5fa;
  border: 3px solid #081120;
  box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.12);
  z-index: 2;
}

.timeline-item.left .timeline-dot  { right: -9px; }
.timeline-item.right .timeline-dot { left: -9px; }

.timeline-item.current .timeline-dot {
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.16);
}

.timeline-content {
  position: relative;
  min-height: 190px;
  padding: 24px 24px 50px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(16, 22, 38, 0.96), rgba(9, 13, 24, 0.98));
  border: 1px solid rgba(120, 170, 255, 0.12);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    max-height 0.4s ease;
  max-height: 190px;
}

.timeline-content:hover {
  transform: translateY(-6px);
  border-color: rgba(120, 170, 255, 0.24);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(96, 165, 250, 0.08);
}

.timeline-content.can-expand:hover {
  max-height: 500px;
}

.timeline-item.current .timeline-content {
  border-color: rgba(34, 197, 94, 0.28);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.32),
    0 0 26px rgba(34, 197, 94, 0.08);
}

.timeline-item.current .timeline-content:hover {
  border-color: rgba(34, 197, 94, 0.38);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(34, 197, 94, 0.12);
}

.timeline-content h3 {
  margin: 0 0 14px;
  font-size: 1.28rem;
  line-height: 1.25;
  color: #ffffff;
}

.timeline-content p {
  margin: 0;
  padding-right: 10px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(220, 230, 245, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-content.can-expand:hover p {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.timeline-more {
  position: absolute;
  right: 24px;
  bottom: 18px;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(190, 210, 240, 0.75);
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.timeline-content.is-truncated .timeline-more {
  opacity: 1;
}

.timeline-content.can-expand:hover .timeline-more {
  opacity: 0;
  transform: translateY(4px);
}

.timeline-item.current .timeline-more {
  color: rgba(170, 255, 200, 0.9);
}

/* ============================================================
   KONTAKT
   ============================================================ */

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

.contact-hero {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.contact-heading {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 28px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
  flex-wrap: wrap;
}

.contact-heading-plain {
  color: #ffffff;
}

.contact-heading-accent {
  background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 40%, #818cf8 75%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-sub {
  font-size: 1.15rem;
  color: rgba(200, 215, 240, 0.7);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 44px;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.01em;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  color: #e2eeff;
  background: transparent;
  border: 1.5px solid rgba(120, 170, 255, 0.35);
  letter-spacing: 0.04em;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-btn:hover {
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.75);
  background: rgba(80, 130, 255, 0.08);
  transform: translateY(-3px);
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.18), 0 8px 24px rgba(0,0,0,0.2);
}

.contact-btn svg {
  flex-shrink: 0;
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.contact-btn:hover svg {
  transform: translate(2px, -2px);
  opacity: 1;
}


/* ============================================================
   SIDE SECTION NAVIGATOR (dots)
   ============================================================ */

.side-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.side-nav-line {
  width: 1.5px;
  flex: 1;
  min-height: 18px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.4s ease;
}

.side-nav-line.lit {
  background: linear-gradient(180deg, #60a5fa, #818cf8);
}

.side-nav-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, transform 0.35s ease;
  flex-shrink: 0;
  position: relative;
}

.side-nav-dot:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.2);
}

.side-nav-dot.active {
  background: radial-gradient(circle, #93c5fd 0%, #818cf8 60%, #a855f7 100%);
  border-color: transparent;
  box-shadow:
    0 0 8px rgba(96, 165, 250, 0.7),
    0 0 18px rgba(129, 140, 248, 0.45);
  transform: scale(1.25);
}

/* Tooltip on hover */
.side-nav-dot::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: rgba(200, 215, 255, 0.85);
  white-space: nowrap;
  background: rgba(10, 14, 28, 0.88);
  border: 1px solid rgba(120, 160, 255, 0.18);
  padding: 4px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.side-nav-dot:hover::before {
  opacity: 1;
}

@media (max-width: 900px) {
  .side-nav { display: none; }
}

/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */

.pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  /* no flex — use absolute children to avoid subpixel gaps */
}

/* Absolute cols with 1px overlap to kill subpixel gap lines */
.pt-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 7 + 2px);
  transform: translateY(-100%);
  will-change: transform;
  animation-fill-mode: both;
}
.pt-col:nth-child(1) { left: calc(100% / 7 * 0);       background: #38bdf8; }
.pt-col:nth-child(2) { left: calc(100% / 7 * 1 - 1px); background: #57aef9; }
.pt-col:nth-child(3) { left: calc(100% / 7 * 2 - 1px); background: #6b9ef9; }
.pt-col:nth-child(4) { left: calc(100% / 7 * 3 - 1px); background: #7d8ff7; }
.pt-col:nth-child(5) { left: calc(100% / 7 * 4 - 1px); background: #9080f4; }
.pt-col:nth-child(6) { left: calc(100% / 7 * 5 - 1px); background: #a66df2; }
.pt-col:nth-child(7) { left: calc(100% / 7 * 6 - 1px); background: #b855f7; }

/* ENTER: cols drop in one by one */
.pt-overlay.pt-enter .pt-col {
  animation: ptDropIn 0.58s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pt-overlay.pt-enter .pt-col:nth-child(1) { animation-delay: 0.00s; }
.pt-overlay.pt-enter .pt-col:nth-child(2) { animation-delay: 0.07s; }
.pt-overlay.pt-enter .pt-col:nth-child(3) { animation-delay: 0.14s; }
.pt-overlay.pt-enter .pt-col:nth-child(4) { animation-delay: 0.21s; }
.pt-overlay.pt-enter .pt-col:nth-child(5) { animation-delay: 0.28s; }
.pt-overlay.pt-enter .pt-col:nth-child(6) { animation-delay: 0.35s; }
.pt-overlay.pt-enter .pt-col:nth-child(7) { animation-delay: 0.42s; }

/* EXIT: cols rise out one by one */
.pt-overlay.pt-exit .pt-col {
  transform: translateY(0%);
  animation: ptRiseOut 0.52s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pt-overlay.pt-exit .pt-col:nth-child(1) { animation-delay: 0.00s; }
.pt-overlay.pt-exit .pt-col:nth-child(2) { animation-delay: 0.07s; }
.pt-overlay.pt-exit .pt-col:nth-child(3) { animation-delay: 0.14s; }
.pt-overlay.pt-exit .pt-col:nth-child(4) { animation-delay: 0.21s; }
.pt-overlay.pt-exit .pt-col:nth-child(5) { animation-delay: 0.28s; }
.pt-overlay.pt-exit .pt-col:nth-child(6) { animation-delay: 0.35s; }
.pt-overlay.pt-exit .pt-col:nth-child(7) { animation-delay: 0.42s; }

@keyframes ptDropIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0%);    }
}

@keyframes ptRiseOut {
  from { transform: translateY(0%);   }
  to   { transform: translateY(100%); }
}

/* Also fix contact heading — single gradient span */
.contact-heading-accent {
  background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 35%, #818cf8 70%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   STOPKA
   ============================================================ */

.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #050505;
}

.footer-inner {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer p,
.footer a {
  color: var(--text-muted);
}

/* ============================================================
   PŁYWAJĄCY PRZYCISK CV
   ============================================================ */

.floating-cv-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 999px;
  color: #f8fbff;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 45%, #818cf8 100%);
  border: 1px solid rgba(140, 190, 255, 0.3);
  box-shadow:
    0 12px 30px rgba(59, 130, 246, 0.28),
    0 0 18px rgba(96, 165, 250, 0.16);
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  animation: floatingCvPulse 3.2s ease-in-out infinite;
}

.floating-cv-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 18px 36px rgba(59, 130, 246, 0.34),
    0 0 24px rgba(96, 165, 250, 0.22);
  filter: brightness(1.05);
}

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

.cv-btn-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1rem;
}

.cv-btn-text {
  white-space: nowrap;
  font-size: 0.98rem;
}

/* Toast — komunikat o braku CV */
.cv-toast {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 18, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cv-toast.show {
  opacity: 1;
  visibility: visible;
}

.cv-toast-box {
  min-width: 280px;
  max-width: 420px;
  margin: 20px;
  padding: 22px 28px;
  border-radius: 20px;
  text-align: center;
  color: #eef6ff;
  background: linear-gradient(180deg, rgba(20, 27, 45, 0.96), rgba(12, 16, 28, 0.96));
  border: 1px solid rgba(120, 170, 255, 0.22);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(80, 140, 255, 0.12);
}

.cv-toast-box p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(235, 243, 255, 0.95);
}

/* ============================================================
   ANIMACJE SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

@media (max-width: 1200px) {
  .project-card {
    flex: 0 0 calc((100% - 28px) / 2);
  }

  .projects-nav-left  { left: -58px; }
  .projects-nav-right { right: -58px; }
}

@media (max-width: 1100px) {
  .cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .hero-grid-profile {
    grid-template-columns: 1fr;
    gap: 36px;
    min-height: auto;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-title {
    align-items: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-title {
    font-size: clamp(2.6rem, 10vw, 4.4rem);
  }

  .hero-lead {
    font-size: 1.2rem;
  }

  .profile-card {
    max-width: 500px;
    margin: 0 auto;
  }

}

@media (max-width: 980px) {
  .timeline-line {
    left: 14px;
    transform: none;
  }

  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    width: 100%;
    left: 0;
    padding-left: 48px;
    padding-right: 0;
  }

  .timeline-item.left .timeline-dot,
  .timeline-item.right .timeline-dot {
    left: 5px;
    right: auto;
  }
}

@media (max-width: 820px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 20px;
  background: rgba(5, 5, 5, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  flex-direction: column;
  align-items: stretch;
  display: none;
}

  .nav-menu.open {
    display: flex;
  }

  .nav-menu a {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .project-card {
    flex: 0 0 85%;
    min-width: unset;
    border-radius: 22px;
  }

  .project-content {
    padding: 18px;
  }

  .project-content h3 {
    font-size: 1.35rem;
  }

  .project-content p {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .project-tags span {
    font-size: 0.82rem;
    padding: 7px 10px;
  }

  .projects-nav {
    width: 44px;
    height: 44px;
    font-size: 1.45rem;
  }

  .projects-nav-left  { left: -12px; }
  .projects-nav-right { right: -12px; }

  .cert-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cert-card {
    min-height: 280px;
    padding: 22px;
    border-radius: 20px;
  }

  .cert-card h3 {
    font-size: 1.32rem;
  }

  .cert-card p {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .cert-card-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .projects-nav {
    display: none;
  }

  .project-card {
    flex: 0 0 92%;
  }

  .hero {
    padding-bottom: 60px;
  }

  .section {
    padding: 84px 0;
  }

  .hero-tagline {
    font-size: 0.82rem;
    padding: 9px 14px;
  }

  .hero-title {
    line-height: 1;
  }

  .hero-lead {
    font-size: 1.05rem;
  }

  .hero-btn-main,
  .hero-btn-outline {
    width: 100%;
    min-width: unset;
  }

  .profile-card {
    padding: 22px;
    border-radius: 22px;
  }

  .profile-image-wrap {
    width: 190px;
    height: 190px;
  }

  .profile-card-content h2 {
    font-size: 1.3rem;
  }

  .social-button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }


  .timeline-content {
    padding: 22px;
  }

  .floating-cv-btn {
    right: 16px;
    bottom: 16px;
    padding: 12px 15px;
    gap: 10px;
  }

  .cv-btn-icon {
    width: 30px;
    height: 30px;
  }

  .cv-btn-text {
    font-size: 0.92rem;
  }

  .cv-toast-box {
    padding: 20px 18px;
    border-radius: 16px;
  }
}

@media (max-width: 600px) {
  .hex-item {
    width: 64px;
    height: 72px;
  }

  .hex-inner img {
    width: 32px;
    height: 32px;
  }

  .hex-grid {
    gap: 8px;
    padding-left: 16px;
  }
}