/* ============================================================
   másfollowers — homepage.css
   Hero + strip + USPs + dynamic services + how + testimonials
   + FAQ + CTA. Depends on theme_style.css for variables.
   ============================================================ */

.mf-home{background:var(--mf-cream);color:var(--mf-ink);}

/* ===== HERO ===== */
.mf-hero{
  padding:96px 0;
  position:relative;
  overflow:hidden;
}
.mf-hero-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:56px;
  align-items:center;
}
.mf-hero .mf-eyebrow{margin-bottom:24px;}
.mf-hero h1{
  font-size:clamp(48px,6.4vw,88px);
  line-height:.95;letter-spacing:-.045em;
  font-weight:800;font-stretch:80%;
  margin:0 0 24px;
  color:var(--mf-ink);
}
.mf-hero h1 .acc{
  color:var(--mf-orange);
  position:relative;
  display:inline-block;
}
.mf-hero h1 .acc::before{
  content:"";
  position:absolute;
  left:14%;top:-10%;
  width:48%;height:14%;
  background:var(--mf-orange);
  border-radius:4px;
  transform:rotate(-18deg);
}
.mf-hero p.lede{
  font-size:19px;line-height:1.5;
  color:var(--mf-ink-2);
  max-width:520px;
  margin:0 0 32px;
}
.mf-hero-actions{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.mf-trust{
  margin-top:32px;
  display:flex;align-items:center;gap:18px;
  font-size:13px;color:var(--mf-ink-2);
}
.mf-avatars{display:flex;}
.mf-avatars span{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--mf-cream);
  margin-left:-8px;
  background:var(--mf-amber);
  display:grid;place-items:center;
  font-size:10px;font-weight:800;color:var(--mf-ink);
}
.mf-avatars span:first-child{margin-left:0;background:var(--mf-orange);color:#fff;}
.mf-avatars span:nth-child(2){background:#7CC4FF;}
.mf-avatars span:nth-child(3){background:#FFB627;}
.mf-avatars span:nth-child(4){background:#86E37B;}
.mf-stars{color:var(--mf-amber);font-weight:800;letter-spacing:1px;}

/* Hero card mockup */
.mf-hero-card{
  background:#fff;
  border-radius:var(--mf-radius-xl);
  padding:24px;
  box-shadow:var(--mf-shadow-lg);
  position:relative;
}
.mf-hc-tab{display:flex;gap:6px;margin-bottom:18px;}
.mf-hc-tab span{flex:1;height:6px;background:var(--mf-cream-2);border-radius:3px;}
.mf-hc-tab span.on{background:var(--mf-orange);}

.mf-hc-platform{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px;
  background:var(--mf-cream);
  border-radius:12px;
  margin-bottom:14px;
}
.mf-hc-platform-left{display:flex;align-items:center;gap:12px;}
.mf-hc-icon{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:13px;
  overflow:hidden;
}
.mf-hc-icon img{width:24px;height:24px;object-fit:contain;}
.mf-hc-platform-name{font-weight:700;font-size:14px;color:var(--mf-ink);}
.mf-hc-platform-sub{font-size:12px;color:var(--mf-ink-2);margin-top:2px;}
.mf-hc-pill{
  font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;
  background:#fff;color:var(--mf-ink);
  box-shadow:inset 0 0 0 1px var(--mf-line);
}

.mf-hc-counter{
  padding:18px;
  background:var(--mf-ink);
  color:#fff;
  border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.mf-hc-counter-num{
  font-size:32px;font-weight:800;font-stretch:80%;
  letter-spacing:-.03em;color:#fff;
}
.mf-hc-counter-num .arrow{color:var(--mf-amber);}
.mf-hc-counter-label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:700;
}
.mf-hc-bar{display:flex;align-items:flex-end;gap:6px;height:48px;width:108px;}
.mf-hc-bar i{flex:1;background:var(--mf-orange);border-radius:3px 3px 0 0;display:block;}
.mf-hc-bar i:nth-child(1){height:20%;}
.mf-hc-bar i:nth-child(2){height:35%;}
.mf-hc-bar i:nth-child(3){height:30%;}
.mf-hc-bar i:nth-child(4){height:55%;}
.mf-hc-bar i:nth-child(5){height:48%;}
.mf-hc-bar i:nth-child(6){height:72%;}
.mf-hc-bar i:nth-child(7){height:65%;background:var(--mf-amber);}
.mf-hc-bar i:nth-child(8){height:88%;background:var(--mf-amber);}
.mf-hc-bar i:nth-child(9){height:100%;background:var(--mf-amber);}

.mf-hero-badge{
  position:absolute;
  background:var(--mf-amber);color:var(--mf-ink);
  font-weight:800;font-size:13px;
  padding:10px 14px;border-radius:12px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.2);
  transform:rotate(-4deg);
  z-index:2;
}
.mf-hero-badge.tl{top:-22px;left:-14px;}
.mf-hero-badge.br{
  bottom:18px;right:-12px;
  background:var(--mf-ink);color:#fff;
  transform:rotate(3deg);
  display:inline-flex;align-items:center;gap:8px;
}
.mf-hero-badge.br .ck{
  width:18px;height:18px;border-radius:50%;
  background:var(--mf-orange);
  display:grid;place-items:center;
  color:#fff;font-size:11px;
}

/* ===== STRIP ===== */
.mf-strip{
  padding:24px 0;
  border-top:1px solid var(--mf-line);
  border-bottom:1px solid var(--mf-line);
  background:var(--mf-cream-2);
  overflow:hidden;
}
.mf-strip-track{
  display:flex;gap:56px;align-items:center;
  font-size:13px;font-weight:600;color:var(--mf-ink-2);
  white-space:nowrap;
  animation:mf-scroll 40s linear infinite;
  width:max-content;
}
.mf-strip-track b{color:var(--mf-ink);font-weight:800;letter-spacing:-.01em;}
@keyframes mf-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ===== USPs ===== */
.mf-usps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.mf-usp{
  background:#fff;
  border-radius:var(--mf-radius-lg);
  padding:28px;
  box-shadow:0 0 0 1px var(--mf-line);
  transition:transform .2s ease,box-shadow .2s ease;
}
.mf-usp:hover{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--mf-line),0 16px 32px -16px rgba(0,0,0,.12);
}
.mf-usp-icon{
  width:48px;height:48px;border-radius:12px;
  background:var(--mf-cream);
  display:grid;place-items:center;
  margin-bottom:18px;
}
.mf-usp h3{
  font-size:18px;font-weight:700;
  margin:0 0 6px;letter-spacing:-.01em;
  color:var(--mf-ink);
}
.mf-usp p{
  font-size:14px;line-height:1.5;
  color:var(--mf-ink-2);margin:0;
}

/* ===== SERVICES (dark card section) ===== */
.mf-svc-wrap{padding:80px 32px;}
.mf-svc-section{
  background:var(--mf-ink);
  color:#fff;
  border-radius:32px;
  padding:120px 64px;
  position:relative;
  overflow:hidden;
}
.mf-svc-section .mf-eye-c{color:var(--mf-amber);}
.mf-svc-section .mf-eye-c::before{background:var(--mf-amber);}
.mf-svc-section .mf-h2{color:#fff;}
.mf-svc-section .mf-lead{color:rgba(255,255,255,.7);}

.mf-svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.mf-svc{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:28px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
  cursor:pointer;
  color:#fff;
  display:block;
}
.mf-svc:hover{
  background:var(--mf-orange);
  border-color:var(--mf-orange);
  transform:translateY(-3px);
  color:#fff;
}
.mf-svc-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
}
.mf-svc-logo{
  width:44px;height:44px;border-radius:11px;
  display:grid;place-items:center;
  font-weight:800;color:#fff;font-size:14px;
  overflow:hidden;
}
.mf-svc-logo img{width:28px;height:28px;object-fit:contain;}
.mf-svc-logo.ig{background:linear-gradient(135deg,#F58529 0%,#DD2A7B 50%,#8134AF 100%);}
.mf-svc-logo.tk{background:#000;border:1px solid rgba(255,255,255,.2);}
.mf-svc-logo.yt{background:#FF0000;}
.mf-svc-logo.tw{background:#9146FF;}
.mf-svc-logo.fb{background:#1877F2;}
.mf-svc-logo.kk{background:#53FC18;color:#000;}
.mf-svc-logo.sp{background:#1DB954;}
.mf-svc-logo.xx{background:#000;border:1px solid rgba(255,255,255,.2);}
.mf-svc-logo.gn{background:linear-gradient(135deg,#FF4A1C,#FFB627);}

.mf-svc-arrow{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:grid;place-items:center;
  transition:background .2s ease,color .2s ease;
  font-size:18px;line-height:1;color:#fff;
}
.mf-svc:hover .mf-svc-arrow{background:#fff;color:var(--mf-orange);}

.mf-svc h3{
  font-size:22px;font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 6px;
  font-stretch:85%;
  color:#fff;
}
.mf-svc-list{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:16px;
}
.mf-svc-tag{
  font-size:11px;font-weight:600;
  background:rgba(255,255,255,.08);
  padding:4px 10px;border-radius:999px;
  color:rgba(255,255,255,.85);
}
.mf-svc:hover .mf-svc-tag{background:rgba(0,0,0,.18);color:#fff;}

.mf-svc-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;
  font-size:13px;font-weight:700;
  color:rgba(255,255,255,.75);
}
.mf-svc:hover .mf-svc-cta{color:#fff;}

.mf-svc-all{
  margin-top:40px;
  text-align:center;
}
.mf-svc-all .mf-btn{display:inline-flex;}

/* ===== HOW (3 steps) ===== */
.mf-how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  position:relative;
}
.mf-step{position:relative;}
.mf-step-num{
  font-size:88px;font-weight:800;font-stretch:80%;
  letter-spacing:-.06em;
  color:var(--mf-orange);
  line-height:1;
  margin-bottom:18px;
}
.mf-step h3{
  font-size:24px;font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 8px;
  color:var(--mf-ink);
}
.mf-step p{
  font-size:15px;line-height:1.5;
  color:var(--mf-ink-2);
  max-width:300px;
  margin:0;
}
.mf-step-arrow{
  position:absolute;top:32px;right:-12px;
  width:48px;color:var(--mf-orange);opacity:.3;
}

/* ===== TESTIMONIALS ===== */
.mf-t-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.mf-t-card{
  background:#fff;
  border-radius:var(--mf-radius-lg);
  padding:28px;
  box-shadow:0 0 0 1px var(--mf-line);
}
.mf-t-stars{
  color:var(--mf-amber);
  font-size:14px;letter-spacing:1px;
  margin-bottom:14px;
}
.mf-t-text{
  font-size:15px;line-height:1.55;
  margin:0 0 18px;
  color:var(--mf-ink);
}
.mf-t-author{display:flex;align-items:center;gap:12px;}
.mf-t-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--mf-orange);
  color:#fff;font-weight:800;font-size:14px;
  display:grid;place-items:center;
  overflow:hidden;
  flex:none;
}
.mf-t-avatar img{width:100%;height:100%;object-fit:cover;}
.mf-t-name{font-weight:700;font-size:14px;color:var(--mf-ink);}
.mf-t-handle{font-size:12px;color:var(--mf-ink-2);}

/* ===== FAQ ===== */
.mf-faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
}
.mf-faq-list{display:flex;flex-direction:column;gap:12px;}

.mf-home details.mf-faq{
  background:#fff;
  border-radius:14px;
  padding:20px 24px;
  box-shadow:0 0 0 1px var(--mf-line);
  transition:box-shadow .2s ease;
}
.mf-home details.mf-faq[open]{box-shadow:0 0 0 1px var(--mf-orange);}
.mf-home details.mf-faq summary{
  cursor:pointer;list-style:none;
  font-weight:700;font-size:16px;
  color:var(--mf-ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.mf-home details.mf-faq summary::-webkit-details-marker{display:none;}
.mf-home details.mf-faq summary::after{
  content:"+";font-size:24px;font-weight:300;
  transition:transform .2s ease;
  color:var(--mf-orange);line-height:1;
}
.mf-home details.mf-faq[open] summary::after{transform:rotate(45deg);}
.mf-home details.mf-faq p{
  margin:12px 0 0;
  font-size:14px;line-height:1.6;
  color:var(--mf-ink-2);
}

/* ===== CTA BIG ===== */
.mf-cta-wrap{padding:80px 32px;}
.mf-cta-big{
  background:var(--mf-orange);
  border-radius:32px;
  padding:120px 64px;
  text-align:center;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.mf-cta-big h2{
  font-size:clamp(40px,5vw,72px);
  font-stretch:80%;font-weight:800;
  letter-spacing:-.04em;line-height:.95;
  margin:0 0 18px;
  max-width:880px;margin-inline:auto;
  color:#fff;
}
.mf-cta-big p{
  font-size:18px;
  color:rgba(255,255,255,.85);
  margin:0 auto 32px;
  max-width:560px;
}
.mf-cta-deco{
  position:absolute;
  font-size:200px;
  opacity:.08;
  font-weight:800;font-stretch:80%;
  line-height:1;
  color:#fff;
  pointer-events:none;
  user-select:none;
}
.mf-cta-deco.l{left:-30px;bottom:-60px;}
.mf-cta-deco.r{right:-30px;top:-60px;}

/* ===== Responsive ===== */
@media (max-width:980px){
  .mf-hero{padding:64px 0;}
  .mf-hero-grid,
  .mf-usps,
  .mf-svc-grid,
  .mf-how-grid,
  .mf-t-grid,
  .mf-faq-grid{grid-template-columns:1fr;}

  .mf-svc-wrap,
  .mf-cta-wrap{padding:48px 16px;}

  .mf-svc-section,
  .mf-cta-big{padding:72px 28px;border-radius:24px;}

  .mf-step-arrow{display:none;}
  .mf-hero-badge.tl{top:-18px;left:0;}
  .mf-hero-badge.br{right:0;}
}
@media (max-width:520px){
  .mf-hero h1{font-size:clamp(36px,9vw,56px);}
  .mf-hero p.lede{font-size:17px;}
  .mf-svc-section,
  .mf-cta-big{padding:56px 20px;}
}