/* ============================================================
   Hocus Focus — clean footer (2026 redesign)
   Scoped under .hf-footer so it never collides with Webflow CSS.
   Inherits the site's Rubik font and black/orange brand.
   ============================================================ */
.hf-footer{
  --hf-ground:#000;
  --hf-panel:#0c0c0e;
  --hf-line:rgba(255,255,255,.09);
  --hf-line-strong:rgba(255,255,255,.16);
  --hf-white:#fff;
  --hf-muted:#8c8c93;
  --hf-muted-2:#5f5f66;
  --hf-accent:#ff9d1c;
  --hf-accent-deep:#ff7a00;
  --hf-radius:14px;

  direction:rtl;
  background:var(--hf-ground);
  color:var(--hf-white);
  font-family:'Rubik','Segoe UI','Heebo',Arial,sans-serif;
  line-height:1.6;
  padding:0 clamp(20px,5vw,56px);
  border-top:1px solid var(--hf-line);
}
.hf-footer *{box-sizing:border-box}
.hf-footer a{text-decoration:none}

.hf-top{
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,56px);
  padding:clamp(40px,5vw,60px) 0 clamp(34px,4vw,48px);
}

/* brand */
.hf-brand .hf-logo{display:flex;flex-direction:column;line-height:1}
.hf-brand .hf-logo b{font-size:26px;font-weight:800;letter-spacing:.01em;color:#fff}
.hf-brand .hf-logo span{
  font-size:12px;letter-spacing:.42em;color:var(--hf-accent);
  font-weight:600;margin-top:7px;direction:ltr;text-align:right;
}
.hf-brand .hf-tagline{color:var(--hf-muted);font-size:14px;margin-top:18px;max-width:34ch}
.hf-socials{display:flex;gap:10px;margin-top:22px}
.hf-socials a{
  width:40px;height:40px;border-radius:11px;
  border:1px solid var(--hf-line-strong);
  display:grid;place-items:center;color:var(--hf-white);
  transition:all .18s ease;background:rgba(255,255,255,.02);
}
.hf-socials a:hover{border-color:var(--hf-accent);color:var(--hf-accent);transform:translateY(-2px)}
.hf-socials a:focus-visible{outline:2px solid var(--hf-accent);outline-offset:3px}
.hf-socials svg{width:18px;height:18px;fill:currentColor}

/* link columns */
.hf-col h4{
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--hf-white);
  margin:0 0 18px;display:flex;align-items:center;gap:9px;
}
.hf-col h4::before{content:"";width:16px;height:2px;background:var(--hf-accent);border-radius:2px}
.hf-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hf-col a{color:var(--hf-muted);font-size:14.5px;transition:color .16s ease;width:fit-content;position:relative}
.hf-col a::after{
  content:"";position:absolute;inset-inline-end:0;bottom:-3px;height:1px;width:0;
  background:var(--hf-accent);transition:width .22s ease;
}
.hf-col a:hover{color:var(--hf-white)}
.hf-col a:hover::after{width:100%}
.hf-col a:focus-visible{outline:2px solid var(--hf-accent);outline-offset:3px;border-radius:3px}

/* CTA + newsletter */
.hf-cta{
  border:1px solid var(--hf-line-strong);border-radius:var(--hf-radius);
  padding:26px 24px;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(255,157,28,.14), transparent 60%),
    var(--hf-panel);
}
.hf-cta h4{font-size:17px;font-weight:700;margin:0 0 6px;color:#fff}
.hf-cta .hf-cta-sub{color:var(--hf-muted);font-size:13.5px;margin:0 0 18px}
.hf-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--hf-accent);color:#1a1200;font-weight:700;font-size:14.5px;
  padding:12px 22px;border-radius:999px;transition:all .2s ease;
}
.hf-btn:hover{background:var(--hf-accent-deep);box-shadow:0 8px 26px -8px rgba(255,122,0,.75);transform:translateY(-1px)}
.hf-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hf-btn svg{width:16px;height:16px;fill:currentColor}

.hf-news{margin-top:22px}
.hf-news label{display:block;font-size:12px;color:var(--hf-muted-2);margin-bottom:9px}
.hf-news .hf-field{display:flex;border:1px solid var(--hf-line-strong);border-radius:10px;overflow:hidden;background:#000}
.hf-news input{
  flex:1;background:transparent;border:0;color:var(--hf-white);
  padding:11px 14px;font-size:14px;font-family:inherit;outline:none;min-width:0;
}
.hf-news input::placeholder{color:var(--hf-muted-2)}
.hf-news button{
  background:transparent;border:0;border-inline-start:1px solid var(--hf-line-strong);
  color:var(--hf-accent);font-weight:700;font-size:13.5px;padding:0 16px;cursor:pointer;
  font-family:inherit;transition:background .16s ease;white-space:nowrap;
}
.hf-news button:hover{background:rgba(255,157,28,.1)}
.hf-news button:disabled{opacity:.5;cursor:default}
.hf-news .hf-msg{margin-top:10px;font-size:13px;min-height:1px}
.hf-news .hf-msg.ok{color:#86e0a0}
.hf-news .hf-msg.err{color:#ff8a8a}

/* bottom bar */
.hf-bottom{
  max-width:1180px;margin:0 auto;
  border-top:1px solid var(--hf-line);
  padding:22px 0 clamp(36px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.hf-bottom .hf-legal{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hf-bottom .hf-legal a{color:var(--hf-muted);font-size:13.5px;transition:color .16s}
.hf-bottom .hf-legal a:hover{color:var(--hf-white)}
.hf-bottom .hf-legal a:focus-visible{outline:2px solid var(--hf-accent);outline-offset:3px;border-radius:3px}
.hf-bottom .hf-copy{color:var(--hf-muted-2);font-size:13px}
.hf-bottom .hf-copy b{color:var(--hf-muted);font-weight:600}

@media(max-width:860px){
  .hf-top{grid-template-columns:1fr 1fr;gap:34px 28px}
  .hf-brand{grid-column:1 / -1}
  .hf-cta{grid-column:1 / -1}
}
@media(max-width:520px){
  .hf-top{grid-template-columns:1fr}
  .hf-bottom{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.hf-footer *{transition:none!important}}