/* Experience-led visual depth. Kept separate so visual refinements stay easy to tune. */
.experience-section {
  position: relative;
  background: linear-gradient(180deg, #f5f5f7 0%, #ececf0 100%);
}

.experience-section::before {
  content: "";
  position: absolute;
  inset: 42px max(20px, calc((100% - 1190px) / 2));
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.18));
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 22px 60px rgba(26,26,28,.06);
  pointer-events: none;
}

.experience-section .container { position: relative; }
.timeline { gap: 14px; }
.timeline li { padding: 31px 32px; border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(0,0,0,.035); }
.timeline li:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.09); }
.timeline .location { display: flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 10px; font-weight: 600; color: #85858d; }
.timeline .location::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c3442f; box-shadow: 0 0 0 3px rgba(195,68,47,.11); }

/* A softly layered finish keeps the final sections distinct without losing the calm palette. */
.skills-section,
.contact {
  position: relative;
  margin-top: 28px;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 22px 56px rgba(27,27,30,.13);
}

.skills-section { border-bottom-left-radius: 42px; border-bottom-right-radius: 42px; }

footer {
  position: relative;
  margin-top: 28px;
  padding-top: 4px;
  border-radius: 42px 42px 0 0;
  box-shadow: 0 -10px 34px rgba(27,27,30,.1);
}

footer .container { min-height: 75px; }

@media (max-width: 720px) {
  .experience-section::before { inset: 22px 12px; border-radius: 28px; }
  .timeline li { padding: 24px; }
  .skills-section,
  .contact { margin-top: 18px; border-radius: 30px; }
  footer { margin-top: 18px; border-radius: 30px 30px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline li { transition: none; }
}