body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

footer {
    background: var(--ink);
    color: rgba(255,255,255,0.85);
    padding: var(--sp-100) 0 var(--sp-25);
  }

.footer-bottom a:hover {
    color: rgba(255,255,255,0.9);
    border-bottom-color: rgba(255,255,255,0.6);
  }

@media (max-width: 860px) {
    /* Падинг над "За контакт" - намален наполовина на мобилни устройства. */
    footer { padding-top: 50px; }

    .about { grid-template-columns: 1fr; gap: var(--sp-50); }
    .about-text { padding-left: 0; }
    .about::before { display: none; }
    .projects-grid { grid-template-columns: 1fr; }

    /* Падингът ПОД бутона "Повече за мен" (100px собствен bottom padding +
       100px top padding на следващата секция "Избрани проекти" = 200px
       общо) трябва да съвпада с падинга НАД бутона (100px margin-top,
       чисто в рамките на секцията). Нулираме bottom padding-а на #about
       на мобилни, за да се изравни комбинираният отстъп на 100px. */
    #about { padding-bottom: 0; }
    .hero-row { grid-template-columns: 1fr; gap: var(--sp-50); }
    .hero-title-col, .hero-meta-col { padding: 0; text-align: left; }
    .hero-title { font-size: 30px; }
    .hero-gutter { display: none; }

    /* "Портфолио 2021-2026" (без "София, България" на мобилни) да седи
       ясно НАД точките на карусела, вместо да е плътно до тях. */
    .hero-meta-location { display: none; }
    .hero-content { padding-bottom: 110px; }
  }