/* ══════════════════════════════════════════════════════════════
   PI2AI shared footer — canonical styling, resolved from index.html's
   cascade (which had two overlapping footer <style> blocks plus dead
   CSS from an earlier redesign). Every page links this file, placed
   after any of that page's own inline styles, so it wins the cascade
   without needing to hunt down and delete every old per-page footer
   rule. Markup contract (must match on every page):

   <footer class="sf-wrap">
     <div class="sf-main">
       <div class="sf-brand">
         <span class="sf-brand-logo">PI<span class="sf-brand-2">2</span>AI</span>
         <p class="sf-desc">...</p>
         <p class="sf-talk">Talk to us: <a class="sf-talk-email">...</a></p>
       </div>
       <div class="sf-col">...</div>  (x3)
     </div>
     <div class="sf-bottom">
       <div class="sf-bottom-left"><span class="sf-copy">...</span></div>
       <div class="sf-socials"><a class="sf-social-btn">...</a></div>
     </div>
   </footer>
   ══════════════════════════════════════════════════════════════ */

.sf-wrap {
  background: #20263d;
  padding: 48px 48px 0;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sf-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 900px) {
  .sf-main {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .sf-main {
    grid-template-columns: 1fr;
  }
}
.sf-brand-logo {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: #f5f3ff;
  margin-bottom: 14px;
}
.sf-brand-logo .sf-brand-2 {
  color: #9368b7;
}
.sf-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 280px;
}
.sf-talk {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 18px;
}
.sf-talk-email {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
}
.sf-col-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}
.sf-col a {
  display: block;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 9px;
  transition: color 0.15s;
}
.sf-col a:hover {
  color: #ffffff;
}
.sf-col .sf-cta-link,
.sf-col .sf-cta-link:hover {
  color: #ffffff;
}
.sf-bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0;
  gap: 12px;
  flex-wrap: wrap;
}
.sf-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.sf-legal-extra {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.sf-socials {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sf-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.sf-social-btn:hover {
  background: linear-gradient(135deg, #9368b7, #3d3fbf);
  border-color: transparent;
  color: #fff;
}
@media (max-width: 768px) {
  .sf-wrap {
    padding: 36px 20px 0;
  }
  .sf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}