/* =====================================================================
   Socivio — site footer
   ===================================================================== */
.site-footer { position: relative; overflow: hidden; isolation: isolate; color: #aab4de; padding: 84px 0 26px;
    background: radial-gradient(700px 320px at 100% 0%, rgba(168, 85, 247, .26), transparent 62%), radial-gradient(600px 300px at 0% 100%, rgba(34, 211, 238, .12), transparent 62%), linear-gradient(180deg, #0b1226 0%, #0e1030 100%); }
.site-footer::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #22d3ee, #6366f1, #d946ef, #f59e0b); }
.site-footer::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px); background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%); mask-image: linear-gradient(180deg, #000, transparent 65%); }
.sf-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.sf-o1 { width: 340px; height: 340px; left: -120px; top: 20%; background: rgba(99, 102, 241, .22); animation: drift 18s ease-in-out infinite; }
.sf-o2 { width: 300px; height: 300px; right: 10%; bottom: -140px; background: rgba(217, 70, 239, .16); animation: drift 22s ease-in-out infinite reverse; }

/* brand column */
.sf-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 1.5rem; }
.sf-about { margin: 16px 0 22px; max-width: 360px; line-height: 1.75; font-size: .94rem; color: #aab4de; }
.sf-contact { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.sf-contact li { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.sf-contact i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: .95rem; color: #c4b5fd; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .09); transition: all .25s; }
.sf-contact li:hover i { color: #fff; background: linear-gradient(135deg, #6366f1, #d946ef); border-color: transparent; transform: translateY(-2px); }
.sf-contact a, .sf-contact span { color: #d6dcf5; }
.sf-contact a:hover { color: #fff; }

/* android card */
.sf-app { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 20px; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); transition: all .3s; }
.sf-app-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 1.6rem; background: linear-gradient(135deg, #22d3ee, #6366f1 55%, #d946ef); box-shadow: 0 10px 22px rgba(99, 102, 241, .45); }
.sf-app small { display: block; font-size: .7rem; letter-spacing: .6px; text-transform: uppercase; color: #aab4de; line-height: 1.1; }
.sf-app b { display: block; font-size: 1.05rem; line-height: 1.25; }
.sf-app-go { margin-left: 8px; opacity: .6; transition: transform .25s, opacity .25s; }
.sf-app:hover { color: #fff; transform: translateY(-4px); border-color: rgba(167, 139, 250, .6); background: rgba(255, 255, 255, .11); box-shadow: 0 18px 36px rgba(0, 0, 0, .35); }
.sf-app:hover .sf-app-go { opacity: 1; transform: translateX(4px); }

/* link columns */
.site-footer h6 { position: relative; display: inline-block; margin: 6px 0 18px; padding-bottom: 10px; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.site-footer h6::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #22d3ee, #d946ef); }
.site-footer .col-md-3 > a { position: relative; display: block; width: fit-content; max-width: 100%; padding: 5px 0; font-size: .92rem; color: #aab4de; transition: color .2s, transform .2s; }
.site-footer .col-md-3 > a::before { content: ''; position: absolute; left: -16px; top: 50%; width: 8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22d3ee, #d946ef); opacity: 0; transform: translateY(-50%) scaleX(.3); transform-origin: left; transition: all .2s; }
.site-footer .col-md-3 > a:hover { color: #fff; transform: translateX(8px); } .site-footer .col-md-3 > a:hover::before { opacity: 1; transform: translateY(-50%) scaleX(1); }
.site-footer .sf-more { margin-top: 6px; color: #c4b5fd; font-weight: 700; } .site-footer .sf-more i { font-size: .8rem; transition: transform .2s; } .site-footer .sf-more:hover i { transform: translateX(3px); }

/* bottom bar */
.sf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; }
.sf-legal { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; } .sf-legal a { color: #aab4de; } .sf-legal a:hover { color: #fff; }
.sf-made { color: #8d99c6; } .sf-made i { color: #f43f5e; margin: 0 2px; animation: heartbeat 1.8s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } }
.sf-top { width: 44px; height: 44px; border: 0; border-radius: 14px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #6366f1, #d946ef); box-shadow: 0 12px 24px rgba(99, 102, 241, .4); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.sf-top:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(99, 102, 241, .55); }

@media (max-width: 991px) { .site-footer { padding-top: 64px; } .sf-bottom { margin-top: 40px; } }
@media (max-width: 767px) {
    .sf-bottom { flex-direction: column; align-items: flex-start; position: relative; padding-right: 60px; } .sf-top { position: absolute; right: 0; top: 18px; }
    .site-footer .col-md-3 > a:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sf-orb, .sf-made i { animation: none; } }

/* floating WhatsApp enquiry button (bottom-left; the back-to-top button owns bottom-right) */
.wa-float { position: fixed; z-index: 1140; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 0; height: 56px; min-width: 56px; padding: 0 16px; border-radius: 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 10px 26px rgba(18, 140, 126, .42); transition: transform .25s, box-shadow .25s, gap .25s; }
.wa-float i { font-size: 1.7rem; line-height: 1; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s; }
.wa-float:hover, .wa-float:focus-visible { color: #fff; gap: 10px; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(18, 140, 126, .55); }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 140px; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25d366; animation: waPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
@media (max-width: 575.98px) { .wa-float { left: 14px; bottom: 14px; height: 52px; min-width: 52px; } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }