/* =========================================================
   SYROHCHEM — SITE FOOTER
   Brand palette: deep indigo/navy + gold, matched to navbar.
   Signature motif: hexagon (the "SY" mark's own geometry —
   also literally the ring shape at the heart of benzo-/tolyl-
   triazole chemistry) used as texture + list bullets rather
   than decoration bolted on top.
   Self-contained, safe to load on any page.
   ========================================================= */
:root{
  --sf-navy-900:#0D0F3A;
  --sf-navy-800:#14164A;
  --sf-navy-700:#1B1E5C;
  --sf-gold:#C9971F;
  --sf-gold-soft:#E4B84A;
  --sf-line:rgba(255,255,255,0.09);
  --sf-text-dim:rgba(255,255,255,0.60);
  --sf-text-mid:rgba(255,255,255,0.82);
  --sf-white:#FFFFFF;
  --sf-font-display:'IBM Plex Sans', sans-serif;
  --sf-font-body:'Inter', sans-serif;
  --sf-font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

.sh-foot *{ box-sizing:border-box; }

.sh-foot{
  position:relative;
  background:
    radial-gradient(ellipse 900px 420px at 12% 0%, rgba(228,184,74,0.07), transparent 60%),
    var(--sf-navy-900);
  font-family:var(--sf-font-body);
  overflow:hidden;
}

/* ---------------------------------------------------------
   Signature: hairline hex-grid texture + top gradient seam
--------------------------------------------------------- */
.sh-foot::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 84 24 84 72 42 96 0 72 0 24Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E");
  background-size:84px 96px;
  pointer-events:none;
  opacity:0.9;
}
.sh-foot::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--sf-gold) 20%, var(--sf-gold-soft) 50%, var(--sf-gold) 80%, transparent);
}

.sh-foot > *{ position:relative; z-index:1; }

/* ---------------------------------------------------------
   Main grid
--------------------------------------------------------- */
.sh-foot-main{ padding:76px 0 46px; }
.sh-foot-inner{
  max-width:1320px; margin:0 auto; padding:0 32px;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;
  gap:48px;
}

.sh-foot-col h5{
  font-family:var(--sf-font-display); font-size:12px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--sf-gold-soft);
  margin:0 0 24px;
  display:flex; align-items:center; gap:9px;
}
/* hex tick before each heading — structural, not decorative:
   it echoes the ring bullets used below so headings read as
   the "parent node" of the list beneath them */
.sh-foot-col h5::before{
  content:"";
  width:8px; height:8px; flex:0 0 auto;
  background:var(--sf-gold);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.sh-foot-col ul{ list-style:none; margin:0; padding:0; }
.sh-foot-col ul li{ margin-bottom:13px; }
.sh-foot-col ul li a{
  position:relative;
  font-size:13.5px; color:var(--sf-text-dim); font-weight:500;
  transition:color .2s ease, padding-left .2s ease;
  display:inline-block; padding-left:15px;
}
/* hex bullet instead of a generic dot/dash */
.sh-foot-col ul li a::before{
  content:"";
  position:absolute; left:0; top:6px;
  width:6px; height:6px;
  background:rgba(228,184,74,0.55);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition:background .2s ease;
}
.sh-foot-col ul li a:hover{ color:var(--sf-white); padding-left:19px; }
.sh-foot-col ul li a:hover::before{ background:var(--sf-gold-soft); }

/* ---------------------------------------------------------
   Brand column
--------------------------------------------------------- */
.sh-foot-brand-col{ padding-right:12px; }
.sh-foot-brand{
  display:inline-flex; align-items:center;
  background:#FFFFFF; border-radius:10px; padding:10px 18px;
  margin-bottom:24px;
}
.sh-foot-brand img{ height:52px; width:auto; display:block; }

.sh-foot-tagline{
  font-size:13.5px; line-height:1.75; color:var(--sf-text-dim);
  margin:0 0 22px; max-width:340px;
}

.sh-foot-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.sh-foot-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sf-font-mono);
  font-size:11.5px; font-weight:500; letter-spacing:0.02em; color:var(--sf-gold-soft);
  border:1px solid rgba(228,184,74,0.35); border-radius:20px;
  padding:8px 16px;
}
.sh-foot-badge i{ font-size:14px; }

.sh-foot-social{ display:flex; align-items:center; gap:12px; }
.sh-foot-social a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:rgba(255,255,255,0.06);
  color:var(--sf-white); font-size:15px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.sh-foot-social a:hover{
  background:var(--sf-gold); color:var(--sf-navy-900); transform:translateY(-2px);
}

/* ---------------------------------------------------------
   Contact column
--------------------------------------------------------- */
.sh-foot-contact-list{ margin-bottom:26px; }
.sh-foot-contact-list li{
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:18px;
}
.sh-foot-contact-list li i{
  font-size:14px; color:var(--sf-navy-900); margin-top:2px; flex:0 0 auto;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  background:var(--sf-gold-soft);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.sh-foot-contact-list li span{
  font-size:13px; line-height:1.65; color:var(--sf-text-dim);
  font-family:var(--sf-font-mono); letter-spacing:0.01em;
}
.sh-foot-contact-list li span a{ color:var(--sf-text-mid); transition:color .2s ease; }
.sh-foot-contact-list li span a:hover{ color:var(--sf-white); }

.sh-foot-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sf-font-body); font-weight:700; font-size:13px;
  color:var(--sf-navy-900); background:var(--sf-gold-soft);
  padding:13px 22px; border-radius:3px;
  box-shadow:0 8px 20px rgba(201,151,31,0.18);
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.sh-foot-cta-btn:hover{
  background:var(--sf-gold); transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(201,151,31,0.28);
}

/* ---------------------------------------------------------
   Bottom bar
--------------------------------------------------------- */
.sh-foot-bottom{ border-top:1px solid var(--sf-line); }
.sh-foot-bottom-inner{
  max-width:1320px; margin:0 auto; padding:22px 32px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.sh-foot-bottom-inner p{
  font-family:var(--sf-font-mono);
  font-size:12px; letter-spacing:0.01em; color:var(--sf-text-dim); margin:0;
}
.sh-foot-legal{
  display:flex; align-items:center; gap:26px;
  list-style:none; margin:0; padding:0;
}
.sh-foot-legal a{
  font-size:12.5px; color:var(--sf-text-dim); font-weight:500;
  transition:color .2s ease;
}
.sh-foot-legal a:hover{ color:var(--sf-white); }

/* ---------------------------------------------------------
   Back-to-top button
--------------------------------------------------------- */
.sh-foot-back-to-top{
  position:fixed; right:28px; bottom:28px; z-index:9990;
  width:46px; height:46px; border:none; cursor:pointer;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--sf-navy-900); color:var(--sf-gold);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 10px 28px rgba(13,15,58,0.30);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease, color .2s ease;
}
.sh-foot-back-to-top.is-visible{
  opacity:1; visibility:visible; transform:translateY(0);
}
.sh-foot-back-to-top:hover{ background:var(--sf-gold); color:var(--sf-navy-900); }
.sh-foot-back-to-top:focus-visible,
.sh-foot-col ul li a:focus-visible,
.sh-foot-legal a:focus-visible,
.sh-foot-cta-btn:focus-visible,
.sh-foot-social a:focus-visible{
  outline:2px solid var(--sf-gold-soft); outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .sh-foot-back-to-top,
  .sh-foot-cta-btn,
  .sh-foot-col ul li a,
  .sh-foot-social a{ transition:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .sh-foot-inner{
    grid-template-columns:1fr 1fr 1fr;
    row-gap:44px;
  }
  .sh-foot-brand-col{ grid-column:1 / -1; max-width:520px; }
}

@media (max-width:720px){
  .sh-foot-main{ padding:56px 0 36px; }
  .sh-foot-inner{
    grid-template-columns:1fr 1fr;
    padding:0 24px;
    gap:38px;
  }
  .sh-foot-brand-col{ grid-column:1 / -1; }
  .sh-foot-bottom-inner{
    flex-direction:column; align-items:flex-start; padding:20px 24px;
  }
  .sh-foot-legal{ gap:18px; flex-wrap:wrap; }
  .sh-foot-back-to-top{ right:18px; bottom:18px; width:42px; height:42px; }
}

@media (max-width:460px){
  .sh-foot-inner{ grid-template-columns:1fr; }
}

/* --- Fix unwanted underline coming from global a{} rules (scoped to footer only) --- */
.sh-foot-col ul li a,
.sh-foot-legal a,
.sh-foot-contact-list li span a{
  text-decoration:none !important;
  border-bottom:none !important;
}