/* =========================================================================
   Hadidiz Flow UI: service pages, services hub, "What we build" block and
   the blog post call-to-action. Everything is scoped under .hf-ui so it never
   leaks into the Webflow styles.

   Referenced with a content hash (?v=…) by build-static-pages.js, because
   /css/* is served with a one-year immutable cache.

   Notes:
   - Mona Sans weight 600 is the template's narrow display face; use
     400/500/700/800 here.
   - Motion animates transform, opacity and filter only.
   ========================================================================= */

.hf-ui {
  --hf-accent: #ad68f3;
  --hf-accent-strong: #8b5cf6;
  --hf-accent-soft: #d6bcff;
  --hf-ink: #ffffff;
  --hf-muted: rgba(255, 255, 255, 0.64);
  --hf-faint: rgba(255, 255, 255, 0.42);
  --hf-line: rgba(255, 255, 255, 0.08);
  --hf-line-strong: rgba(255, 255, 255, 0.14);
  --hf-shell: rgba(255, 255, 255, 0.025);
  --hf-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hf-radius: 28px;
  font-family: 'Mona Sans', sans-serif;
  color: var(--hf-ink);
  -webkit-font-smoothing: antialiased;
}

.hf-ui *,
.hf-ui *::before,
.hf-ui *::after { box-sizing: border-box; }

.hf-ui a { text-decoration: none; }

/* The Webflow stylesheet adds letter-spacing to body copy. Reset it with zero
   specificity so component classes (eyebrows, indexes) keep their tracking. */
.hf-ui :where(p, li, a, span, h1, h2, h3, summary, div, strong) { letter-spacing: normal; }

.hf-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.hf-section { padding: 120px 0; position: relative; }
.hf-section--tight { padding: 72px 0; }

/* ---------- Type ---------- */

.hf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(173, 104, 243, 0.26);
  background: rgba(173, 104, 243, 0.07);
  color: var(--hf-accent-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}

.hf-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hf-accent);
  box-shadow: 0 0 0 3px rgba(173, 104, 243, 0.18), 0 0 14px var(--hf-accent);
}

.hf-display {
  margin: 26px 0 0;
  font-size: clamp(42px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff 35%, #cfb1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

.hf-h2 {
  margin: 20px 0 0;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--hf-ink);
  text-wrap: balance;
}

.hf-h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #e6d6ff, var(--hf-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hf-lead {
  margin: 24px 0 0;
  max-width: 660px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
  color: var(--hf-muted);
  text-wrap: pretty;
}

.hf-section-head { max-width: 760px; margin-bottom: 64px; }
.hf-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.hf-section-head--center .hf-lead { margin-left: auto; margin-right: auto; }

/* ---------- Double-bezel surfaces ---------- */

.hf-bezel {
  position: relative;
  padding: 6px;
  border-radius: var(--hf-radius);
  background: var(--hf-shell);
  border: 1px solid var(--hf-line);
  transition: transform 0.8s var(--hf-ease), border-color 0.8s var(--hf-ease), box-shadow 0.8s var(--hf-ease);
}

.hf-core {
  position: relative;
  height: 100%;
  border-radius: calc(var(--hf-radius) - 7px);
  background: linear-gradient(180deg, #111114 0%, #0a0a0c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow: hidden;
  isolation: isolate;
}

/* Soft light that follows the pointer (position set by js/hf-ui.js) */
.hf-glow .hf-core::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -20%), rgba(173, 104, 243, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.6s var(--hf-ease);
  pointer-events: none;
}

.hf-glow:hover .hf-core::after { opacity: 1; }

a.hf-bezel:hover,
.hf-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(173, 104, 243, 0.32);
  box-shadow: 0 30px 80px -40px rgba(139, 92, 246, 0.55);
}

/* ---------- Buttons ---------- */

.hf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}

.hf-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 7px 7px 7px 24px;
  border-radius: 999px;
  background: #ffffff;
  color: #0a0a0b !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 14px 44px -14px rgba(173, 104, 243, 0.75);
  transition: transform 0.6s var(--hf-ease), box-shadow 0.6s var(--hf-ease);
}

.hf-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 22px 60px -14px rgba(173, 104, 243, 0.95);
}

.hf-btn:active { transform: scale(0.98); }

.hf-btn-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0a0a0b;
  color: #ffffff;
  transition: transform 0.6s var(--hf-ease);
}

.hf-btn:hover .hf-btn-icon { transform: translate(3px, -2px) scale(1.06); }

.hf-btn--ghost {
  padding: 15px 24px;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px var(--hf-line-strong);
}

.hf-btn--ghost:hover {
  box-shadow: inset 0 0 0 1px rgba(173, 104, 243, 0.55);
  background: rgba(173, 104, 243, 0.06);
}

.hf-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hf-accent-soft) !important;
  font-weight: 700;
  font-size: 15px;
}

.hf-link-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(173, 104, 243, 0.12);
  border: 1px solid rgba(173, 104, 243, 0.26);
  transition: transform 0.6s var(--hf-ease), background 0.6s var(--hf-ease);
}

a:hover .hf-link-icon,
.hf-link:hover .hf-link-icon {
  transform: translate(3px, -2px);
  background: rgba(173, 104, 243, 0.24);
}

/* ---------- Hero ---------- */

.hf-hero {
  position: relative;
  padding: 190px 0 110px;
  overflow: hidden;
}

.hf-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hf-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.9;
  will-change: transform;
}

.hf-orb--a {
  width: 720px;
  height: 720px;
  top: -320px;
  left: 50%;
  margin-left: -560px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.32), transparent 65%);
  animation: hf-float-a 18s var(--hf-ease) infinite alternate;
}

.hf-orb--b {
  width: 560px;
  height: 560px;
  top: -180px;
  left: 50%;
  margin-left: 80px;
  background: radial-gradient(circle, rgba(173, 104, 243, 0.22), transparent 65%);
  animation: hf-float-b 22s var(--hf-ease) infinite alternate;
}

.hf-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}

@keyframes hf-float-a { to { transform: translate3d(90px, 60px, 0) scale(1.08); } }
@keyframes hf-float-b { to { transform: translate3d(-80px, 40px, 0) scale(0.94); } }

.hf-hero .hf-wrap { z-index: 1; text-align: center; }
.hf-hero .hf-lead { margin-left: auto; margin-right: auto; }
.hf-hero .hf-actions { justify-content: center; }

.hf-trustline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  color: var(--hf-faint);
  font-size: 14px;
}

.hf-trustline li { display: inline-flex; align-items: center; gap: 8px; }
.hf-trustline strong { color: var(--hf-ink); font-weight: 700; }
.hf-trustline svg { color: var(--hf-accent); }

/* ---------- Stats ---------- */

.hf-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hf-stat .hf-core { padding: 30px 26px 28px; }

.hf-stat-value {
  display: block;
  font-size: clamp(36px, 3.4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 40%, #c9a6ff 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Proportional digits: Mona Sans' tabular zero is slashed */
  font-variant-numeric: proportional-nums;
}

.hf-stat-label {
  display: block;
  margin-top: 12px;
  color: var(--hf-muted);
  font-size: 14px;
  line-height: 1.45;
}

.hf-source {
  margin: 22px 0 0;
  text-align: center;
  color: var(--hf-faint);
  font-size: 13.5px;
}

.hf-source a { color: var(--hf-accent-soft); border-bottom: 1px solid rgba(214, 188, 255, 0.35); }

/* ---------- Offerings bento ---------- */

.hf-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.hf-bento > * { grid-column: span 6; }
.hf-bento > :nth-child(6n + 1) { grid-column: span 7; }
.hf-bento > :nth-child(6n + 2) { grid-column: span 5; }
.hf-bento > :nth-child(6n + 3) { grid-column: span 5; }
.hf-bento > :nth-child(6n + 4) { grid-column: span 7; }

.hf-offer .hf-core { padding: 34px 34px 36px; display: flex; flex-direction: column; min-height: 250px; }

.hf-index {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--hf-accent-soft);
  opacity: 0.8;
}

.hf-offer h3 {
  margin: auto 0 0;
  padding-top: 40px;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--hf-ink);
}

.hf-offer p {
  margin: 14px 0 0;
  color: var(--hf-muted);
  font-size: 16px;
  line-height: 1.62;
  max-width: 520px;
}

.hf-offer .hf-core::before {
  content: '';
  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(173, 104, 243, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.8s var(--hf-ease);
}

.hf-offer:hover .hf-core::before { opacity: 1; }

/* ---------- Work (case study) bento ---------- */

.hf-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hf-work > :first-child { grid-column: span 2; grid-row: span 2; }

.hf-case { display: block; }
.hf-case .hf-core { display: flex; flex-direction: column; }

.hf-case-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #121216;
}

.hf-work > :first-child .hf-case-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 340px; }

.hf-case-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.2s var(--hf-ease-out);
}

.hf-case-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 12, 0.85) 100%);
}

.hf-case:hover .hf-case-media img { transform: scale(1.06); }

.hf-case-body { padding: 24px 26px 26px; }

.hf-case-industry {
  display: block;
  color: var(--hf-accent-soft);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.hf-case h3 {
  margin: 12px 0 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--hf-ink);
}

.hf-work > :first-child .hf-case h3 { font-size: clamp(22px, 2.2vw, 30px); }

.hf-case p {
  margin: 10px 0 0;
  color: var(--hf-muted);
  font-size: 15px;
  line-height: 1.58;
}

.hf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.hf-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hf-line);
  color: var(--hf-muted);
  font-size: 12.5px;
  line-height: 1.3;
}

.hf-chip strong { color: var(--hf-ink); font-weight: 700; white-space: nowrap; }

.hf-case-foot { margin-top: 20px; }

/* ---------- Editorial split (long-form) ---------- */

.hf-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}

.hf-split-aside { position: sticky; top: 120px; }

.hf-prose { color: var(--hf-muted); font-size: 17.5px; line-height: 1.75; }
.hf-prose > :first-child { margin-top: 0; }

.hf-prose h2 {
  margin: 56px 0 18px;
  color: var(--hf-ink);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.hf-prose p { margin: 0 0 18px; }
.hf-prose strong { color: var(--hf-ink); font-weight: 700; }
.hf-prose a { color: var(--hf-accent-soft); border-bottom: 1px solid rgba(214, 188, 255, 0.35); }

.hf-prose ul { list-style: none; margin: 0 0 18px; padding: 0; }

.hf-prose li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 1px solid var(--hf-line);
}

.hf-prose li:last-child { border-bottom: 1px solid var(--hf-line); }

.hf-prose li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 25px;
  width: 14px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--hf-accent), transparent);
}

/* ---------- Process steps ---------- */

.hf-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--hf-steps, 5), minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-steps::before,
.hf-steps::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 1px;
}

.hf-steps::before { background: var(--hf-line-strong); }

.hf-steps::after {
  background: linear-gradient(90deg, var(--hf-accent), var(--hf-accent-soft));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.8s var(--hf-ease-out) 0.2s;
}

.hf-steps.is-in::after { transform: scaleX(1); }

.hf-step { position: relative; }

.hf-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #0b0b0d;
  border: 1px solid rgba(173, 104, 243, 0.4);
  box-shadow: 0 0 0 6px #050506, 0 0 24px -4px rgba(173, 104, 243, 0.6);
  color: var(--hf-ink);
  font-weight: 700;
  font-size: 15px;
}

.hf-step h3 {
  margin: 26px 0 0;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--hf-ink);
}

.hf-step p { margin: 10px 0 0; color: var(--hf-muted); font-size: 15px; line-height: 1.6; }

/* ---------- FAQ ---------- */

.hf-faq { display: grid; gap: 12px; }

.hf-faq .hf-core { padding: 0; height: auto; }

.hf-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  cursor: pointer;
  list-style: none;
  color: var(--hf-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.hf-faq summary::-webkit-details-marker { display: none; }

.hf-faq-icon {
  flex: none;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hf-line-strong);
  transition: transform 0.6s var(--hf-ease), border-color 0.6s var(--hf-ease), background 0.6s var(--hf-ease);
}

.hf-faq-icon::before,
.hf-faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--hf-ink);
  border-radius: 2px;
}

.hf-faq-icon::after { transform: rotate(90deg); }

.hf-faq details[open] .hf-faq-icon {
  transform: rotate(45deg);
  border-color: rgba(173, 104, 243, 0.55);
  background: rgba(173, 104, 243, 0.12);
}

.hf-faq-answer {
  padding: 0 26px 26px;
  color: var(--hf-muted);
  font-size: 16.5px;
  line-height: 1.7;
}

.hf-faq details[open] .hf-faq-answer { animation: hf-answer 0.6s var(--hf-ease-out); }

@keyframes hf-answer {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Final CTA panel ---------- */

.hf-cta .hf-core {
  padding: clamp(56px, 7vw, 96px) clamp(28px, 6vw, 80px);
  text-align: center;
}

.hf-cta .hf-core::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 680px;
  height: 680px;
  left: 50%;
  top: -420px;
  margin-left: -340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.38), transparent 65%);
}

.hf-cta .hf-lead { margin-left: auto; margin-right: auto; }
.hf-cta .hf-actions { justify-content: center; }

.hf-cta-more { margin: 30px 0 0; color: var(--hf-faint); font-size: 14.5px; }
.hf-cta-more a { color: var(--hf-accent-soft); margin: 0 6px; }

/* ---------- Services cards (homepage / Features / hub) ---------- */

.hf-services-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  gap: 16px;
}

.hf-services-grid > :first-child { grid-row: span 2; }

.hf-service .hf-core { padding: 36px; display: flex; flex-direction: column; min-height: 260px; }
.hf-services-grid > :first-child .hf-core { min-height: 536px; }

.hf-service-media {
  position: relative;
  margin: -36px -36px 30px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hf-service-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--hf-ease-out);
}

.hf-service-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, #0b0b0d 100%);
}

.hf-service:hover .hf-service-media img { transform: scale(1.05); }

.hf-service h3 {
  margin: 16px 0 0;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--hf-ink);
}

.hf-service p {
  margin: 14px 0 0;
  color: var(--hf-muted);
  font-size: 16px;
  line-height: 1.6;
}

.hf-service .hf-chips { margin-top: 20px; }
.hf-service-foot { margin-top: auto; padding-top: 28px; }

/* ---------- Blog post call to action ---------- */

.hf-post-cta { margin: 56px 0 8px; }
.hf-post-cta .hf-core { padding: 40px clamp(24px, 4vw, 44px); }

.hf-post-cta .hf-core::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -160px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.34), transparent 65%);
}

.blog-rich-text .hf-post-cta h3,
.hf-post-cta h3 {
  margin: 18px 0 0;
  color: #ffffff;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.blog-rich-text .hf-post-cta p,
.hf-post-cta p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 560px;
}

.hf-post-cta .hf-actions { margin-top: 28px; }

/* ---------- Scroll reveal (enabled by js/hf-ui.js adding .hf-js) ---------- */

.hf-js .hf-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(8px);
  transition:
    opacity 1s var(--hf-ease) calc(var(--i, 0) * 90ms),
    transform 1s var(--hf-ease) calc(var(--i, 0) * 90ms),
    filter 1s var(--hf-ease) calc(var(--i, 0) * 90ms);
}

.hf-js .hf-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .hf-section { padding: 88px 0; }
  .hf-hero { padding: 150px 0 80px; }
  .hf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-split { grid-template-columns: 1fr; gap: 36px; }
  .hf-split-aside { position: static; }
  .hf-steps { grid-template-columns: 1fr; gap: 0; }
  .hf-steps::before, .hf-steps::after { top: 22px; bottom: 22px; left: 22px; right: auto; width: 1px; height: auto; }
  .hf-steps::after { transform-origin: center top; transform: scaleY(0); background: linear-gradient(180deg, var(--hf-accent), var(--hf-accent-soft)); }
  .hf-steps.is-in::after { transform: scaleY(1); }
  .hf-step { display: grid; grid-template-columns: 45px 1fr; column-gap: 22px; padding-bottom: 34px; }
  .hf-step h3 { margin-top: 10px; }
  .hf-step p { grid-column: 2; }
  .hf-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-work > :first-child { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 767px) {
  .hf-wrap { padding: 0 16px; }
  .hf-section { padding: 72px 0; }
  .hf-section--tight { padding: 48px 0; }
  .hf-hero { padding: 128px 0 64px; }
  .hf-section-head { margin-bottom: 40px; }
  .hf-bento > *, .hf-bento > :nth-child(n) { grid-column: 1 / -1; }
  .hf-offer .hf-core { min-height: 0; padding: 28px 24px 30px; }
  .hf-work { grid-template-columns: 1fr; }
  .hf-work > :first-child { grid-column: auto; }
  .hf-work > :first-child .hf-case-media { aspect-ratio: 16 / 10; min-height: 0; flex: none; }
  .hf-services-grid { grid-template-columns: 1fr; }
  .hf-services-grid > :first-child { grid-row: auto; }
  .hf-services-grid > :first-child .hf-core { min-height: 0; }
  .hf-service .hf-core { padding: 28px 24px; }
  .hf-service-media { margin: -28px -24px 24px; }
  .hf-stats { gap: 10px; }
  .hf-stat .hf-core { padding: 22px 18px; }
  .hf-btn { padding-left: 20px; }
  .hf-actions { gap: 10px; }
  .hf-faq summary { padding: 20px; font-size: 16.5px; }
  .hf-faq-answer { padding: 0 20px 22px; }
  .hf-orb--a { width: 480px; height: 480px; margin-left: -300px; }
  .hf-orb--b { width: 360px; height: 360px; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-ui *, .hf-ui *::before, .hf-ui *::after { animation: none !important; transition: none !important; }
  .hf-js .hf-reveal { opacity: 1; transform: none; filter: none; }
  .hf-steps::after { transform: none; }
}

/* The blog's rich-text styles target every link and paragraph; keep the CTA's own. */
.blog-rich-text .hf-post-cta a { border: 0; text-decoration: none; }
.blog-rich-text .hf-post-cta .hf-actions { margin-bottom: 0; }

/* =========================================================================
   Homepage: dark hero with a drifting strip of shipped products
   ========================================================================= */

/* ---- Dark navbar mode: <body class="hf-dark-hero"> ----
   The template's homepage nav was built for a white hero: a script adds
   .navbar-at-top near the top of the page and the Webflow stylesheet then
   forces the light state with !important. These rules outrank it in every
   state. In this template the `.black` link variant is the one meant for dark
   backgrounds (white text). */
.hf-dark-hero .navbar.white,
.hf-dark-hero .navbar.white.navbar-at-top {
  background: rgba(6, 6, 8, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hf-dark-hero .navbar.white .hero-nav-link:not(.black),
.hf-dark-hero .navbar.white.navbar-at-top .hero-nav-link:not(.black) { display: none !important; }
.hf-dark-hero .navbar.white .hero-nav-link.black,
.hf-dark-hero .navbar.white.navbar-at-top .hero-nav-link.black { display: flex !important; opacity: 1 !important; }
.hf-dark-hero .navbar.white .hero-nav-link.black .nav-text,
.hf-dark-hero .navbar.white.navbar-at-top .hero-nav-link.black .nav-text { color: #fff !important; }
.hf-dark-hero .navbar.white .hero-nav-link.black.w--current .nav-text,
.hf-dark-hero .navbar.white.navbar-at-top .hero-nav-link.black.w--current .nav-text { color: #c79cff !important; }
.hf-dark-hero .navbar.white .nav-brand-logo.onwhite,
.hf-dark-hero .navbar.white.navbar-at-top .nav-brand-logo.onwhite { display: none !important; }
.hf-dark-hero .navbar.white .nav-brand-logo.onblack,
.hf-dark-hero .navbar.white.navbar-at-top .nav-brand-logo.onblack { display: block !important; }
.hf-dark-hero .navbar.white .start-button.white-nav,
.hf-dark-hero .navbar.white.navbar-at-top .start-button.white-nav {
  background: #fff !important;
  background-image: none !important;
  color: #0a0a0b !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 34px -12px rgba(173, 104, 243, 0.8);
}
.hf-dark-hero .menu-button-2 {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
}
.hf-dark-hero .menu-button-2.w--open,
.hf-dark-hero .menu-button-2:hover {
  background-color: rgba(173, 104, 243, 0.22) !important;
  border-color: rgba(173, 104, 243, 0.55) !important;
}
.hf-dark-hero .menu-icon-2 { filter: invert(1); }
/* Open mobile menu (Webflow moves it into .w-nav-overlay with this attribute) */
.hf-dark-hero .nav-menu-holder[data-nav-menu-open] {
  background: #08080a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

/* The template only shows its mobile logo below 480px, but the nav collapses
   at 991px, so tablets and large phones had no logo at all. Same placement as
   the template's own small-phone rule. */
@media (min-width: 480px) and (max-width: 991px) {
  .hf-dark-hero .nav-brand-logo.mobilenavbarlogo {
    display: block !important;
    position: absolute;
    inset: 0% auto auto 0%;
    max-height: 60px;
  }
}

/* ---- Hero ---- */
.hf-home-hero {
  position: relative;
  overflow: hidden;
  padding: 176px 0 76px;
  /* Same black as the sections below, so there is no seam; the orbs and grid
     provide the glow and fade out on their own. */
  background: #000;
  text-align: center;
}
.hf-home-hero .hf-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hf-home-hero .hf-wrap { z-index: 1; }
.hf-home-hero h1.hf-display { margin: 26px auto 0; max-width: 1100px; font-size: clamp(44px, 6.6vw, 96px); }
.hf-home-hero h1 em {
  font-style: normal;
  background: linear-gradient(92deg, #f1e6ff 0%, #c79cff 45%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hf-br-m { display: none; }
.hf-home-hero .hf-lead { margin-left: auto; margin-right: auto; }
.hf-home-hero .hf-actions,
.hf-home-hero .hf-trustline { justify-content: center; }
.hf-home-hero .hf-trustline li span { color: var(--hf-faint); }

/* ---- Product strip ---- */
.hf-showcase {
  position: relative;
  margin-top: 84px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hf-showcase-track {
  display: flex;
  gap: 18px;
  width: max-content;
  /* Constant speed is the point of a marquee, so this one is linear */
  animation: hf-showcase-scroll 70s linear infinite;
}
.hf-showcase:hover .hf-showcase-track { animation-play-state: paused; }
@keyframes hf-showcase-scroll { to { transform: translate3d(-50%, 0, 0); } }

.hf-shot { width: 340px; flex: none; text-align: left; }
.hf-shot .hf-core { display: block; }
.hf-shot-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111114; }
.hf-shot-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--hf-ease-out);
}
.hf-shot:hover .hf-shot-media img { transform: scale(1.05); }
.hf-shot-cap { padding: 16px 18px 18px; }
.hf-shot-cap span {
  display: block; color: var(--hf-accent-soft); font-size: 11px; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
}
.hf-shot-cap strong { display: block; margin-top: 6px; color: #fff; font-size: 15.5px; line-height: 1.3; font-weight: 700; }

@media (max-width: 767px) {
  .hf-home-hero { padding: 120px 0 56px; }
  .hf-home-hero h1.hf-display { font-size: clamp(36px, 11vw, 46px); line-height: 1.04; }
  .hf-br-m { display: inline; }
  .hf-home-hero .hf-lead { font-size: 16.5px; }
  /* Full-width, stacked buttons */
  .hf-home-hero .hf-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 32px; }
  .hf-home-hero .hf-btn { justify-content: space-between; }
  .hf-home-hero .hf-btn--ghost { justify-content: center; }
  /* Trust line becomes a three-column stat row */
  .hf-home-hero .hf-trustline {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    margin-top: 32px; padding: 16px 4px; border-top: 1px solid var(--hf-line); border-bottom: 1px solid var(--hf-line);
  }
  .hf-home-hero .hf-trustline li { flex-direction: column; gap: 4px; padding: 0 6px; }
  .hf-home-hero .hf-trustline li + li { border-left: 1px solid var(--hf-line); }
  .hf-home-hero .hf-trustline svg { display: none; }
  .hf-home-hero .hf-trustline strong { display: block; font-size: 20px; letter-spacing: -0.02em; }
  .hf-home-hero .hf-trustline span { font-size: 12px; line-height: 1.35; }
  .hf-showcase { margin-top: 44px; }
  .hf-shot { width: 264px; }
  .hf-showcase-track { gap: 12px; animation-duration: 55s; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-js .hf-dist-bar i { transform: scaleX(var(--w, 0)); }
  .hf-showcase-track { animation: none; }
  .hf-showcase { overflow-x: auto; }
}

/* =========================================================================
   Homepage: verified client reviews (quotes from Freelancer.com)
   ========================================================================= */
.hf-proof .hf-section-head { margin-bottom: 56px; }
.hf-proof-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.hf-proof-grid > .hf-rating { grid-column: span 4; grid-row: span 2; }
.hf-proof-grid > .hf-quote--feature { grid-column: span 8; }
.hf-proof-grid > .hf-quote--small { grid-column: span 4; }

.hf-quote,
.hf-rating { text-align: left; }
.hf-quote .hf-core,
.hf-rating .hf-core { padding: 34px 34px 30px; display: flex; flex-direction: column; }

.hf-quote-mark {
  display: block;
  height: 46px;
  font-size: 96px;
  line-height: 0.9;
  font-weight: 800;
  background: linear-gradient(180deg, #d6bcff, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hf-quote blockquote {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: 19px;
  font-style: normal;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.hf-quote--feature blockquote { font-size: clamp(22px, 2.3vw, 31px); line-height: 1.32; letter-spacing: -0.02em; }

.hf-quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 30px;
}
.hf-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(173, 104, 243, 0.35), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(173, 104, 243, 0.4);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.hf-quote figcaption,
.hf-quote-who { min-width: 0; text-align: left; }
.hf-quote-who strong { display: block; color: #fff; font-size: 15px; font-weight: 700; }
.hf-quote-who a {
  display: block;
  margin-top: 3px;
  color: var(--hf-accent-soft);
  font-size: 13.5px;
  line-height: 1.4;
  border-bottom: 0;
}
.hf-quote-who a:hover { color: #fff; }
.hf-quote .hf-verified { position: absolute; top: 34px; right: 34px; }
.hf-verified {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #8ef0c4;
  font-size: 12px;
  font-weight: 500;
}

.hf-stars { color: #f5c76b; font-size: 15px; letter-spacing: 3px; }
.hf-rating .hf-stat-value { margin-top: 14px; font-size: clamp(64px, 6vw, 96px); }
.hf-rating .hf-stars { display: block; }

/* Rating breakdown: every review is five stars */
/* Centred in the space the tall card leaves, so the spacing stays even */
.hf-dist { margin: auto 0; padding: 26px 0; list-style: none; display: grid; gap: 9px; }
.hf-dist li { display: grid; grid-template-columns: 24px 1fr 30px; align-items: center; gap: 12px; color: var(--hf-faint); font-size: 13px; }
.hf-dist-bar { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.hf-dist-bar i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #d6bcff);
  transform-origin: left center;
  transform: scaleX(var(--w, 0));
}
.hf-js .hf-dist-bar i { transform: scaleX(0); transition: transform 1.6s var(--hf-ease-out) 0.3s; }
.hf-js .hf-dist.is-in .hf-dist-bar i { transform: scaleX(var(--w, 0)); }
.hf-dist li span:last-child { text-align: right; }
.hf-rating-label { margin: 10px 0 0; color: var(--hf-muted); font-size: 15.5px; line-height: 1.5; }
.hf-rating-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding-top: 22px;
  border-top: 1px solid var(--hf-line);
  color: var(--hf-muted);
  font-size: 14px;
  line-height: 1.4;
}
.hf-rating-badge strong { color: #fff; font-weight: 700; }
.hf-rating .hf-actions { margin-top: 24px; }

@media (max-width: 991px) {
  .hf-proof-grid > .hf-rating { grid-column: span 12; grid-row: auto; }
  .hf-proof-grid > .hf-quote--feature { grid-column: span 12; }
  .hf-proof-grid > .hf-quote--small { grid-column: span 6; }
  .hf-rating .hf-stat-value { margin-top: 18px; }
}
@media (max-width: 767px) {
  .hf-proof-grid > .hf-quote--small { grid-column: span 12; }
  .hf-proof-grid > .hf-quote--feature { order: -1; }
  .hf-quote .hf-core, .hf-rating .hf-core { padding: 26px 22px 24px; }
  .hf-quote .hf-verified { top: 26px; right: 22px; }
}

/* =========================================================================
   Homepage: how we work + booking (Calendly)
   ========================================================================= */
.hf-step-kicker {
  display: block;
  margin-top: 24px;
  color: var(--hf-accent-soft);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hf-step-kicker + h3 { margin-top: 8px; }

.hf-book {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
  margin-top: 112px;
  text-align: left;
}
.hf-book-aside { position: sticky; top: 120px; }
.hf-book-aside .hf-h2 { font-size: clamp(30px, 3.2vw, 46px); }

.hf-checklist { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.hf-checklist li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.hf-check {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; line-height: 0;
  background: rgba(173, 104, 243, 0.12); border: 1px solid rgba(173, 104, 243, 0.32); color: var(--hf-accent-soft);
}
.hf-checklist strong { display: block; color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.hf-checklist span { display: block; margin-top: 4px; color: var(--hf-muted); font-size: 15px; line-height: 1.55; }

.hf-book-alt { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--hf-line); color: var(--hf-faint); font-size: 14.5px; line-height: 1.6; }
.hf-book-alt a { color: var(--hf-accent-soft); border-bottom: 1px solid rgba(214, 188, 255, 0.35); }

#book { scroll-margin-top: 100px; }
.hf-cal .hf-core { padding: 0; }
.hf-cal-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--hf-line);
  color: var(--hf-faint); font-size: 13px;
}
.hf-cal-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.hf-cal-bar b { margin-left: 10px; color: #fff; font-weight: 500; }
.hf-cal-tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.hf-cal-tags span {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--hf-accent-soft);
  background: rgba(173, 104, 243, 0.1); border: 1px solid rgba(173, 104, 243, 0.25);
}
/* Calendly renders its own white card inside a transparent iframe; the frame
   around it is ours. Colors can't be themed on the current Calendly plan. */
.hf-cal .calendly-inline-widget { height: 700px; min-width: 300px; background: #fff; }
.hf-check svg { display: block; }

@media (max-width: 991px) {
  /* Vertical timeline: the number spans the rows, all text stays in column 2 */
  .hf-step > :not(.hf-step-num) { grid-column: 2; }
  .hf-step-num { grid-row: 1 / span 3; }
  .hf-step-kicker { margin-top: 13px; }
  .hf-book { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; }
  .hf-book-aside { position: static; }
}
@media (max-width: 767px) {
  .hf-book { margin-top: 64px; }
  .hf-cal-bar { padding: 12px 14px; }
  .hf-cal-bar b { margin-left: 4px; }
  .hf-cal-tags { margin-left: 0; width: 100%; }
  .hf-cal .calendly-inline-widget { height: 680px; }
}