/* =========================================================
   FOOTER.CSS — Stili condivisi per il footer-section
   Iniettato via data-include="footer" dal partial partials/footer.html
   Caricato su tutte le pagine eccetto index.html (che ha gli stili inline)
   ========================================================= */

/* Container principale */
.footer-section{position:relative;padding:60px 24px 60px;z-index:2;color:var(--body-d);background:transparent;overflow:visible;isolation:isolate}
.footer-bg{display:none}

/* Sfumatura verde sotto il footer (uguale alla home .cta-footer-wrap::before).
   Disabilitata quando il footer-section è già dentro .cta-footer-wrap
   (home page) per evitare doppia sovrapposizione del gradient. */
.footer-section::before{
  content:"";
  position:absolute;
  top:-320px;
  left:0;
  right:0;
  height:calc(100% + 320px);
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(70% 35% at 8% 72%,rgba(45,214,117,.55) 0%,transparent 60%),
    radial-gradient(70% 35% at 92% 68%,rgba(96,214,251,.40) 0%,transparent 60%),
    linear-gradient(to bottom,
      rgba(14,9,24,0) 0%,
      rgba(14,9,24,0) 38%,
      rgba(45,214,117,.18) 48%,
      rgba(28,175,87,.48) 62%,
      rgba(28,175,87,.55) 75%,
      rgba(28,175,87,.28) 88%,
      rgba(14,9,24,0) 96%);
  -webkit-mask:linear-gradient(to bottom,transparent 0%,#fff 30%,#fff 88%,transparent 96%);
  mask:linear-gradient(to bottom,transparent 0%,#fff 30%,#fff 88%,transparent 96%);
}
.cta-footer-wrap .footer-section::before{display:none}

/* Sparkles — sbrilluccicio across the wrap */
.footer-sparkles{position:absolute;top:5%;left:0;right:0;height:75%;pointer-events:none;z-index:1}
.footer-sparkles .sparkle{position:absolute;top:var(--y);left:var(--x);width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7),0 0 14px rgba(255,255,255,.35);opacity:0;animation:sparkle-pulse 4s ease-in-out infinite;animation-delay:var(--delay,0s)}
.footer-sparkles .sparkle.green{background:var(--green-glow,#2DD675);box-shadow:0 0 10px var(--green-glow,#2DD675),0 0 20px rgba(45,214,117,.5)}
.footer-sparkles .sparkle.azure{background:#60D6FB;box-shadow:0 0 10px #60D6FB,0 0 20px rgba(96,214,251,.5)}
.footer-sparkles .sparkle.gold{background:#FBBF24;box-shadow:0 0 10px #FBBF24,0 0 18px rgba(251,191,36,.4)}
.footer-sparkles .sparkle.lg{width:4px;height:4px}
@keyframes sparkle-pulse{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.footer-sparkles .sparkle{animation:none;opacity:.6}}

/* Footer shell glass */
.footer-shell{max-width:1280px;margin:0 auto;background:rgba(14,9,24,.55);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:24px 24px 0 0;padding:48px 40px 40px;position:relative;z-index:2;border:1px solid var(--w-10,rgba(255,255,255,.10));border-bottom:none}
.footer-section .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media (max-width:1100px){.footer-section .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}.footer-section .footer-grid .footer-brand-col{grid-column:1/-1}}
@media (max-width:700px){.footer-section .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-section .footer-grid{grid-template-columns:1fr}}

/* Brand column */
.footer-brand-col{display:flex;flex-direction:column;gap:16px}
.footer-section .footer-brand{display:flex;align-items:center;gap:12px;font-family:'Anton',Impact,sans-serif;font-size:26px;color:#fff;letter-spacing:.04em}
.footer-section .footer-brand svg{filter:drop-shadow(0 0 12px rgba(45,214,117,.45))}
.footer-section .footer-tag{font-size:14px;line-height:1.65;color:var(--body-d,rgba(255,255,255,.78));max-width:380px;margin:0}
.footer-section .footer-tag-mono{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--body-d-3,rgba(255,255,255,.45));letter-spacing:.08em;text-transform:uppercase;margin-top:4px}

/* Socials */
.footer-section .socials,.footer-section .footer-social{display:flex;gap:10px;margin-top:8px}
.footer-section .socials a,.footer-section .footer-social a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--w-05,rgba(255,255,255,.05));border:1px solid var(--w-10,rgba(255,255,255,.10));color:#fff;opacity:.8;transition:all .3s cubic-bezier(.22,.61,.36,1)}
.footer-section .socials a:hover,.footer-section .footer-social a:hover{opacity:1;background:var(--w-10,rgba(255,255,255,.10));border-color:var(--green-glow,#2DD675);transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(45,214,117,.5)}

/* Columns */
.footer-section .footer-col h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--body-d-2,rgba(255,255,255,.65));margin-bottom:18px;font-weight:600}
.footer-section .footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-section .footer-col li{font-size:14px;margin:0}
.footer-section .footer-col a{color:var(--body-d-2,rgba(255,255,255,.65));text-decoration:none;transition:color .25s cubic-bezier(.22,.61,.36,1)}

/* Per-column hover colors */
.footer-col[data-tone="green"] a:hover{color:var(--green-glow,#2DD675);text-shadow:0 0 12px rgba(45,214,117,.4)}
.footer-col[data-tone="azure"] a:hover{color:#60D6FB;text-shadow:0 0 12px rgba(96,214,251,.4)}
.footer-col[data-tone="orange"] a:hover{color:#FF8A4D;text-shadow:0 0 12px rgba(255,138,77,.4)}
.footer-col[data-tone="yellow"] a:hover{color:#FBBF24;text-shadow:0 0 12px rgba(251,191,36,.4)}

/* Footer bottom */
.footer-section .footer-bottom{border-top:1px solid var(--w-10,rgba(255,255,255,.10));padding-top:24px;margin:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--body-d-3,rgba(255,255,255,.45));font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.footer-section .footer-bottom .legal-links{display:flex;gap:18px}
.footer-section .footer-bottom a{color:var(--body-d-2,rgba(255,255,255,.65));text-decoration:none;transition:color .25s}
.footer-section .footer-bottom a:hover{color:#fff}