:root { --primary:#0B3C64; --primary-dark:#072A44; --accent:#4DA3FF; --text-light:#FFFFFF; --text-muted:#BFD4E6; }
body { margin:0; font-family:'Inter',sans-serif; background: linear-gradient(180deg, var(--primary-dark), var(--primary));; color:var(--text-light); }
.header { background:rgba(7,42,68,0.8); padding:20px; text-align:center; position:sticky; top:0; z-index:1000; }
.cta { display:inline-block; margin-top:8px; background:var(--accent); color:#041323; padding:10px 18px; border-radius:999px; text-decoration:none; font-weight:600; }
.hero { padding:20px 16px 8px 16px; animation:fadeIn .9s ease forwards; }

.hero-container { 
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:32px;
  max-width:1200px;
  width:95%;
  margin:0 auto;
  align-items: stretch;
}

.text-block { display:flex; flex-direction:column; gap:16px; }
.highlight-box { background:rgba(255,255,255,0.08); padding:24px 0; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,0.25); width:100%; }
.highlight-box h1 { 
  font-size: clamp(20px,5vw,30px); 
  line-height: 1.3;
  margin: 0 0 12px 0; 
}
.highlight-box h2 { font-size:clamp(28px,6vw,42px); font-weight:700; margin:0; color:var(--accent); }
.intro-text { font-size:18px; line-height:1.6; white-space:normal; text-align: justify; margin-bottom: 0; }
.section { 
  padding: 8px 0 16px 0;
  animation: fadeIn 1.1s ease forwards;
}

.section h2 { font-size:clamp(20px,5vw,32px); text-align:center; margin-bottom:16px; }
.expertise-grid { display:grid; grid-template-columns:repeat(4, 1fr);
  gap: 20px;
  margin-top: 16px; gap:20px; margin-top:16px; }
/* Tablet: 2 karty */
@media (max-width: 900px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Telefon: 1 karta w pionie */
@media (max-width: 500px) {
  .expertise-grid {
    grid-template-columns: 1fr;
  }
}

.expertise-card { background:rgba(255,255,255,0.08); padding:20px; border-radius:12px; text-align:center; }
.expertise-card img { height:160px; width:auto; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.25); margin-bottom:10px; }
.expertise-card h3 { margin-bottom:10px; font-size:20px; color:var(--accent); }
.expertise-card p { font-size:16px; line-height:1.5; color:var(--text-light); }
.footer { padding:20px; text-align:center; color:var(--text-muted); font-size:14px; }
@keyframes fadeIn { to { opacity:1; transform:translateY(0); } }

.intro-text h2 { margin: 8px 0 0 0; padding: 0; }

.highlight-box h2{ margin-bottom: 4px; }


/* === Add breaks between badge, contact section, and logo === */
.sidebar .badge,
.contact-card,
.sidebar-logo {
  display: block;
  margin-bottom: 20px; /* consistent vertical spacing */
}

/* Ensure last element does not add extra space at bottom */
.sidebar .sidebar-logo { margin-bottom: 0; }


/* === Make logo frame identical to badge frame === */
.sidebar .badge img,
.sidebar-logo img {
  width: 100%;
  height: auto;
  max-width: 180px;            /* keep consistent width cap */
  display: block;
  margin: 0 auto;
  border: 4px solid #FFFFFF;   /* same border as badge */
  border-radius: 16px;         /* same radius as current badge */
  padding: 8px;                /* same inner padding */
  background: rgba(255,255,255,0.08); /* same background */
  box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.15); /* same shadow */
}
``



a.badge img, .sidebar-logo img {
    width: 180px;
    height: auto;
    border-radius: 24px;
    border: 4px solid #FFFFFF;
    box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.15);
    background: rgba(255,255,255,.08);
    padding: 8px;
    display: block;
    margin: 0 auto;
}

@media (max-width: 900px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .expertise-grid {
    grid-template-columns: 1fr;
  }
}

.highlight-inner {
  padding: 0 16px;
}

.highlight-box {
  text-align: center;
}

.intro-text h2 {
  text-align: center;
}

.contact-card a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
/* Make email + LinkedIn visually secondary */
.contact-card a {
  font-size: 0.9rem;
  opacity: 0.85;
}

.contact-card p {
  margin: 4px 0;
}

/* Align badge & logo with contact text */
.sidebar .badge img,
.sidebar-logo img {
  margin: 0;
}

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


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

@media (max-width: 900px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .text-block {
    text-align: center;
  }

  .intro-text {
    text-align: justify;
  }
}

@media (max-width: 500px) {
  .highlight-box {
    padding: 16px 12px;
  }

  .expertise-card {
    padding: 16px;
  }

  .expertise-card h3 {
    font-size: 18px;
  }

  .expertise-card p {
    font-size: 15px;
  }
}

/* =========================
   MOBILE LAYOUT — content first
   ========================= */

@media (max-width: 900px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Zamiana kolejności kolumn */
  .text-block {
    order: 1;
  }

  .sidebar {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .intro-text {
    text-align: justify;
  }
}

/* =========================
   MOBILE TYPOGRAPHY TUNING
   ========================= */
/* === MOBILE ONLY PATCH — SAFE === */
@media (max-width: 500px) {

  .highlight-box h1 {
    line-height: 1.45 !important;
  }

  .intro-text {
    font-size: 14.5px;
    line-height: 1.52;
  }
}

@media (max-width: 500px) {
  .highlight-box {
    padding: 20px 12px 24px;
  }

  .highlight-box h1 {
    line-height: 1.6 !important;
  }
}



@media (max-width: 500px) {
  .section h2 {
    all: unset;
    display: block;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 8px 0;
    color: var(--text-light);
  }
}

/* Only on mobile: make "My Expertise..." smaller */
@media (max-width: 500px) {
  .intro-text h2 {
    font-size: 18px !important;
    line-height: 1.15;
    margin-top: 6px;
  }
}
/* Compact the "Looking for..." box on mobile */
@media (max-width: 500px) {
  .highlight-box {
    padding: 10px 12px;
  }

  .highlight-box h1 {
    margin-bottom: 6px;
    line-height: 1.25;
  }
}

.highlight-box {
  padding-top: 24px;
  padding-bottom: 24px;
}
/* Make all right-column sections use the same visual width */
.text-block {
  box-sizing: border-box;
}

/* Unified content rail */
.text-block > .highlight-box,
.text-block > .intro-text,
.text-block > .section {
  width: 100%;
  box-sizing: border-box;
}

/* Horizontal gutters */
.highlight-box,
.intro-text,
.section {
  padding-left: 16px;
  padding-right: 16px;
}

/* Remove the internal fake padding wrapper effect */
.highlight-inner {
  padding: 0;
}