/* ============================================================
   MyTrafficBuzz — Footer

   The site footer, its tools strip, and the floating WhatsApp
   action that sits above it.

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ---------- WhatsApp float ---------- */
.whatsapp-float{position:fixed;bottom:26px;right:26px;z-index:9999;width:56px;height:56px;background:#25D366;border-radius:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,211,102,.4);transition:var(--t)}
.whatsapp-float:hover{transform:scale(1.08) rotate(4deg)}

@keyframes wap{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- footer ---------- */
.site-footer{background:var(--bk);color:var(--wh);padding:64px 0 0;border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--acc),var(--gold),var(--iris)) 1;position:relative;overflow:hidden}
.site-footer::before{content:'';position:absolute;inset:0;background:radial-gradient(46% 40% at 88% 0%,rgba(123,91,245,.12),transparent 60%),radial-gradient(40% 34% at 6% 4%,rgba(62,99,221,.1),transparent 60%);pointer-events:none}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;margin-bottom:40px;position:relative}
.site-footer__column h4{margin-bottom:18px;position:relative;padding-bottom:10px;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.site-footer__column h4::after{content:'';position:absolute;bottom:0;left:0;width:26px;height:10px;background:var(--ticks);background-size:5px 40%,5px 70%,5px 100%;background-position:0 100%,8px 100%,16px 100%}
.site-footer__column a{display:block;color:rgba(255,255,255,.6);padding:5px 0;font-size:13.5px}
.site-footer__column a:hover{color:var(--gold);padding-left:5px}
.site-footer__column p{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.8}
.site-footer__logo{display:block;margin-bottom:16px}
.site-footer__logo img{height:52px;width:auto;max-width:230px;object-fit:contain}
.site-footer__social{display:flex;gap:9px;margin-top:16px}
.site-footer__social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:var(--t);padding:0}
.site-footer__social a:hover{background:var(--acc);transform:translateY(-3px);border-color:transparent}

.site-footer__tags-bar{background:rgba(255,255,255,.03);padding:26px 0;margin-top:36px;border-top:1px solid rgba(255,255,255,.06);position:relative}
.site-footer__tags-bar h4{color:var(--gold);font-size:13px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.site-footer__tags{display:flex;flex-wrap:wrap;gap:8px}
.site-footer__tags a{font-size:11.5px;color:rgba(255,255,255,.5);padding:4px 10px;border:1px solid rgba(255,255,255,.1);border-radius:7px}
.site-footer__tags a:hover{border-color:var(--gold);color:var(--gold)}
.site-footer__states{background:rgba(255,255,255,.02);padding:28px 0;border-top:1px solid rgba(255,255,255,.05);position:relative}
.site-footer__states h4{color:var(--gold);font-size:13px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}
/* The state list is a flex row rather than a run of inline-blocks. Both lay
   out identically - the gaps come from the margin on .site-footer__state, not
   from whitespace - but as flex items the browser ignores whitespace between
   them, so the 36 links can be written one per line instead of jammed onto a
   single 3,700-character line. The heading takes a full row of its own. */
.site-footer__states .container{display:flex;flex-wrap:wrap;align-content:flex-start;column-gap:8px;row-gap:10.5px}
.site-footer__states .container > h4{flex:0 0 100%;margin-bottom:7px}
.site-footer__state{margin:0}
.site-footer__state h5{font-size:12.5px;margin:0;font-weight:500}
.site-footer__state h5 a{color:rgba(255,255,255,.6);padding:5px 11px;border:1px solid rgba(255,255,255,.1);border-radius:9px;display:inline-block;transition:var(--t)}
.site-footer__state h5 a:hover{color:var(--gold);border-color:var(--gold)}
.ft-state-links{display:flex;flex-wrap:wrap;gap:6px}
.ft-state-links a{font-size:11px;color:rgba(255,255,255,.5);padding:3px 8px;border:1px solid rgba(255,255,255,.08);border-radius:6px}
.ft-state-links a:hover{border-color:var(--gold);color:var(--gold)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.45);position:relative}
.site-footer__bottom a{color:rgba(255,255,255,.6)}
.site-footer__bottom a:hover{color:var(--gold)}

/* ===== Footer "Tools We Work With" strip ===== */
.site-footer__tools{border-top:1px solid rgba(255,255,255,.07);padding:26px 0;position:relative;overflow:hidden}
.site-footer__tools p{color:var(--gold);font-size:12px;text-align:center;margin-bottom:16px;letter-spacing:.08em;text-transform:uppercase}
.site-footer__tools-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:30px}
.site-footer__tools-row img{height:24px;width:auto;opacity:.5;filter:brightness(0) invert(1);transition:var(--t)}
.site-footer__tools-row img:hover{opacity:1}
.site-footer__tools .container{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
@media(max-width:600px){.site-footer__tools-row{gap:20px}.site-footer__tools-row img{height:20px}}

/* Fix: article CTA text must be white on dark background */
.contact__body .cta-section h2{color:#fff}
.contact__body .cta-section p{color:rgba(255,255,255,.9);opacity:1}
.contact__body .cta-section{padding:48px 28px;border-radius:var(--r)}