footer { 
    background: linear-gradient(to top, var(--bg-darker), var(--bg-dark)); 
    color: var(--text); 
    font-size: 0.9rem; 
    position: relative; 
    padding-top: 1.5rem; /* top/right/bottom/left padding */ 
    border-top: 1px solid var(--bg-light); 
    z-index: 10; 
    } 
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;

  /* ✅ Center sections, but not text */
  justify-items: center;
}

.footer-brand,
.footer-links {
  width: 100%;
  max-width: 280px; /* keeps columns from being too wide */
  text-align: left;
}
.footer-title { 
    font-size: 1.5rem; 
    font-weight: 700; 
    color: var(--highlight); 
    margin-bottom: 1rem; 
    } 
.footer-text { 
    color: var(--muted); 
    margin-bottom: 1.5rem; 
    line-height: 1.6; 
    }   
.footer-social { 
    display: flex; 
    gap: 1rem; 
    margin-top: 1rem; 
    } 
.footer-social .social-link { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--accent); 
    background: var(--bg-light); 
    border-radius: 50%; 
    width: 44px; 
    height: 44px; 
    transition: background 0.3s, color 0.3s; 
    font-size: 1.2rem; 
    } 
.footer-social .social-link:hover { 
    background: var(--accent-hover); 
    color: #fff; 
    } 
.footer-social svg { 
    width: 22px; 
    height: 22px; 
    } 
.footer-social .reddit svg, .footer-social .tiktok svg { 
    width: 32px; 
    height: 32px; 
    } 
.footer-links h3 { 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    color: var(--highlight); 
    } 
.footer-links ul li { 
    margin-bottom: 0.6rem; 
    } 
.footer-links ul li a { 
    color: var(--muted); 
    text-decoration: none; 
    transition: color 0.3s; 
    } 
.footer-links ul li a:hover { 
    color: var(--accent-hover); 
    } 
.footer-bottom { 
    border-top: 1px solid var(--bg-light); 
    margin-top: 3rem; 
    padding: 1.5rem 0; 
    text-align: center; 
    font-size: 0.9rem; 
    color: var(--muted); 
    } /* Optional: add a subtle top shadow to visually separate footer */ 
.footer::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 1px; 
    background: rgba(255, 255, 255, 0.05); 
    } /* Mobile first: stack sections vertically */ 
@media screen and (max-width: 640px) { 
    .footer-inner { 
        grid-template-columns: 1fr; /* single column for small screens */ 
        gap: 1.5rem; 
        padding: 0 1rem; 
        } 
    .footer-brand { 
        text-align: center; 
        } .footer-text { 
            margin-bottom: 1rem; 
            line-height: 1.5; 
            } 
    .footer-social { 
        justify-content: center; 
        flex-wrap: wrap; 
        gap: 0.75rem; 
        margin-top: 0.75rem; 
        } 
    .footer-social .social-link { 
        width: 36px; 
        height: 36px; 
        } 
    .footer-social .reddit svg, .footer-social .tiktok svg { 
        width: 28px; 
        height: 28px; 
        } 
    .footer-links { text-align: center; } .footer-links ul { margin: 0 auto; } .footer-bottom { font-size: 0.85rem; padding: 1rem 0; } } /* Medium screens (tablet) */ @media screen and (min-width: 641px) and (max-width: 1024px) { .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 0 1.5rem; /* <-- add horizontal padding */ } .footer-brand { text-align: left; } .footer-links { text-align: left; } .footer-social { justify-content: flex-start; } } @media screen and (max-width: 1024px) { footer { padding-left: 1.5rem; padding-right: 1.5rem; } }
    /* Mobile fix: keep bullets aligned with text */
@media screen and (max-width: 640px) {
  .footer-links ul {
    list-style-position: inside; /* bullets next to text */
    padding-left: 1rem;          /* standard padding from container edge */
    margin: 0;                   /* remove auto centering */
    display: block;              /* full width */
    width: 100%;                 /* ensure it fills the container */
    text-align: left;            /* bullets aligned with text */
  }

  .footer-links li {
    text-align: left;
  }
}