:root {
  /* ========================================
     BRAND COLORS: BLACK + SILVER + RED
  ======================================== */

  /* Backgrounds */
  --bg: #050505;                 /* Main page background */
  --bg-soft: #0d0d0d;            /* Secondary background */
  --panel: #141414;              /* Cards and panels */
  --panel-2: #1c1c1c;            /* Hover states */

  /* Borders */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text: #f3f4f6;               /* Main text */
  --muted: #9ca3af;              /* Secondary text */
  --white: #ffffff;

  /* Accent Colors (Silver / Metallic) */
--accent: #d1d5db;        /* Main silver */
--accent-dark: #9ca3af;   /* Darker silver */
--accent-light: #f3f4f6;  /* Lighter silver */

  /* Silver / Metallic */
  --silver: #d1d5db;
  --silver-dark: #9ca3af;
  --silver-light: #f9fafb;

  /* Effects */
  --shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  --radius: 20px;

  /* Font weights */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
}

.site-footer {
  margin-top: 100px;
  padding: 70px 0 30px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at top center, rgba(186, 186, 186, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 40px;
}

/* Brand */

.footer-brand {
  display: flex;
  align-items: flex-start;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo-img {
  height: 52px;
  width: auto;
}

/* Columns */

.footer-column {
  text-align: left;
}

.footer-column h4 {
  font-size: 16px;
  font-weight: var(--fw-medium);
  margin: 0 0 18px;
  color: var(--white);
  text-align: left;
  letter-spacing: 0.4px;
}

/* Navigation */

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  align-items: start;
  gap: 12px 100px;
}

.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--fw-regular);
  transition: 0.2s ease;
}

.footer-nav a:hover {
  color: var(--white);
  transform: translateX(3px);
}

/* Social */

.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-link {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--white);

  transition: 0.22s ease;
}

.footer-social-link svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  fill: currentColor;
}

/* Optional visual adjustments for specific icons */
.footer-social-link .youtube-icon {
  transform: translateX(1px);
}

.footer-social-link .telegram-icon {
  transform: translate(-1px, -1px);
}

.footer-social-link:hover {
  transform: translateY(-2px);
    --muted: #9ca3af; 
    --muted: #9ca3af; 
  color: var(--accent);

}

/* Bottom */

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  color: #545860;
  font-size: 14px;
  font-weight: var(--fw-regular);
}

/* Responsive */

@media (max-width: 900px) {
  .site-footer {
    margin-top: 70px;
    padding: 56px 0 24px;
  }

  .site-footer .container {
    width: calc(100% - 36px);
    max-width: 520px;
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-brand,
  .footer-column {
    text-align: center;
    justify-content: center;
  }

  .footer-column h4 {
    text-align: center;
  }

  .footer-logo {
    margin: 0 auto;
  }

  .footer-logo-img {
    height: 46px;
  }

  .footer-nav {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 14px 18px;
    width: 100%;
  }

  .footer-nav a {
    text-align: center;
    font-size: 14px;
  }

  .footer-social {
    justify-content: center;
  }
}

@media (max-width: 500px) {
  .site-footer .container {
    width: calc(100% - 32px);
    max-width: 420px;
  }

.footer-nav {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
}

.footer-nav a {
  text-align: center;
}

.footer-nav a:nth-child(7) {
  grid-column: 2;
}
}