/* =========================================================
   ZT BRAND STUDIO — SEO-ALIGNED RESPONSIVE FOOTER
   Source strategy: ZT Pre-Index SEO Master Guide FA v2
   Scope: .ztf-shell only
   No external fonts / inherits theme typography
========================================================= */

.ztf-shell {
  --ztf-bg: #050505;
  --ztf-panel: #0a0a09;
  --ztf-panel-2: #0e0d0a;
  --ztf-gold: #EDB126;
  --ztf-gold-light: #f4cf72;
  --ztf-gold-pale: #fff0bd;
  --ztf-gold-dark: #8e651f;
  --ztf-text: #fffaf0;
  --ztf-muted: rgba(255, 250, 240, .68);
  --ztf-muted-2: rgba(255, 250, 240, .48);
  --ztf-border: rgba(237, 177, 38, .16);
  --ztf-border-strong: rgba(237, 177, 38, .34);
  --ztf-focus: #f4cf72;
  --ztf-cursor-x: 50%;
  --ztf-cursor-y: 50%;

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: var(--ztf-text);
  background:
    radial-gradient(circle at var(--ztf-cursor-x) var(--ztf-cursor-y), rgba(237,177,38,.055), transparent 22rem),
    linear-gradient(180deg, #070706 0%, var(--ztf-bg) 100%);
  border-top: 1px solid rgba(237,177,38,.12);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ztf-shell *,
.ztf-shell *::before,
.ztf-shell *::after { box-sizing: border-box; }

/* English-only footer: keep reading/order consistently left-to-right even inside RTL page contexts. */
.ztf-shell h1,
.ztf-shell h2,
.ztf-shell h3,
.ztf-shell h4,
.ztf-shell h5,
.ztf-shell h6,
.ztf-shell p,
.ztf-shell span,
.ztf-shell a,
.ztf-shell li,
.ztf-shell address,
.ztf-shell nav,
.ztf-shell section,
.ztf-shell div {
  direction: ltr !important;
  text-align: left;
}

.ztf-shell a { -webkit-tap-highlight-color: transparent; }
.ztf-shell .ztf-raster-icon { display: block; flex: 0 0 auto; }

.ztf-top-line {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
}

/* Three repeated gradient tiles preserve the original 220% pattern.
   Move the painted layer instead of repainting background-position. */
.ztf-top-line::before {
  position: absolute;
  top: 0;
  left: -220%;
  width: 660%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(237,177,38,.72), var(--ztf-gold-light), rgba(237,177,38,.72), transparent);
  background-size: 33.333333333333% 100%;
  background-repeat: repeat-x;
  animation: ztf-flow 10s linear infinite;
}

@keyframes ztf-flow {
  from { transform: translateX(-21.818181818182%); }
  to { transform: translateX(21.818181818182%); }
}

/* Decorative depth kept intentionally subtle to avoid visual noise and GPU-heavy blur. */
.ztf-shapes {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .42;
}

.ztf-shapes span {
  --s: 38px;
  position: absolute;
  width: var(--s);
  aspect-ratio: 1;
  border: 1px solid rgba(237,177,38,.2);
  background: rgba(237,177,38,.018);
  clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  animation: ztf-drift 18s linear infinite;
}
.ztf-shapes span:nth-child(1){left:5%;bottom:-70px;--s:72px;animation-delay:-9s;}
.ztf-shapes span:nth-child(2){left:18%;bottom:-55px;--s:34px;animation-delay:-3s;}
.ztf-shapes span:nth-child(3){left:34%;bottom:-85px;--s:54px;animation-delay:-12s;}
.ztf-shapes span:nth-child(4){left:52%;bottom:-60px;--s:30px;animation-delay:-6s;}
.ztf-shapes span:nth-child(5){left:70%;bottom:-90px;--s:66px;animation-delay:-14s;}
.ztf-shapes span:nth-child(6){left:88%;bottom:-60px;--s:36px;animation-delay:-5s;}
.ztf-shapes span:nth-child(n+7){display:none;}

@keyframes ztf-drift {
  from { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; }
  12%, 78% { opacity: .72; }
  to { transform: translate3d(18px,-760px,0) rotate(260deg); opacity: 0; }
}

.ztf-container {
  position: relative;
  z-index: 2;
  width: min(1760px, calc(100% - clamp(32px, 5vw, 92px)));
  margin: 0 auto;
  padding: clamp(34px, 3.2vw, 54px) 0 clamp(20px, 2vw, 32px);
}

/* ---------------- CTA: compact, not a tall hero ---------------- */
.ztf-cta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(28px, 2.8vw, 42px);
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.6vw, 38px);
  background: linear-gradient(135deg, rgba(237,177,38,.07), rgba(255,255,255,.018));
  border: 1px solid var(--ztf-border);
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 44px rgba(0,0,0,.2);
}

.ztf-cta-copy { min-width: 0; }
.ztf-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--ztf-gold-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ztf-cta-title {
  margin: 0;
  max-width: 880px;
  color: var(--ztf-text);
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.14;
  letter-spacing: -.025em;
}

.ztf-cta-sub {
  max-width: 920px;
  margin: 7px 0 0;
  color: var(--ztf-muted);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
}

.ztf-project-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: clamp(214px, 15vw, 250px);
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 30px 4px;
  overflow: hidden;
  color: #090806;
  background:
    linear-gradient(180deg, #f7cb58 0%, #efb92f 58%, #e6a70b 100%);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -7px 0 rgba(142,94,0,.24),
    0 8px 0 #9a6900,
    0 13px 24px rgba(0,0,0,.26);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .115em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

/* Inset highlight/border reproduces the architectural bevel in the reference button. */
.ztf-project-link::before {
  position: absolute;
  z-index: -1;
  inset: 6px 8px 11px 8px;
  content: "";
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.82);
  border-left: 1px solid rgba(255,255,255,.72);
  border-right: 1px solid rgba(174,113,0,.22);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* Small top-right facet for the cut-metal / folded-corner effect. */
.ztf-project-link::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 21px;
  height: 21px;
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(149,96,0,.16));
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.ztf-project-link span {
  position: relative;
  z-index: 2;
  direction: ltr !important;
  text-align: left;
}

.ztf-project-link .ztf-raster-icon {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  stroke-width: 2.35;
  transition: transform .18s ease;
}

.ztf-project-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 -7px 0 rgba(142,94,0,.22),
    0 9px 0 #8d6000,
    0 15px 28px rgba(0,0,0,.3);
}

.ztf-project-link:hover .ztf-raster-icon { transform: translate(2px,-2px); }

.ztf-project-link:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -4px 0 rgba(142,94,0,.2),
    0 3px 0 #8d6000,
    0 7px 16px rgba(0,0,0,.24);
}

/* ---------------- Main responsive grid ---------------- */
.ztf-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.45fr) minmax(160px, .72fr) minmax(250px, 1.05fr) minmax(285px, 1.18fr);
  gap: clamp(22px, 2.6vw, 44px);
  align-items: start;
  margin-bottom: clamp(26px, 2.6vw, 40px);
}

.ztf-panel { min-width: 0; }
.ztf-panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px;
  padding-bottom: 9px;
  color: var(--ztf-gold-light);
  border-bottom: 1px solid var(--ztf-border);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ztf-title-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--ztf-gold-light);
  background: rgba(237,177,38,.055);
  border: 1px solid rgba(237,177,38,.18);
  border-radius: 8px;
}
.ztf-title-icon .ztf-raster-icon { width: 15px; height: 15px; }

/* ---------------- Brand ---------------- */
.ztf-brand {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--ztf-text);
  text-decoration: none;
}
.ztf-brand-img-wrap {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  padding: 5px;
  background: rgba(255,255,255,.026);
  border: 1px solid rgba(237,177,38,.18);
  border-radius: 11px;
}
.ztf-brand-img { display:block; width:100%; height:100%; object-fit:contain; }
.ztf-brand-text { display:flex; min-width:0; flex-direction:column; gap:2px; }
.ztf-brand-title {
  color: var(--ztf-gold-pale);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ztf-brand-subtitle { color:var(--ztf-muted); font-size:12px; line-height:1.35; }
.ztf-about-text {
  max-width: 520px;
  margin: 0 0 13px;
  color: var(--ztf-muted);
  font-size: 13.5px;
  line-height: 1.62;
}
.ztf-brand-meta { display:flex; flex-wrap:wrap; gap:7px; }
.ztf-meta-chip {
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:0 9px;
  color:var(--ztf-muted);
  background:rgba(255,255,255,.018);
  border:1px solid rgba(237,177,38,.11);
  border-radius:999px;
  font-size:11.5px;
  font-weight:650;
}

/* ---------------- Link groups: descriptive anchors ---------------- */
.ztf-links { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.ztf-link {
  position:relative;
  display:flex;
  width:100%;
  min-height:32px;
  align-items:center;
  padding:4px 0 4px 15px;
  color:var(--ztf-muted);
  font-size:13.5px;
  font-weight:560;
  line-height:1.35;
  text-decoration:none;
  transition:color .18s ease, transform .18s ease;
}
.ztf-link::before {
  position:absolute;
  left:0;
  width:6px;
  height:6px;
  content:"";
  border-top:1.5px solid var(--ztf-gold);
  border-right:1.5px solid var(--ztf-gold);
  transform:rotate(45deg);
  opacity:.72;
}
.ztf-link:hover { color:var(--ztf-gold-pale); transform:translateX(2px); }
.ztf-service-links .ztf-link { font-size:13px; }

/* ---------------- Contact ---------------- */
.ztf-contact-layout { display:grid; gap:13px; }
.ztf-contact-main { min-width:0; }
.ztf-contact-address { margin:0; font-style:normal; }
.ztf-contact-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.ztf-contact-list li {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  align-items:center;
  min-height:36px;
}
.ztf-contact-icon {
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  color:var(--ztf-gold-light);
  background:rgba(237,177,38,.045);
  border:1px solid rgba(237,177,38,.14);
  border-radius:9px;
}
.ztf-contact-icon .ztf-raster-icon { width:16px; height:16px; }
.ztf-contact-link {
  min-width:0;
  color:var(--ztf-muted);
  font-size:13px;
  font-weight:570;
  line-height:1.35;
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:color .18s ease;
}
.ztf-contact-link:hover { color:var(--ztf-gold-pale); }

.ztf-social { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.ztf-social-btn {
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  color:var(--ztf-gold-light);
  background:rgba(255,255,255,.018);
  border:1px solid rgba(237,177,38,.14);
  border-radius:10px;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.ztf-social-btn:hover { transform:translateY(-2px); border-color:var(--ztf-border-strong); background:rgba(237,177,38,.065); }
.ztf-social-btn .ztf-raster-icon { width:17px; height:17px; }

.ztf-global {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:9px;
  padding-top:12px;
  color:var(--ztf-muted-2);
  border-top:1px solid rgba(237,177,38,.09);
  font-size:11.7px;
  line-height:1.48;
}
.ztf-global .ztf-raster-icon { width:17px; height:17px; margin-top:1px; color:var(--ztf-gold); }
.ztf-global strong { display:block; margin-bottom:1px; color:var(--ztf-gold-light); font-size:12px; }
.ztf-global span { display:block; }

/* ---------------- Bottom bar ---------------- */
.ztf-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:16px;
  border-top:1px solid rgba(237,177,38,.09);
}
.ztf-copyright { color:var(--ztf-muted-2); font-size:11.5px; line-height:1.4; }
.ztf-copyright strong { color:var(--ztf-gold-light); font-weight:650; }
.ztf-legal { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:9px; }
.ztf-legal a { color:var(--ztf-muted-2); font-size:11.5px; font-weight:560; text-decoration:none; transition:color .18s ease; }
.ztf-legal a:hover { color:var(--ztf-gold-light); }
.ztf-legal-separator { width:3px; height:3px; background:var(--ztf-gold-dark); border-radius:50%; }

/* ---------------- Accessibility ---------------- */
.ztf-shell a:focus-visible { outline:2px solid var(--ztf-focus); outline-offset:3px; border-radius:6px; }

/* =========================================================
   ULTRA-WIDE DESKTOP — 1600px+
   Wider layout, not taller layout.
========================================================= */
@media (min-width: 1600px) {
  .ztf-container { width:min(1840px, calc(100% - 120px)); }
  .ztf-grid { grid-template-columns:minmax(340px,1.5fr) minmax(190px,.72fr) minmax(290px,1.04fr) minmax(320px,1.12fr); gap:46px; }
  .ztf-about-text { max-width:580px; }
}

/* =========================================================
   NORMAL DESKTOP / SMALL LAPTOP — 1100px–1399px
   Keeps all four columns and reduces dead space.
========================================================= */
@media (max-width: 1399px) and (min-width: 1100px) {
  .ztf-container { width:min(1260px, calc(100% - 44px)); }
  .ztf-grid { grid-template-columns:minmax(270px,1.25fr) minmax(140px,.66fr) minmax(220px,1fr) minmax(250px,1.08fr); gap:24px; }
  .ztf-panel-title { font-size:11.5px; letter-spacing:.1em; }
  .ztf-link { font-size:13px; }
  .ztf-service-links .ztf-link { font-size:12.5px; }
}

/* =========================================================
   TABLET — 720px–1099px
   Brand + contact use full width; the two navigation blocks share a row.
========================================================= */
@media (max-width: 1099px) {
  .ztf-container { width:min(920px, calc(100% - 36px)); padding-top:34px; }
  .ztf-cta { margin-bottom:28px; }
  .ztf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 28px; }
  .ztf-panel-brand,
  .ztf-panel-contact { grid-column:1 / -1; }
  .ztf-panel-brand {
    display:grid;
    grid-template-columns:minmax(260px,.9fr) minmax(0,1.2fr);
    grid-template-areas:
      "title title"
      "brand about"
      "brand meta";
    column-gap:28px;
    align-items:start;
  }
  .ztf-panel-brand .ztf-panel-title { grid-area:title; }
  .ztf-panel-brand .ztf-brand { grid-area:brand; margin-bottom:0; }
  .ztf-panel-brand .ztf-about-text { grid-area:about; margin-bottom:8px; max-width:none; }
  .ztf-panel-brand .ztf-brand-meta { grid-area:meta; }

  .ztf-panel-contact .ztf-contact-layout { grid-template-columns:minmax(0,1fr) minmax(240px,.72fr); gap:24px; align-items:start; }
  .ztf-panel-contact .ztf-global { padding-top:0; padding-left:18px; border-top:0; border-left:1px solid rgba(237,177,38,.1); }
}

/* =========================================================
   MOBILE / LARGE PHONES — 480px–719px
   Navigation stays side-by-side to use horizontal space efficiently.
========================================================= */
@media (max-width: 719px) {
  .ztf-container { width:calc(100% - 28px); padding:28px 0 18px; }
  .ztf-cta {
    grid-template-columns:1fr;
    gap:15px;
    margin-bottom:24px;
    padding:19px 18px;
    border-radius:15px;
  }
  .ztf-project-link { width:min(100%, 238px); min-height:58px; padding-inline:24px; }
  .ztf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; row-gap:24px; margin-bottom:24px; }
  .ztf-panel-brand,
  .ztf-panel-contact { grid-column:1 / -1; }

  .ztf-panel-brand {
    display:block;
  }
  .ztf-panel-brand .ztf-brand { margin-bottom:12px; }
  .ztf-panel-brand .ztf-about-text { margin-bottom:12px; }

  .ztf-panel-title { margin-bottom:12px; padding-bottom:8px; font-size:11.5px; letter-spacing:.095em; }
  .ztf-title-icon { width:27px; height:27px; }
  .ztf-link { min-height:31px; padding-left:13px; font-size:12.6px; }
  .ztf-service-links .ztf-link { font-size:12.2px; line-height:1.3; }

  .ztf-panel-contact .ztf-contact-layout { grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); gap:14px; }
  .ztf-panel-contact .ztf-global { padding-top:1px; padding-left:13px; border-top:0; border-left:1px solid rgba(237,177,38,.1); font-size:11.2px; }
  .ztf-contact-list li { grid-template-columns:32px minmax(0,1fr); gap:8px; min-height:34px; }
  .ztf-contact-icon { width:32px; height:32px; }
  .ztf-contact-link { font-size:12.2px; }
  .ztf-social-btn { width:35px; height:35px; }

  .ztf-bottom { gap:10px; padding-top:14px; }
  .ztf-copyright,
  .ztf-legal a { font-size:10.8px; }
}

/* =========================================================
   SMALL PHONES — <=479px
   Keep the two link groups together while stacking the contact area safely.
========================================================= */
@media (max-width: 479px) {
  .ztf-container { width:calc(100% - 22px); }
  .ztf-cta-title { font-size:22px; }
  .ztf-cta-sub { font-size:12.7px; }
  .ztf-project-link { width:min(100%, 224px); min-height:56px; padding-inline:20px; gap:13px; font-size:11.3px; letter-spacing:.1em; }
  .ztf-grid { column-gap:14px; row-gap:21px; }
  .ztf-panel-explore .ztf-panel-title,
  .ztf-panel-services .ztf-panel-title { gap:7px; font-size:10.7px; }
  .ztf-panel-explore .ztf-title-icon,
  .ztf-panel-services .ztf-title-icon { width:25px; height:25px; flex-basis:25px; }
  .ztf-link { min-height:30px; font-size:12px; line-height:1.3; overflow-wrap:anywhere; }
  .ztf-service-links .ztf-link { font-size:11.5px; }

  .ztf-panel-contact .ztf-contact-layout { grid-template-columns:1fr; gap:11px; }
  .ztf-panel-contact .ztf-global { padding:10px 0 0; border-left:0; border-top:1px solid rgba(237,177,38,.09); }

  .ztf-bottom { flex-direction:column; align-items:flex-start; }
  .ztf-legal { justify-content:flex-start; }
}

/* =========================================================
   EXTRA-SMALL PHONES — <=350px
   One column prevents cramped anchors and overflow.
========================================================= */
@media (max-width: 350px) {
  .ztf-grid { grid-template-columns:1fr; }
  .ztf-panel-brand,
  .ztf-panel-contact { grid-column:auto; }
  .ztf-panel-explore .ztf-panel-title,
  .ztf-panel-services .ztf-panel-title { font-size:11.5px; }
  .ztf-link,
  .ztf-service-links .ztf-link { font-size:12.5px; }
}

/* =========================================================
   Motion accessibility
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ztf-top-line,
  .ztf-top-line::before,
  .ztf-shapes span { animation:none !important; }
  .ztf-project-link,
  .ztf-link,
  .ztf-social-btn { transition:none !important; }
}

@media (hover:none), (pointer:coarse) {
  .ztf-link:hover,
  .ztf-social-btn:hover,
  .ztf-project-link:hover { transform:none; }
}

/* =========================================================
   ZT FOOTER — SOURCE VISUAL EFFECTS RESTORED (v5)
   Restored from the ZT Brand Studio Website 2 footer source:
   - premium rising 3D gold hexagons
   - animated top gold line
   - pointer-follow gold light
   - hover underline reveal
   - source chevron motion
   - brand/logo micro-interactions
   - title-icon hover depth
   - CTA decorative line + rings
   Layout, SEO content, LTR flow and responsive structure remain intact.
========================================================= */

/* Animated gold top line — stronger source-style glow. */
.ztf-top-line {
  box-shadow: 0 0 14px rgba(237, 177, 38, .38);
}

.ztf-top-line::before {
  animation-duration: 9s;
}

/* Premium rising 3D gold hexagons from the source footer. */
.ztf-shapes {
  opacity: 1;
}

.ztf-shapes span {
  --ztf-size: 60px;
  --ztf-left: 10%;
  --ztf-drift: 20px;
  --ztf-duration: 22s;
  --ztf-delay: 0s;

  display: block;
  position: absolute;
  bottom: -180px;
  left: var(--ztf-left);
  width: var(--ztf-size);
  aspect-ratio: 1;
  opacity: 0;
  border: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 243, 200, .96),
    rgba(255, 214, 107, .88) 35%,
    rgba(237, 177, 38, .84) 68%,
    rgba(154, 107, 40, .90)
  );
  clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  filter: drop-shadow(0 0 10px rgba(237, 177, 38, .28));
  will-change: auto;
  animation: ztf-hex-rise var(--ztf-duration) linear var(--ztf-delay) infinite;
}

.ztf-shapes span::after {
  position: absolute;
  inset: 2px;
  content: "";
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 214, 107, .14), transparent 46%),
    rgba(5, 5, 5, .80);
  clip-path: inherit;
}

.ztf-shapes span:nth-child(1)  { --ztf-left: 5%;  --ztf-size: 96px;  --ztf-duration: 27s; --ztf-delay: -9s;  --ztf-drift: 28px; }
.ztf-shapes span:nth-child(2)  { --ztf-left: 17%; --ztf-size: 38px;  --ztf-duration: 17s; --ztf-delay: -3s;  --ztf-drift: -20px; }
.ztf-shapes span:nth-child(3)  { --ztf-left: 29%; --ztf-size: 64px;  --ztf-duration: 22s; --ztf-delay: -12s; --ztf-drift: 36px; }
.ztf-shapes span:nth-child(4)  { --ztf-left: 42%; --ztf-size: 31px;  --ztf-duration: 15s; --ztf-delay: -7s;  --ztf-drift: -28px; }
.ztf-shapes span:nth-child(5)  { --ztf-left: 55%; --ztf-size: 118px; --ztf-duration: 31s; --ztf-delay: -15s; --ztf-drift: 22px; }
.ztf-shapes span:nth-child(6)  { --ztf-left: 67%; --ztf-size: 44px;  --ztf-duration: 18s; --ztf-delay: -5s;  --ztf-drift: -30px; }
.ztf-shapes span:nth-child(7)  { --ztf-left: 78%; --ztf-size: 72px;  --ztf-duration: 25s; --ztf-delay: -13s; --ztf-drift: 34px; }
.ztf-shapes span:nth-child(8)  { --ztf-left: 88%; --ztf-size: 34px;  --ztf-duration: 16s; --ztf-delay: -10s; --ztf-drift: -20px; }
.ztf-shapes span:nth-child(9)  { --ztf-left: 36%; --ztf-size: 84px;  --ztf-duration: 29s; --ztf-delay: -19s; --ztf-drift: 16px; }
.ztf-shapes span:nth-child(10) { --ztf-left: 72%; --ztf-size: 28px;  --ztf-duration: 14s; --ztf-delay: -8s;  --ztf-drift: -24px; }

@keyframes ztf-hex-rise {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(.84); opacity: 0; }
  10%  { opacity: .62; }
  48%  { opacity: .40; }
  82%  { opacity: .52; }
  100% { transform: translate3d(var(--ztf-drift), -140vh, 0) rotate(420deg) scale(1.06); opacity: 0; }
}

/* Depth layers: near shapes brighter; distant shapes softer. */
.ztf-shapes span:nth-child(1),
.ztf-shapes span:nth-child(5),
.ztf-shapes span:nth-child(7) {
  filter: drop-shadow(0 0 28px rgba(237, 177, 38, .65));
}

.ztf-shapes span:nth-child(2),
.ztf-shapes span:nth-child(4),
.ztf-shapes span:nth-child(8),
.ztf-shapes span:nth-child(10) {
  filter: blur(4px) drop-shadow(0 0 10px rgba(237, 177, 38, .25));
}

/* Restore CTA decorative line and geometric rings without changing its layout. */
.ztf-cta {
  position: relative;
  overflow: hidden;
}

.ztf-cta::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 7%;
  width: 28%;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ztf-gold-light), transparent);
  box-shadow: 0 0 16px rgba(237, 177, 38, .40);
}

.ztf-cta::after {
  position: absolute;
  z-index: 0;
  right: -60px;
  bottom: -110px;
  width: 240px;
  height: 240px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(237, 177, 38, .13);
  border-radius: 50%;
  box-shadow:
    0 0 0 22px rgba(237, 177, 38, .025),
    0 0 0 48px rgba(237, 177, 38, .018);
}

.ztf-cta-copy,
.ztf-project-link {
  position: relative;
  z-index: 1;
}

.ztf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ztf-eyebrow::before {
  width: 20px;
  height: 1px;
  flex: 0 0 20px;
  content: "";
  background: var(--ztf-gold);
  box-shadow: 0 0 8px rgba(237, 177, 38, .4);
}

/* Pointer-follow light from the source JS. */
.ztf-shell::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    430px circle at var(--ztf-cursor-x) var(--ztf-cursor-y),
    rgba(237, 177, 38, .07),
    rgba(237, 177, 38, .025) 34%,
    transparent 72%
  );
  transition: opacity 260ms ease;
}

.ztf-shell.ztf-pointer-active::before { opacity: 1; }

/* Source chevron arrows. */
.ztf-link::before { display: none; }
.ztf-link {
  width: fit-content;
  max-width: 100%;
  padding-left: 0;
  gap: 8px;
}
.ztf-link-arrow {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--ztf-gold);
  opacity: .76;
  transition: opacity 180ms ease, transform 180ms ease;
}
.ztf-link:hover .ztf-link-arrow,
.ztf-link:focus-visible .ztf-link-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Elegant gold underline reveal from the source footer. */
.ztf-link > span,
.ztf-contact-link,
.ztf-legal a,
.ztf-brand-title,
.ztf-brand-subtitle {
  position: relative;
}

.ztf-contact-link,
.ztf-legal a,
.ztf-brand-title,
.ztf-brand-subtitle {
  display: inline-block;
  width: fit-content;
}

.ztf-link > span::after,
.ztf-contact-link::after,
.ztf-legal a::after,
.ztf-brand-title::after,
.ztf-brand-subtitle::after {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(237, 177, 38, .54) 11%,
    #EDB126 48%,
    #FFD66B 72%,
    transparent 100%
  );
  box-shadow: 0 0 9px rgba(237, 177, 38, .38);
  transform: scaleX(.08);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), opacity 180ms ease;
}

.ztf-link:hover > span::after,
.ztf-link:focus-visible > span::after,
.ztf-contact-link:hover::after,
.ztf-contact-link:focus-visible::after,
.ztf-legal a:hover::after,
.ztf-legal a:focus-visible::after,
.ztf-brand:hover .ztf-brand-title::after,
.ztf-brand:hover .ztf-brand-subtitle::after,
.ztf-brand:focus-visible .ztf-brand-title::after,
.ztf-brand:focus-visible .ztf-brand-subtitle::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Restore source logo hover depth. */
.ztf-brand-img-wrap {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22), inset 0 1px rgba(255,255,255,.04);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ztf-brand:hover .ztf-brand-img-wrap,
.ztf-brand:focus-visible .ztf-brand-img-wrap {
  transform: translateY(-2px);
  border-color: var(--ztf-border-strong);
  box-shadow: 0 16px 32px rgba(0,0,0,.34), 0 0 22px rgba(237,177,38,.16);
}

/* Refined source panel/icon hover cue. */
.ztf-panel-title,
.ztf-title-icon {
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.ztf-panel:hover .ztf-title-icon {
  border-color: rgba(255, 214, 107, .34);
  box-shadow: 0 0 18px rgba(237, 177, 38, .09);
  transform: translateY(-1px);
}

/* Keep responsive source effects lightweight on phones. */
@media (max-width: 719px) {
  .ztf-shapes span:nth-child(2),
  .ztf-shapes span:nth-child(5),
  .ztf-shapes span:nth-child(8),
  .ztf-shapes span:nth-child(10) {
    display: none;
  }

  .ztf-cta::after {
    width: 190px;
    height: 190px;
    right: -72px;
    bottom: -104px;
  }
}

@media (max-width: 350px) {
  .ztf-shapes span:nth-child(3),
  .ztf-shapes span:nth-child(7) {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .ztf-shell::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ztf-top-line,
  .ztf-top-line::before,
  .ztf-shapes span {
    animation: none !important;
  }

  .ztf-shapes span,
  .ztf-shell::before {
    display: none !important;
  }

  .ztf-link > span::after,
  .ztf-contact-link::after,
  .ztf-legal a::after,
  .ztf-brand-title::after,
  .ztf-brand-subtitle::after,
  .ztf-panel-title,
  .ztf-title-icon,
  .ztf-brand-img-wrap,
  .ztf-link-arrow {
    transition: none !important;
  }
}

/* =========================================================
   20) EXPLORE FLAT ICONS — BLOG / CONSULTATION
   Additive only: preserves all existing footer styling/effects.
========================================================= */
.ztf-flat-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--ztf-gold);
  opacity: .82;
  transform: translateZ(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.ztf-link:hover .ztf-flat-icon,
.ztf-link:focus-visible .ztf-flat-icon {
  opacity: 1;
  transform: translateX(2px) scale(1.04);
}

@media (max-width: 560px) {
  .ztf-flat-icon {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ztf-flat-icon {
    transition: none !important;
  }
}

/* Keep focus inside the CTA polygon, where it cannot be clipped away. */
.ztf-shell .ztf-project-link:focus-visible {
  outline-offset: -4px;
}

/* Reduced motion also suppresses hover displacement, not only transitions. */
@media (prefers-reduced-motion: reduce) {
  .ztf-project-link,
  .ztf-project-link .ztf-raster-icon,
  .ztf-link,
  .ztf-link-arrow,
  .ztf-flat-icon,
  .ztf-social-btn,
  .ztf-brand-img-wrap,
  .ztf-title-icon {
    transform: none !important;
  }

  .ztf-project-link .ztf-raster-icon {
    transition: none !important;
  }
}

/* Local flat raster icons: all footer icons share a single transparent PNG. */
.ztf-shell .ztf-raster-icon{display:inline-block;flex-shrink:0;width:18px;height:18px;background-image:url("../fonts/zt-flat-icons.webp");background-repeat:no-repeat;background-size:500% 300%;}
.ztf-shell .ztf-icon-0{background-position:0% 0%;}
.ztf-shell .ztf-icon-1{background-position:25% 0%;}
.ztf-shell .ztf-icon-2{background-position:50% 0%;}
.ztf-shell .ztf-icon-3{background-position:75% 0%;}
.ztf-shell .ztf-icon-4{background-position:100% 0%;}
.ztf-shell .ztf-icon-5{background-position:0% 50%;}
.ztf-shell .ztf-icon-6{background-position:25% 50%;}
.ztf-shell .ztf-icon-7{background-position:50% 50%;}
.ztf-shell .ztf-icon-8{background-position:75% 50%;}
.ztf-shell .ztf-icon-9{background-position:100% 50%;}
.ztf-shell .ztf-icon-10{background-position:0% 100%;}
.ztf-shell .ztf-icon-11{background-position:25% 100%;}
.ztf-shell .ztf-icon-12{background-position:50% 100%;}
.ztf-shell .ztf-project-link .ztf-raster-icon{filter:brightness(0);}
.ztf-shell .ztf-title-icon .ztf-raster-icon{width:15px;height:15px;}
.ztf-shell .ztf-contact-icon .ztf-raster-icon{width:16px;height:16px;}
.ztf-shell .ztf-link-arrow{width:12px;height:12px;flex-basis:12px;opacity:1;}
.ztf-shell .ztf-social-btn .ztf-raster-icon{width:17px;height:17px;}
.ztf-shell .ztf-global .ztf-raster-icon{width:17px;height:17px;margin-top:1px;}
@media(hover:none){.ztf-shell .ztf-social-btn:hover{transform:none;}}
@media(prefers-reduced-motion:reduce){.ztf-shell .ztf-raster-icon{transition:none!important;transform:none!important;}}

/* Preserve the original footer button geometry; shared CTA rules exclude these links. */
.ztf-shell .ztf-social-btn .ztf-raster-icon {
  opacity:1;
  filter:none;
}
.ztf-shell .ztf-contact-icon .ztf-raster-icon {
  opacity:1;
  filter:none;
}
.ztf-shell .ztf-project-link .ztf-raster-icon {
  width:18px;
  height:18px;
  min-width:18px;
  max-width:18px;
  flex:0 0 18px;
  filter:brightness(0);
}
.ztf-shell .ztf-project-link > span:not(.ztf-raster-icon) {
  min-width:0;
  overflow-wrap:anywhere;
}

/* Dedicated footer CTA; prevent inherited button and icon sizing from overlapping. */
body .ztf-shell a.ztf-project-link {
  display:inline-flex !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:center !important;
  width:clamp(214px,15vw,250px);
  max-width:100%;
  min-width:0;
  height:62px !important;
  min-height:62px !important;
  padding:0 26px 4px !important;
  gap:12px !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,18px 100%,0 calc(100% - 18px)) !important;
  color:#000000 !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  flex-shrink:0;
}
body .ztf-shell a.ztf-project-link > .ztf-project-label {
  position:relative !important;
  display:block !important;
  flex:0 1 auto !important;
  width:auto !important;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  font:inherit !important;
  white-space:nowrap !important;
  text-align:center !important;
}
body .ztf-shell a.ztf-project-link > .ztf-raster-icon {
  position:relative !important;
  display:block !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:0 !important;
  background-image:url("../fonts/zt-flat-icons.webp") !important;
  background-repeat:no-repeat !important;
  background-size:500% 300% !important;
  background-position:0% 0% !important;
  filter:brightness(0) !important;
}
body .ztf-shell .ztf-project-link > span::before,
body .ztf-shell .ztf-project-link > span::after {
  content:none !important;
  display:none !important;
}
@media(max-width:560px){
  body .ztf-shell a.ztf-project-link{width:min(100%,224px);height:56px!important;min-height:56px!important;padding-inline:20px!important;font-size:11.3px!important;}
}
@media(prefers-reduced-motion:reduce){
  body .ztf-shell a.ztf-project-link,
  body .ztf-shell a.ztf-project-link > .ztf-raster-icon{transition:none!important;transform:none!important;}
}


/* Zero To Trend — compact editorial signature beneath the abbreviated brand. */
.ztf-shell .ztf-brand-origin {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 3px 0 4px;
  padding: 0;
  color: #EDB126;
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .16em;
  text-align: left;
  text-transform: none;
  direction: ltr;
}
@media (max-width: 420px) {
  .ztf-shell .ztf-brand-origin {
    font-size: 10px;
    letter-spacing: .12em;
  }
}