/* ============================================================
   Liquid Glass Footer, static port of the Framer "Liquid Glass
   Footer" component (brand column · link columns · glass CTA ·
   divider · bottom row), restyled for FlowBack AI.
   ============================================================ */

footer.glass-footer{
  position:relative;overflow:clip;
  background:#FFFFFF !important;
  border-top:none !important;
  padding:96px 20px 40px !important;
  z-index:2;
}
/* soft colour behind the glass so the blur has something to bend */
footer.glass-footer::before{
  content:'';position:absolute;inset:auto -10% -30% -10%;height:90%;
  z-index:0;pointer-events:none;filter:blur(40px);
  background:
    radial-gradient(40% 50% at 30% 100%, rgba(11,93,59,.30), transparent 65%),
    radial-gradient(34% 44% at 78% 90%, rgba(126,190,158,.28), transparent 62%),
    radial-gradient(30% 30% at 55% 60%, rgba(255,255,255,.9), transparent 70%);
  animation:gfGlow 18s ease-in-out infinite alternate;
}
@keyframes gfGlow{
  from{transform:translateX(-3%) scale(1)}
  to{transform:translateX(3%) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){footer.glass-footer::before{animation:none}}

/* ---- the glass slab ---- */
.gf-shell{
  position:relative;z-index:1;
  max-width:1140px;margin:0 auto;
  padding:3px;border-radius:30px;
  background:linear-gradient(150deg,#d0d0d0 0%,#ececec 50%,#c8c8c8 100%);
  box-shadow:
    0.29px 4.36px 2.18px rgba(0,0,0,.01),
    0.48px 7.24px 3.63px rgba(0,0,0,.01),
    0.78px 11.7px 5.86px rgba(0,0,0,.02),
    1.28px 19.15px 9.6px rgba(0,0,0,.03),
    2.2px 32.97px 16.52px rgba(0,0,0,.03),
    4px 60px 30.07px rgba(0,0,0,.06);
}
.gf-panel{
  border-radius:27px;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 1.5px rgba(0,0,0,.06);
  padding:40px 44px 30px;
  display:flex;flex-direction:column;gap:28px;
  color:#111116;
}

/* ---- top row: brand + link columns ---- */
.gf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.gf-brand{display:flex;flex-direction:column;gap:14px;flex:0 0 250px;max-width:250px}
.gf-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.gf-logo img{height:30px;width:auto;display:block}
.gf-logo span{font-size:17px;font-weight:500;letter-spacing:-.02em}
.gf-tag{font-size:14px;line-height:1.55;color:rgba(17,17,22,.66);margin:0}
.gf-social{display:flex;gap:8px;margin-top:4px}
.gf-social a{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  color:#111116;text-decoration:none;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1.5px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  transition:transform .2s,background .2s;
}
.gf-social a:hover{transform:translateY(-2px);background:rgba(255,255,255,.85)}
.gf-social svg{width:16px;height:16px;display:block}

.gf-cols{display:flex;gap:32px;flex:1 1 auto;flex-wrap:nowrap;justify-content:space-between}
.gf-col{display:flex;flex-direction:column;gap:4px;flex:1 1 0;min-width:0}
.gf-col h4{
  font-size:13px;font-weight:500;letter-spacing:.02em;color:#111116;
  margin:0 0 6px;padding:0;
}
.gf-col a{
  display:inline-block;font-size:14px;color:rgba(17,17,22,.66);text-decoration:none;
  padding:6px 12px;margin-left:-12px;border-radius:10px;
  transition:color .15s,background .15s;
}
.gf-col a:hover{color:#111116;background:rgba(255,255,255,.55)}

/* ---- glass CTA row ---- */
.gf-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 20px;border-radius:20px;
  background:rgba(255,255,255,.35);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 1.5px rgba(0,0,0,.06);
}
.gf-cta-text{display:flex;flex-direction:column;gap:3px;min-width:220px}
.gf-cta-text strong{font-size:15px;font-weight:500;letter-spacing:-.01em}
.gf-cta-text span{font-size:13px;color:rgba(17,17,22,.62)}
.gf-form{display:flex;gap:8px;flex:1 1 360px;max-width:460px;position:relative}
.gf-form input[type=email]{
  flex:1 1 200px;min-width:0;font:400 13px/1.2 'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#111116;padding:10px 16px;border:none;border-radius:12px;outline:none;
  background:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 1.5px rgba(0,0,0,.07),inset 0 -1px 1.5px rgba(0,0,0,.07);
  transition:all .3s cubic-bezier(.44,0,.56,1);
}
.gf-form input[type=email]::placeholder{color:rgba(17,17,22,.42)}
.gf-form input[type=email]:focus{
  background:rgba(255,255,255,.45);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 8px 20px -6px rgba(148,160,181,.45),-4px -4px 12px rgba(255,255,255,.5);
}
.gf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gf-btn{
  flex:none;font:500 13px/1.2 'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  padding:10px 18px;border:none;border-radius:12px;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,rgb(14,110,70),rgb(11,93,59));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -1px 1.5px rgba(0,0,0,.2),0 6px 16px -6px rgba(11,93,59,.6);
  transition:transform .2s,box-shadow .2s;
}
.gf-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -1px 1.5px rgba(0,0,0,.2),0 10px 22px -8px rgba(11,93,59,.7)}
.gf-btn:disabled{opacity:.6;cursor:default;transform:none}
.gf-meta{font-size:12px;color:rgba(17,17,22,.55);margin:6px 0 0;min-height:1em}
.gf-meta.ok{color:rgb(11,93,59)}
.gf-meta.err{color:#b42318}

/* ---- divider + bottom row ---- */
.gf-divider{height:1px;width:100%;
  background:linear-gradient(90deg,#fff 0%,#c9c9c9 9%,#a1a1a1 32%,#757575 73%,#fff 100%);
  opacity:.5}
.gf-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.gf-bottom p{margin:0;font-size:13px;color:rgba(17,17,22,.6)}
.gf-legal{display:flex;gap:4px;flex-wrap:wrap}
.gf-legal a{font-size:13px;color:rgba(17,17,22,.6);text-decoration:none;padding:6px 12px;border-radius:10px;transition:color .15s,background .15s}
.gf-legal a:hover{color:#111116;background:rgba(255,255,255,.55)}

/* ---- tablet / phone (mirrors the component's Tablet + Phone variants) ---- */
@media (max-width:900px){
  footer.glass-footer{padding:72px 16px 32px !important}
  .gf-panel{padding:32px 30px 26px;gap:24px}
  .gf-top{flex-direction:column;gap:28px}
  .gf-brand{flex:none;max-width:320px}
  .gf-cols{gap:20px;width:100%;flex-wrap:wrap}
  .gf-col{flex:1 1 180px}
  .gf-cta{flex-direction:column;align-items:flex-start}
  .gf-cta>div{flex:none !important;width:100%;max-width:none !important}
  .gf-form{width:100%;max-width:none;flex:none}
}
@media (max-width:560px){
  footer.glass-footer{padding:56px 10px 24px !important}
  .gf-shell{border-radius:24px}
  .gf-panel{border-radius:21px;padding:28px 16px 24px}
  .gf-top{gap:36px}
  .gf-cols{flex-direction:column;gap:20px}
  .gf-col a{margin-left:0}
  .gf-form{flex-direction:column}
  .gf-form input[type=email]{flex:none;width:100%;height:auto;min-height:0}
  .gf-btn{width:100%}
  .gf-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---- Hard overrides: the pages carry legacy dark-footer rules with
   !important (body footer p, body footer a, etc.). Out-specify them. ---- */
html body footer.glass-footer,
html body footer.glass-footer *{position:relative}
html body footer.glass-footer::before{position:absolute}
html body footer.glass-footer .gf-hp{position:absolute}
html body footer.glass-footer{background:#FFFFFF !important;color:#111116 !important}
html body footer.glass-footer p,
html body footer.glass-footer span,
html body footer.glass-footer small,
html body footer.glass-footer strong,
html body footer.glass-footer h4{color:#111116 !important}
html body footer.glass-footer .gf-tag,
html body footer.glass-footer .gf-cta-text span,
html body footer.glass-footer .gf-bottom p{color:rgba(17,17,22,.66) !important}
html body footer.glass-footer .gf-col a,
html body footer.glass-footer .gf-legal a{color:rgba(17,17,22,.66) !important}
html body footer.glass-footer .gf-col a:hover,
html body footer.glass-footer .gf-legal a:hover{color:#111116 !important}
html body footer.glass-footer .gf-social a{color:#111116 !important}
html body footer.glass-footer .gf-btn{color:#fff !important}
html body footer.glass-footer .gf-meta{color:rgba(17,17,22,.55) !important}
html body footer.glass-footer .gf-meta.ok{color:rgb(11,93,59) !important}
html body footer.glass-footer .gf-meta.err{color:#b42318 !important}
html body footer.glass-footer img{filter:none !important;opacity:1 !important;height:30px !important;width:auto !important;margin:0 !important}