/* ============================================================
   Preserved footer (the "cool" one) — self-contained
   bubbles blob + social buttons + underline links
   ============================================================ */

/* primeicons subset used by the footer */
@font-face {
  font-family: "primeicons";
  font-display: block;
  src: url("/css/fonts/primeicons.woff2") format("woff2"),
       url("/css/fonts/primeicons.woff") format("woff"),
       url("/css/fonts/primeicons.ttf") format("truetype");
  font-weight: normal; font-style: normal;
}
.pi {
  font-family: "primeicons"; speak: none; font-style: normal; font-weight: normal;
  font-variant: normal; text-transform: none; line-height: 1; display: inline-block;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.pi-instagram:before { content: "\e9cc"; }
.pi-linkedin:before  { content: "\e9cb"; }
.pi-discord:before   { content: "\e9c0"; }
.pi-telegram:before  { content: "\e9d3"; }

/* ---- footer shell ---- */
.footer {
  z-index: 1;
  --footer-background: #0d0c12;
  display: grid;
  position: relative;
  grid-area: footer;
  min-height: 12rem;
  margin-top: 0;
}
.footer .bubbles {
  position: absolute; top: 0; left: 0; right: 0; height: 1rem;
  background: var(--footer-background);
  filter: url("#blob");
}
.footer .bubbles .bubble {
  position: absolute; left: var(--position, 50%);
  background: var(--footer-background); border-radius: 100%;
  animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
             bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}
@keyframes bubble-size {
  0%, 75% { width: var(--size, 4rem); height: var(--size, 4rem); }
  100%    { width: 0rem; height: 0rem; }
}
@keyframes bubble-move {
  0%   { bottom: -4rem; }
  100% { bottom: var(--distance, 10rem); }
}

/* ---- footer content ---- */
.footer .content {
  z-index: 2; position: relative;
  background: var(--footer-background);
  padding: clamp(40px, 6vw, 68px) var(--pad, 40px) 40px;
  display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center;
}
.footer .content a, .footer .content p { color: #F5F7FA; text-decoration: none; }
.footer .t-container { width: 100%; max-width: 1100px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.footer .t457__ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 30px;
}
.footer .t457__li a { font-weight: 500; color: #F5F7FA; }
.footer .t457__copyright { color: #fff; font-size: .9rem; line-height: 1.7; opacity: .85; }
.footer .t457__copyright a { color: var(--violet-400, #A79EFF); }

/* ---- footer columns (products / bots / company / legal) ---- */
.footer .footer-cols {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px 28px;
  text-align: left;
  padding-bottom: 8px;
}
.footer .footer-col__title {
  margin: 0 0 14px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-400, #A79EFF);
  font-weight: 600;
}
.footer .footer-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer .footer-col__list li { display: flex; align-items: baseline; gap: 8px; }
.footer .footer-col__list a { color: #F5F7FA; font-size: .93rem; opacity: .9; }
.footer .footer-col__list a:hover { opacity: 1; }
.footer .footer-col__ext { font-size: .78rem; opacity: .45 !important; text-decoration: none; }
.footer .footer-col__ext:hover { opacity: .9 !important; color: var(--violet-400, #A79EFF); }

@media (max-width: 640px) {
  .footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
}

.footer .hover-underline-animation { position: relative; display: inline-block; }
.footer .hover-underline-animation::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px;
  background: var(--violet, #8B80F8); transform: scaleX(0); transform-origin: right; transition: transform .28s ease;
}
.footer .hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- social buttons (media-effect / aeneas) ---- */
.footer .t-sociallinks { display: flex; justify-content: center; }
.media-effect .buttons { display: flex; align-items: center; justify-content: center; gap: 0; }
.media-effect a {
  text-decoration: none !important; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; margin-right: 20px; overflow: hidden; position: relative; color: #fff;
}
.media-effect a:last-child { margin-right: 0; }
.media-effect a i { display: flex; position: relative; z-index: 3; font-size: 40px; }
.media-effect img { width: 40px; height: 40px; }
.media-effect a.insta   { background-color: #bc2a8d; }
.media-effect a.in      { background-color: #007bb6; }
.media-effect a.x       { background-color: #000; }
.media-effect a.threads { background-color: #000; }
.media-effect a.discord { background-color: #7289da; }
.media-effect a.tg      { background-color: #2AABEE; }
.media-effect.small a { filter: grayscale(1); width: 44px !important; height: 44px !important; }
.media-effect.small i { font-size: 22px !important; }
.media-effect.small img { width: 20px !important; height: 20px !important; }
.media-effect.small .buttons { display: flex; justify-content: center; align-items: center; gap: 12px; }
.media-effect.aeneas a { transition: .3s; }
.media-effect.aeneas a:hover {
  border-radius: 50%; filter: grayscale(0);
  box-shadow: -2px 15px 28px 0 rgba(0,0,0,.3);
}