/* =============================================================
   ENHANCEMENTS.CSS  v3
   • Animations
   • Fully responsive (all devices 320px → 2560px)
   • Fluid typography (numbers, headings, body)
   • Active nav highlight support
   Does NOT override original design — only adds/fixes on top.
   ============================================================= */

/* ----------------------------------------------------------
   0. FLUID TYPOGRAPHY — numbers & headings scale smoothly
   ---------------------------------------------------------- */

/* Achievement numbers — fluid from 3.5rem (mobile) to 8rem (4K) */
.achievements__number {
  font-size: clamp(3.2rem, 6vw, 8rem) !important;
  letter-spacing: clamp(-0.05rem, -0.2vw, -0.2rem) !important;
}

/* Achievement description */
.achievements__descr {
  font-size: clamp(1.2rem, 1.8vw, 2rem) !important;
}

/* H1 hero title — fluid */
h1, .headline__title {
  font-size: clamp(2.6rem, 5.5vw, 8rem) !important;
  line-height: 1.15 !important;
}

/* H2 section titles */
h2, .h2__title {
  font-size: clamp(2rem, 4vw, 5.5rem) !important;
}

/* H3 */
h3, .h3__title {
  font-size: clamp(1.6rem, 2.5vw, 3rem) !important;
}

/* H5 resume lines title */
.resume-lines__title {
  font-size: clamp(1.3rem, 1.8vw, 2rem) !important;
}

/* Body text */
.about-descr__text,
.resume-lines__descr,
.resume-lines__source {
  font-size: clamp(1.2rem, 1.5vw, 1.8rem) !important;
  line-height: 1.65 !important;
}

/* Small/label text */
small.top,
.resume-lines__date,
.contact-lines__title,
.h2__subtitle span {
  font-size: clamp(0.9rem, 1.1vw, 1.4rem) !important;
}

/* Tools caption */
.tools-cards__caption {
  font-size: clamp(1rem, 1.2vw, 1.5rem) !important;
}

/* ----------------------------------------------------------
   1. KEYFRAMES
   ---------------------------------------------------------- */
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(40px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft  { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.85)}       to{opacity:1;transform:scale(1)} }
@keyframes floatY      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes shimmer     { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes borderGlow  { 0%,100%{box-shadow:0 0 8px rgba(167,139,250,.2)} 50%{box-shadow:0 0 22px rgba(167,139,250,.55)} }
@keyframes pulseRing   { 0%{box-shadow:0 0 0 0 rgba(167,139,250,.4)} 70%{box-shadow:0 0 0 12px rgba(167,139,250,0)} 100%{box-shadow:0 0 0 0 rgba(167,139,250,0)} }
@keyframes spin        { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:0} }

/* ----------------------------------------------------------
   2. AVATAR SIDEBAR
   ---------------------------------------------------------- */
.avatar__logo  { animation: fadeInLeft 0.7s ease both; }
.avatar__image { animation: scaleIn 0.9s ease 0.2s both; }
.avatar__block:nth-child(3) { animation: fadeInLeft 0.6s ease 0.3s both; }
.avatar__block:nth-child(4) { animation: fadeInLeft 0.6s ease 0.45s both; }
.avatar__block:nth-child(5) { animation: fadeInLeft 0.6s ease 0.6s both; }

.avatar__image img {
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
  animation: floatY 5s ease-in-out infinite;
}
.avatar__image img:hover {
  transform: scale(1.04) translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;
  animation-play-state: paused;
}

.socials-square__link {
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}
.socials-square__link:hover { transform: translateY(-4px) scale(1.15) !important; }

/* ----------------------------------------------------------
   3. HEADER
   ---------------------------------------------------------- */
.header { animation: fadeInDown 0.6s ease both; }

/* Nav link — active indicator bar */
.menu__link {
  position: relative;
  transition: color 0.25s ease, background-color 0.25s ease !important;
}
/* Bottom bar for mobile/tablet nav (bottom pill) */
@media (max-width: 991px) {
  .menu__link::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease, left 0.3s ease;
  }
  .menu__link.active::after,
  .menu__link:hover::after {
    width: 55%;
    left: 22.5%;
  }
}
/* Desktop nav active glow ring */
@media (min-width: 992px) {
  .menu__link.active {
    box-shadow: 0 0 0 2px var(--accent) !important;
    color: var(--t-bright) !important;
  }
  .menu__link:hover:not(.active) {
    box-shadow: 0 0 0 1px rgba(167,139,250,0.4) !important;
  }
}
/* Large screen (text nav) active underline */
@media (min-width: 1200px) {
  .menu__link::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease, left 0.3s ease;
  }
  .menu__link.active::after {
    width: 60%;
    left: 20%;
  }
  .menu__link:hover::after {
    width: 50%;
    left: 25%;
  }
}

.header__trigger { animation: pulseRing 2.5s ease-out infinite; }

/* ----------------------------------------------------------
   4. HERO SECTION
   ---------------------------------------------------------- */
.headline__title   { animation: fadeInUp 0.8s ease 0.1s both; }
.headline__btnholder { animation: fadeInUp 0.8s ease 0.4s both; }

.btn-default {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.btn-default:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}

/* ----------------------------------------------------------
   5. SECTION TITLES
   ---------------------------------------------------------- */
.h2__title {
  position: relative;
  display: inline-block;
}
.h2__title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  border-radius: 2px;
  transition: width 0.8s ease;
}
.h2__title.is-animated::after { width: 60%; }
.h2__subtitle svg {
  transition: transform 0.4s ease;
  display: inline-block;
}
.h2__subtitle:hover svg { transform: rotate(180deg) scale(1.3); }

/* ----------------------------------------------------------
   6. PORTFOLIO GALLERY
   ---------------------------------------------------------- */
  .gallery__item {
  overflow: hidden;
  transition: transform 0.35s ease !important;
  height: 450px !important;
  padding: 0.5rem !important;
  width: 100% !important;
  float: none !important;
}

@media (max-width: 767px) {
  .gallery__item {
    width: 100% !important;
    float: none !important;
    height: 350px !important;
  }
}
.gallery__item:hover { transform: translateY(-5px) !important; z-index: 2; }
.gallery__image {
  transition: transform 0.5s ease, filter 0.5s ease !important;
  filter: brightness(0.9);
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
}
.gallery__item:hover .gallery__image {
  transform: scale(1.06) !important;
  filter: brightness(1.05);
}
.rounded-tag-button {
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.rounded-tag-button:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
}

/* ----------------------------------------------------------
   7. ACHIEVEMENT CARDS
   ---------------------------------------------------------- */
.achievements__card {
  animation: borderGlow 3s ease-in-out infinite;
  transition: transform 0.3s ease !important;
}
.achievements__card:hover { transform: translateY(-5px) scale(1.03) !important; }

/* Gradient number — override original so clamp above wins */
.achievements__number {
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* ----------------------------------------------------------
   8. RESUME LINES
   ---------------------------------------------------------- */
.resume-lines__item {
  position: relative;
  transition: padding-left 0.3s ease !important;
  border-radius: 8px;
  padding: 0.6rem 0.5rem !important;
}
.resume-lines__item::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 100%; width: 0;
  background: linear-gradient(90deg, rgba(167,139,250,.12), transparent);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.resume-lines__item:hover::before { width: 100%; }
.resume-lines__item:hover { padding-left: 1.2rem !important; }

/* ----------------------------------------------------------
   9. TOOLS CARDS
   ---------------------------------------------------------- */
.tools-cards__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.tools-cards__card:hover {
  transform: translateY(-6px) rotate(-2deg) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.2) !important;
}
.tools-cards__icon { transition: transform 0.3s ease !important; }
.tools-cards__card:hover .tools-cards__icon {
  transform: scale(1.15) rotate(5deg) !important;
}

/* ----------------------------------------------------------
   10. SOCIAL CARDS
   ---------------------------------------------------------- */
.socials-cards__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}
.socials-cards__card:hover {
  transform: translateY(-6px) scale(1.08) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.25) !important;
  background: var(--accent) !important;
  color: var(--base) !important;
}
.socials-cards__card:hover i { color: var(--base) !important; }

/* ----------------------------------------------------------
   11. CONTACT FORM
   ---------------------------------------------------------- */
.form input, .form textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
}
.form input:focus, .form textarea:focus {
  box-shadow: 0 0 0 3px rgba(167,139,250,.22) !important;
  transform: translateY(-1px) !important;
  outline: none;
}
.ph-circle-notch { animation: spin 1s linear infinite; display: inline-block; }

/* ----------------------------------------------------------
   12. SCROLL PROGRESS BAR
   ---------------------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  z-index: 99999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ----------------------------------------------------------
   13. CURSOR GLOW (desktop only)
   ---------------------------------------------------------- */
#cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.10) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: left 0.08s ease, top 0.08s ease;
  z-index: 0;
  mix-blend-mode: screen;
}
@media (max-width: 991px) { #cursor-glow { display: none; } }

/* ----------------------------------------------------------
   14. SECTION REVEAL
   ---------------------------------------------------------- */
.enhance-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.enhance-reveal.revealed { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------
   15. TEASER SHIMMER
   ---------------------------------------------------------- */
.teaser__text {
  background: linear-gradient(90deg, var(--t-bright) 20%, var(--accent) 50%, var(--t-bright) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
  font-size: clamp(1.2rem, 1.8vw, 2.2rem) !important;
}

/* ----------------------------------------------------------
   16. ABOUT INFO HOVER
   ---------------------------------------------------------- */
.about-info__item {
  transition: transform 0.25s ease, padding-left 0.25s ease !important;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
.about-info__item:hover {
  transform: translateX(6px) !important;
  background: rgba(167,139,250,.06);
}

/* ----------------------------------------------------------
   17. SCROLL TO TOP BUTTON
   ---------------------------------------------------------- */
#scroll-to-top-btn {
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
#scroll-to-top-btn:hover {
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 8px 24px rgba(167,139,250,.4) !important;
}

/* ----------------------------------------------------------
   18. RESPONSIVE — 320px (tiny phones)
   ---------------------------------------------------------- */
@media (max-width: 374px) {
  .avatar__container { padding: 1.5rem !important; }
  .achievements { flex-direction: column !important; gap: 1rem; }
  .achievements__item { width: 100% !important; }
  .tools-cards__item { flex: 0 0 calc(50% - 0.4rem) !important; }
  .headline__btnholder { flex-direction: column !important; gap: 0.8rem; }
  .content__block { padding: 0 1rem !important; }
}

/* ----------------------------------------------------------
   19. RESPONSIVE — 375px–575px (phones)
   ---------------------------------------------------------- */
@media (max-width: 575px) {
  /* Gallery images fill width */
  .gallery__image {
    max-width: 100% !important;
    height: 200px !important;
    border-radius: 8px !important;
  }
  .gallery__item { margin-bottom: 1rem; }

  /* Tools: 3 per row */
  .tools-cards { gap: 0.6rem; }
  .tools-cards__item { flex: 0 0 calc(33.33% - 0.5rem) !important; min-width: 0; }
  .tools-cards__icon { width: 32px !important; height: 32px !important; }

  /* Achievements: side by side */
  .achievements { flex-direction: row !important; flex-wrap: wrap; gap: 1rem; }
  .achievements__item { flex: 1 1 calc(50% - 0.5rem) !important; width: auto !important; }
  .achievements__card { padding: 1.8rem 1rem !important; border-radius: 1.5rem !important; }

  /* Resume lines */
  .resume-lines__date { font-size: 0.8rem !important; opacity: 0.75; }
  .resume-lines__item > div[class*="col-12"] { margin-bottom: 0.2rem; }

  /* Contact form */
  .form__item { padding: 0 !important; }

  /* Scroll to top — above mobile nav */
  #scroll-to-top-btn { bottom: 5.5rem !important; right: 1rem !important; }

  /* Socials cards: 2 per row */
  .socials-cards { gap: 0.8rem; }
  .socials-cards__item { flex: 0 0 calc(50% - 0.5rem) !important; }

  /* Contact lines stack */
  .contact-lines__data { margin-bottom: 1.2rem; }
}

/* ----------------------------------------------------------
   20. RESPONSIVE — 576px–767px (large phones / small tablet)
   ---------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .gallery__image { max-width: 100% !important; height: 230px !important; }
  .tools-cards__item { flex: 0 0 calc(25% - 0.5rem) !important; }
  .achievements__item { flex: 1 !important; }
  .achievements__card { padding: 2rem 1.5rem !important; }
  #scroll-to-top-btn { bottom: 5.5rem !important; }
}

/* ----------------------------------------------------------
   21. RESPONSIVE — 768px–991px (tablets)
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .gallery__image { max-width: 100% !important; height: 260px !important; }
  .tools-cards__item { flex: 0 0 calc(20% - 0.5rem) !important; }
  .achievements__item { flex: 1 !important; }
  #scroll-to-top-btn { bottom: 5.5rem !important; }

  /* Avatar top section — more breathing room */
  .avatar__container { padding: 2.5rem !important; }
}

/* ----------------------------------------------------------
   22. RESPONSIVE — 992px–1199px (small desktop / large tablet)
   ---------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .gallery__image { height: 280px !important; }
  .tools-cards__item { flex: 0 0 calc(20% - 0.5rem) !important; }
  #scroll-to-top-btn { bottom: 2rem !important; right: 2rem !important; }
}

/* ----------------------------------------------------------
   23. RESPONSIVE — 1200px–1399px (desktop)
   ---------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399px) {
  .gallery__image { height: 300px !important; }
}

/* ----------------------------------------------------------
   24. RESPONSIVE — 1400px–1599px (large desktop)
   ---------------------------------------------------------- */
@media (min-width: 1400px) and (max-width: 1599px) {
  .gallery__image { height: 340px !important; }
}

/* ----------------------------------------------------------
   25. RESPONSIVE — 1600px+ (XL / 4K)
   ---------------------------------------------------------- */
@media (min-width: 1600px) {
  .gallery__image { height: 400px !important; }
  .tools-cards__card { padding: 2.5rem !important; }
}

/* ----------------------------------------------------------
   26. MISC POLISH
   ---------------------------------------------------------- */

/* Prevent horizontal scroll on mobile */
body { overflow-x: hidden; }
.content__wrapper { overflow-x: hidden; }

/* Smooth image loading */
img { transition: opacity 0.3s ease; }

/* Form textarea min height responsive */
.form textarea {
  min-height: clamp(100px, 15vw, 180px) !important;
}

/* Logo image size responsive */
.logo__image img {
  width: clamp(32px, 5vw, 60px) !important;
  height: auto !important;
}

/* About description max width on very large screens */
@media (min-width: 1600px) {
  .about-descr__text { max-width: 700px; }
}


/* =============================================================
   NAV BAR ENHANCEMENTS
   • Colorful transparent gradient background
   • Centered on small/medium devices
   • All menu items visible at all screen sizes
   ============================================================= */

/* ----------------------------------------------------------
   NAV BACKGROUND — colorful + transparent + blur
   ---------------------------------------------------------- */

/* Mobile/tablet navbar (bottom pill — < 992px) */
@media (max-width: 991px) {
  .header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .menu__link {
    background: none !important;
  }
}

/* Desktop navbar (top bar — ≥ 992px)
   transparent background */
@media (min-width: 992px) {
  .header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  .menu__link {
    background: none !important;
  }
  /* Make nav items wrap rather than overflow */
  .header .menu__list {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .header .d-flex.justify-content-between {
    flex-wrap: nowrap;
    min-width: 0;
  }
  .header__navigation {
    min-width: 0;
    overflow: hidden;
  }
}

/* Scroll-aware: slightly more opaque after scrolling */
.header.scrolled {
  background: linear-gradient(
    135deg,
    rgba(170, 112, 224, 0.30) 0%,
    rgba(112, 89, 226, 0.26) 50%,
    rgba(228, 184, 191, 0.20) 100%
  ) !important;
  box-shadow:
    0 6px 36px rgba(112, 89, 226, 0.25),
    0 1px 0 rgba(255,255,255,0.10) inset !important;
}

/* ----------------------------------------------------------
   CENTER NAVBAR on small + medium devices (< 992px)
   The original uses left:50% + translateX(-50%) which centers
   the pill. We need to also center the menu LIST inside it.
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  /* Center the whole header pill horizontally */
  .header {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Center nav list + controls inside the pill */
  .header .d-flex.justify-content-between {
    justify-content: center !important;
    gap: 0.4rem;
    flex-wrap: nowrap;
    padding: 0 0.8rem;
  }

  /* Center the nav list itself */
  .header__navigation .menu__list {
    justify-content: center !important;
  }

  /* Controls flush right but still inside pill */
  .header__controls {
    margin-left: 0.6rem;
  }
}

/* ----------------------------------------------------------
   SHOW ALL MENU ITEMS at ALL screen sizes
   Original: icons only < 1200px, text only ≥ 1200px
   Fix: show BOTH icon + text always
   ---------------------------------------------------------- */

/* Always show the text caption */
.menu__caption {
  display: inline !important;
  font-size: clamp(0.9rem, 1.1vw, 1.6rem) !important;
  font-weight: 700;
}

/* Always show the icon */
.menu__link i {
  display: inline-flex !important;
  align-items: center;
  font-size: clamp(1rem, 1.3vw, 1.6rem) !important;
}

/* Stack icon above text on small screens */
@media (max-width: 575px) {
  .menu__link {
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    padding: 0.55rem 0.6rem !important;
    gap: 2px;
    border-radius: 1.2rem !important;
  }
  .menu__caption {
    font-size: 0.65rem !important;
    letter-spacing: 0.01em;
    line-height: 1;
  }
  .menu__link i {
    font-size: 1.1rem !important;
    line-height: 1;
  }
  /* Tighter gap between items */
  .menu__item { margin-right: 0 !important; }
  .menu__list { gap: 0.2rem !important; }
  /* Hide Let's Talk text, keep icon */
  .trigger__caption { display: none !important; }
  .header__trigger {
    width: 3.4rem !important;
    height: 3.4rem !important;
    padding: 0 !important;
  }
  .header__switcher {
    width: 3.4rem !important;
    height: 3.4rem !important;
  }
}

/* Medium phones / tablet: icon + text side by side */
@media (min-width: 576px) and (max-width: 991px) {
  .menu__link {
    flex-direction: row !important;
    width: auto !important;
    height: 4rem !important;
    padding: 0 1rem !important;
    gap: 0.5rem;
    border-radius: 1.8rem !important;
    align-items: center !important;
  }
  .menu__caption { font-size: 1rem !important; }
  .menu__link i   { font-size: 1.2rem !important; }
  .menu__item { margin-right: 0 !important; }
  .menu__list { gap: 0.3rem !important; }
}

/* Desktop (992px–1199px): icon + text side by side */
@media (min-width: 992px) and (max-width: 1199px) {
  .menu__link {
    width: auto !important;
    padding: 0 1.2rem !important;
    gap: 0.5rem;
    flex-direction: row !important;
    align-items: center !important;
  }
  .menu__caption { font-size: 1.1rem !important; }
  .menu__link i   { font-size: 1.3rem !important; }
}

/* Large desktop (≥ 1200px): keep existing text-only style but add icon back */
@media (min-width: 1200px) {
  .menu__link {
    flex-direction: row !important;
    gap: 0.6rem;
    align-items: center !important;
  }
  .menu__caption { font-size: clamp(1.2rem, 1.3vw, 1.8rem) !important; }
  .menu__link i   { font-size: clamp(1.2rem, 1.3vw, 1.6rem) !important; }
}



/* =============================================================
   RESPONSIVE FIX — All Devices (320px → 4K)
   Only layout/spacing fixes, no design changes
   ============================================================= */

/* ── Prevent horizontal overflow ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ── Content wrapper padding fix ── */
@media (max-width: 575px) {
  .content__block { padding: 0 1rem !important; }
  .content__block.grid-block { padding: 0 0.5rem !important; }
  .content { margin-left: 0 !important; padding-left: 0 !important; }
}

/* ── Avatar — mobile full width ── */
@media (max-width: 991px) {
  .avatar {
    width: calc(100% - 2rem) !important;
    margin: 0 auto !important;
    padding-bottom: 2rem !important;
    overflow: hidden !important;
  }
  .avatar__container {
    overflow: hidden !important;
    padding: 1.5rem !important;
  }
  /* Socials row — fit all icons without overflow */
  .socials-square {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
  }
  .socials-square__item {
    margin: 0 !important;
  }
  .socials-square__link {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
  }
  /* Avatar block spacing */
  .avatar__block {
    margin-top: 1rem !important;
  }
  .avatar__block:first-child {
    margin-top: 0 !important;
  }
  /* Download CV button full width */
  .avatar__block .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Header nav — small screens ── */
@media (max-width: 575px) {
  .header {
    bottom: 1rem !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 2rem) !important;
    max-width: 480px !important;
    padding: 0.5rem 0.6rem !important;
  }
  .menu__list { gap: 0 !important; justify-content: space-around !important; }
  .menu__link {
    flex-direction: column !important;
    padding: 0.5rem 0.5rem !important;
    gap: 2px !important;
    font-size: 0;
  }
  .menu__caption { font-size: 0.6rem !important; }
  .menu__link i { font-size: 1.1rem !important; }
  .header__controls { display: none !important; }
}

/* ── Tools cards — 3 per row on small ── */
@media (max-width: 575px) {
  .tools-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    justify-content: flex-start !important;
  }
  .tools-cards__item {
    flex: 0 0 calc(33.33% - 0.5rem) !important;
    max-width: calc(33.33% - 0.5rem) !important;
    min-width: 0 !important;
  }
  .tools-cards__card {
    padding: 0.8rem 0.4rem !important;
    border-radius: 1.2rem !important;
  }
  .tools-cards__icon { width: 32px !important; height: 32px !important; }
  .tools-cards__caption { font-size: 0.68rem !important; }
}

/* ── Achievements — 2 per row on small ── */
@media (max-width: 575px) {
  .achievements {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.8rem !important;
  }
  .achievements__item {
    flex: 1 1 calc(50% - 0.5rem) !important;
    width: auto !important;
  }
  .achievements__card { padding: 1.5rem 1rem !important; }
}

/* ── Resume lines — stack on mobile ── */
@media (max-width: 575px) {
  .resume-lines__item { padding: 0.8rem 0.5rem !important; }
  .resume-lines__date { margin-bottom: 0.3rem !important; }
}

/* ── Socials cards — 2 per row on small ── */
@media (max-width: 575px) {
  .socials-cards {
    gap: 0.8rem !important;
    justify-content: flex-start !important;
  }
  .socials-cards__item {
    flex: 0 0 calc(50% - 0.5rem) !important;
  }
}

/* ── Contact form full width on mobile ── */
@media (max-width: 575px) {
  .form__item { padding: 0 !important; margin-bottom: 0.6rem !important; }
  .contact-lines__data { margin-bottom: 1rem !important; }
}

/* ── Scroll to top — above bottom nav on mobile ── */
@media (max-width: 575px) {
  #scroll-to-top-btn {
    bottom: 5.5rem !important;
    right: 1rem !important;
  }
}

/* ── Section spacing on mobile ── */
@media (max-width: 575px) {
  .inner { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  h1, .headline__title { font-size: clamp(2rem, 8vw, 3.5rem) !important; }
  h2, .h2__title { font-size: clamp(1.6rem, 6vw, 2.5rem) !important; }
}

/* ── Tablet (576px–991px) ── */
@media (min-width: 576px) and (max-width: 991px) {
  .tools-cards__item { flex: 0 0 calc(25% - 0.5rem) !important; }
  .header {
    bottom: 1.2rem !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }
  #scroll-to-top-btn { bottom: 5.5rem !important; }
}

/* ── Large desktop (1400px+) ── */
@media (min-width: 1400px) {
  .tools-cards__card { padding: 2rem 1.2rem !important; }
  .achievements__card { padding: 3rem 2rem !important; }
}