/* MF Hero Designs — v3 (light + violet) and v4 (card + blue band)
   Fonts loaded by the plugin from Google Fonts. */

/* ===================== SHARED ===================== */
.mfhd { --hd-ink: #0E1018; --hd-body: #4C5363; --hd-muted: #8A90A0; }

.mfhd-pill { display:inline-flex;align-items:center;gap:10px;font-size:13.5px;padding:6px 7px;
  border-radius:999px;text-decoration:none;transition:border-color .18s,color .18s }
.mfhd-pill__tag { font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:999px }
.mfhd-pill__arr { padding-right:9px;display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1) }
.mfhd-pill:hover .mfhd-pill__arr { transform:translateX(6px) }

.mfhd-btn { display:inline-block;font-size:15px;font-weight:600;padding:14px 28px;
  border-radius:999px;text-decoration:none;transition:background .16s,transform .12s,box-shadow .2s }
.mfhd-btn:active { transform:translateY(1px) }

@keyframes mfhdRise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@media(prefers-reduced-motion:no-preference){
  .mfhd [data-hs] { animation:mfhdRise .56s cubic-bezier(.16,1,.3,1) both }
  .mfhd [data-hs="1"]{animation-delay:40ms} .mfhd [data-hs="2"]{animation-delay:100ms}
  .mfhd [data-hs="3"]{animation-delay:160ms} .mfhd [data-hs="4"]{animation-delay:220ms}
  .mfhd [data-hs="5"]{animation-delay:280ms} .mfhd [data-hs="6"]{animation-delay:340ms}
}

/* ===================== V3 — LIGHT VIOLET ===================== */
.mfhd--v3 { position:relative;background:#0B0D18;overflow:hidden;padding:0!important }
.mfhd--v3, .mfhd--v3 a { color:#fff }

.mfhd-v3__bg { position:absolute;inset:0;pointer-events:none }
.mfhd-v3__orb { position:absolute;left:50%;top:-120px;width:1500px;height:900px;transform:translateX(-50%);
  background:radial-gradient(45% 50% at 50% 42%,rgba(123,97,255,.5),transparent 70%),
  radial-gradient(60% 55% at 22% 78%,rgba(58,54,201,.42),transparent 72%) }
.mfhd-v3__grid { position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(110% 70% at 50% 0%,#000 25%,transparent 80%) }
.mfhd-v3__fade { position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(to bottom,transparent,rgba(250,250,252,.08) 55%,#FAFAFC) }

.mfhd-v3__hero { position:relative;max-width:1220px;margin:0 auto;padding:74px 28px 150px;text-align:center }

.mfhd--v3 .mfhd-pill { color:#DCDAF8;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06) }
.mfhd--v3 .mfhd-pill:hover { border-color:rgba(255,255,255,.4);color:#fff }
.mfhd--v3 .mfhd-pill__tag { background:#5B59F5 }

.mfhd-v3__h1 { margin:28px auto 0;max-width:18ch;font-size:clamp(38px,6.1vw,72px);line-height:1.03;
  letter-spacing:-.04em;font-weight:600;color:#fff }
.mfhd-v3__h1 em, .mfhd-v3__h1 .grad-text { font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-style:italic;letter-spacing:-.015em;color:#CFCBFF;background:none;-webkit-text-fill-color:unset }
.mfhd-v3__sub { margin:24px auto 0;max-width:50ch;font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;color:#B8B6D4 }

.mfhd-v3__finder { margin:38px auto 0;max-width:800px;text-align:left }
.mfhd-v3__cta { margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px }

.mfhd-btn--v3 { background:#5B59F5;color:#fff;box-shadow:0 10px 24px -10px rgba(91,89,245,.9) }
.mfhd-btn--v3:hover { background:#4947E8 }
.mfhd-btn--ghost { color:#DCDAF8;border:1px solid rgba(255,255,255,.3);background:transparent }
.mfhd-btn--ghost:hover { border-color:#fff;color:#fff }

.mfhd-v3__caps { margin-top:30px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#9A97C0 }
.mfhd-v3__links { margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:14px }
.mfhd-v3__links a { color:#DCDAF8;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px }
.mfhd-v3__links a:hover { color:#fff;border-color:#fff }
.mfhd-v3__dot { color:#56527F }

.mfhd-v3__statbar { display:grid;grid-template-columns:repeat(4,1fr);max-width:1220px;margin:-104px auto 0;
  padding:0 28px;position:relative;z-index:5 }
.mfhd-v3__statbar > div { background:#17142E;padding:30px 26px }
.mfhd-v3__statbar > div + div { border-left:1px solid rgba(255,255,255,.09) }
.mfhd-v3__statbar > :first-child { border-radius:24px 0 0 24px }
.mfhd-v3__statbar > :last-child { border-radius:0 24px 24px 0 }
.mfhd-v3__stat-val { display:block;font-size:clamp(28px,3vw,38px);line-height:1;letter-spacing:-.035em;
  color:#fff;font-weight:500;font-variant-numeric:tabular-nums }
.mfhd-v3__stat-lbl { display:block;margin-top:9px;font-size:13.5px;color:#A8A6C4 }

/* ===================== V4 — CARD + BLUE BAND ===================== */
.mfhd--v4 { position:relative;overflow:hidden;padding-bottom:0!important }
.mfhd--v4 { font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--hd-ink) }
.mfhd--v4 a { color:var(--hd-ink);text-decoration:none }

.mfhd-v4__orb { position:absolute;right:-6%;top:-10%;width:720px;height:720px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(26,82,214,.1),transparent 70%) }

.mfhd-v4__grid { position:relative;max-width:1220px;margin:0 auto;padding:46px 36px 72px;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px;align-items:center }

.mfhd--v4 .mfhd-pill--v4 { color:var(--hd-ink);background:#fff;border:none;
  box-shadow:0 10px 24px -16px rgba(12,18,32,.6) }
.mfhd--v4 .mfhd-pill__tag--v4 { background:#1A52D6 }

.mfhd-v4__h1 { margin:26px 0 0;font-size:clamp(38px,5.4vw,66px);line-height:1.04;
  letter-spacing:-.045em;font-weight:800;color:var(--hd-ink);max-width:13ch }
.mfhd-v4__h1 .grad-text { color:#1A52D6;background:none;-webkit-text-fill-color:unset }

.mfhd-v4__sub { margin:28px 0 0;font-size:clamp(16px,1.5vw,18px);line-height:1.65;
  color:var(--hd-body);max-width:44ch }

.mfhd-v4__finder { margin-top:30px;max-width:560px }

.mfhd-v4__cta { margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px }
.mfhd-v4__micro { font-size:13.5px;color:var(--hd-muted) }
.mfhd-btn--v4 { background:var(--hd-ink);color:#fff }
.mfhd-btn--v4:hover { background:#1e2130 }

.mfhd-v4__caps { margin-top:28px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--hd-muted) }

.mfhd-v4__visual { position:relative;aspect-ratio:1/1;max-height:560px }
.mfhd-v4__img-wrap { position:absolute;inset:0;border-radius:30px;overflow:hidden;background:#E7EEFC }
.mfhd-v4__img-glow { position:absolute;inset:8% 6%;border-radius:40px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(26,82,214,.14),transparent 70%) }

.mfhd-v4__statband { display:grid;grid-template-columns:repeat(4,1fr);background:#1A52D6;color:#fff }
.mfhd-v4__stat { padding:30px 28px;display:flex;align-items:baseline;gap:14px }
.mfhd-v4__stat + .mfhd-v4__stat { border-left:1px solid rgba(255,255,255,.18) }
.mfhd-v4__stat-val { font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.045em;
  font-weight:800;font-variant-numeric:tabular-nums }
.mfhd-v4__stat-lbl { font-size:13px;line-height:1.35;color:#D4E0FA;max-width:12ch }

/* ===================== RESPONSIVE ===================== */
@media(max-width:980px){
  .mfhd-v4__grid { grid-template-columns:1fr!important;gap:36px!important }
  .mfhd-v4__visual { max-height:320px;aspect-ratio:16/10 }
}
@media(max-width:620px){
  .mfhd-v3__statbar { grid-template-columns:1fr 1fr }
  .mfhd-v3__statbar > div + div { border-left:0 }
  .mfhd-v3__statbar > :first-child { border-radius:24px 0 0 0 }
  .mfhd-v3__statbar > :nth-child(2) { border-radius:0 24px 0 0 }
  .mfhd-v3__statbar > :nth-child(3) { border-radius:0 }
  .mfhd-v3__statbar > :last-child { border-radius:0 0 24px 0 }
  .mfhd-v3__hero { padding:48px 20px 120px }
  .mfhd-v4__statband { grid-template-columns:1fr 1fr }
  .mfhd-v4__stat + .mfhd-v4__stat { border-left:0 }
  .mfhd-v4__grid { padding:32px 20px 48px }
}