/* ════════════════════════════════════════════════════════════════
   MKFLOW — sezione servizi a scorrimento (Miketing)
   Tutto è prefissato .mkf: non tocca il resto della home.
   ════════════════════════════════════════════════════════════════ */
.mkf{--mkf-ink:#f3f1ea;--mkf-dim:rgba(243,241,234,.62);--mkf-acc:#e5d502;
  position:relative;background:#000;color:var(--mkf-ink);
  font-family:"Inter Tight",system-ui,-apple-system,sans-serif}
.mkf[data-ink="dark"]{--mkf-ink:#11110f;--mkf-dim:rgba(17,17,15,.66)}
.mkf-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}

/* livelli: 1 fotogrammi · 2 parola gigante · 3 oggetto scontornato · 4 effetti · 5 interfaccia */
.mkf-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.mkf-word{position:absolute;left:0;right:0;z-index:2;pointer-events:none;white-space:nowrap;
  text-align:center;font-weight:800;letter-spacing:-.055em;line-height:.8;
  transform:translate3d(0,-50%,0);will-change:transform,opacity;opacity:0}
.mkf-word span{display:inline-block}
.mkf-cut{position:absolute;z-index:3;pointer-events:none;opacity:0;will-change:opacity}
.mkf-fx{position:absolute;z-index:4;pointer-events:none}

/* blocco testo del servizio */
.mkf-copy{position:absolute;z-index:5;left:clamp(16px,5vw,72px);bottom:clamp(36px,10vh,110px);
  width:min(430px,calc(100% - 32px));color:var(--mkf-ink);transition:color .3s}
.mkf-step{position:absolute;left:0;bottom:0;width:100%;visibility:hidden}
.mkf-step.is-on{visibility:visible}
.mkf-line{display:block;overflow:hidden;padding-bottom:.08em}
.mkf-line > *{display:block;transform:translate3d(0,110%,0);will-change:transform}
.mkf-n{font:400 12px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mkf-dim)}
.mkf-n b{font-weight:400;color:var(--mkf-ink)}
.mkf-step h3{margin:.25em 0 .3em;font-weight:500;font-size:clamp(34px,4.4vw,64px);line-height:.95;letter-spacing:-.04em}
.mkf-step h3 em{font-style:italic;font-weight:300}
.mkf-step p{margin:0 0 18px;font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--mkf-dim);max-width:36ch}
.mkf-link{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;
  border:1px solid currentColor;color:var(--mkf-ink);text-decoration:none;font-size:14px;font-weight:500;
  pointer-events:auto;transition:background .3s,color .3s,border-color .3s}
.mkf-link:hover,.mkf-link:focus-visible{background:var(--mkf-acc);border-color:var(--mkf-acc);color:#11110f;outline:none}

/* indice laterale e salta */
.mkf-rail{position:absolute;z-index:5;right:clamp(16px,3.5vw,52px);top:50%;transform:translateY(-50%);
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.mkf-rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  font:400 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mkf-dim);transition:color .3s}
.mkf-rail button::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;transition:transform .35s,background .35s}
.mkf-rail button.is-on{color:var(--mkf-ink)}
.mkf-rail button.is-on::after{transform:scale(1.7)}
.mkf-rail button:focus-visible{outline:1px solid currentColor;outline-offset:6px}
.mkf-skip{position:absolute;z-index:5;right:clamp(16px,3.5vw,52px);bottom:clamp(20px,4vh,40px);
  font:400 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mkf-dim);text-decoration:none;transition:color .3s}
.mkf-skip:hover{color:var(--mkf-ink)}
.mkf-bar{position:absolute;z-index:5;left:0;bottom:0;height:2px;width:100%;background:rgba(127,127,127,.18)}
.mkf-bar i{display:block;height:100%;background:var(--mkf-acc);transform-origin:0 50%;transform:scaleX(0)}

/* effetti agganciati all'oggetto: coordinate in % del fotogramma 1600×900 */
.mkf-stage{position:absolute;z-index:4;pointer-events:none}
.mkf-stage > *{position:absolute}

/* social: notifiche */
.mkf-note{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;
  background:rgba(17,17,15,.86);color:#f3f1ea;font-size:13px;line-height:1.25;white-space:nowrap;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translate3d(0,14px,0) scale(.96)}
.mkf-note i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e5d502;color:#11110f;font-style:normal;font-weight:700}
.mkf-note b{display:block;font-weight:600}
.mkf-note small{color:rgba(243,241,234,.6);font-size:12px}

/* marketing: circuiti */
.mkf-wires{position:absolute;z-index:4;pointer-events:none;overflow:visible}
.mkf-wires path{fill:none;stroke:#5aa8ff;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(90,168,255,.8))}
.mkf-wires circle{fill:#bfe0ff}
.mkf-tag{font:400 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#dbeeff;padding:8px 12px;border:1px solid rgba(120,180,255,.45);border-radius:999px;background:rgba(0,10,30,.55);
  white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.9)}

/* web: ricerca */
.mkf-query{display:flex;align-items:center;color:#fff;font-weight:400;letter-spacing:-.01em;white-space:nowrap;transform:translateY(-50%)}
.mkf-query::after{content:"";width:.07em;height:1.05em;margin-left:.06em;background:#fff;animation:mkf-blink 1s steps(1) infinite}
.mkf-patch{transform:translateY(-50%);background:linear-gradient(#000b3a,#001b5c)}
@keyframes mkf-blink{50%{opacity:0}}
.mkf-result{width:47%;padding:1.5% 1.8%;border-radius:18px;background:rgba(255,255,255,.97);color:#202124;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);opacity:0;transform:translate3d(0,-12px,0);font-family:Arial,Helvetica,sans-serif}
.mkf-result .mkf-src{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.3}
.mkf-result .mkf-fav{flex:none;width:28px;height:28px;border-radius:50%;background:#11110f;display:grid;place-items:center}
.mkf-result .mkf-fav svg{width:15px;height:15px;fill:#e5d502}
.mkf-result small{display:block;color:#4d5156;font-size:12px}
.mkf-result h4{margin:8px 0 4px;font-size:19px;font-weight:400;line-height:1.3;color:#1a0dab}
.mkf-result p{margin:0;font-size:13px;line-height:1.5;color:#4d5156}

/* ingresso nel sito */
.mkf-door{position:absolute;z-index:6;inset:0;background:#11110f;color:#f3f1ea;opacity:0;visibility:hidden;
  display:grid;place-items:center;text-align:center;padding:0 16px;overflow:hidden}
.mkf-door-in{max-width:900px;will-change:transform}
.mkf-door svg{width:56px;height:auto;fill:#e5d502;margin:0 auto 22px;display:block}
.mkf-door p{font:400 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.6);margin:0}
.mkf-door h2{font-weight:500;font-size:clamp(36px,6vw,92px);line-height:.95;letter-spacing:-.045em;margin:.3em 0 .35em}
.mkf-door h2 em{font-style:italic;font-weight:300;color:#e5d502}

/* smartphone */
@media (max-width:760px){
  .mkf-copy{bottom:28px}
  .mkf-step h3{font-size:36px}
  .mkf-step p{font-size:15px;margin-bottom:14px}
  .mkf-rail{top:auto;transform:none;bottom:auto;top:84px;right:14px;flex-direction:row;gap:8px}
  .mkf-rail button{font-size:0;gap:0}
  .mkf-skip{top:86px;bottom:auto;right:auto;left:16px}
  .mkf-note{font-size:12px;padding:8px 11px 8px 8px}
  .mkf-note i{width:24px;height:24px}
  .mkf-tag{font-size:10px;padding:6px 9px}
  .mkf-result{width:84%}
  .mkf-result h4{font-size:15px}
  .mkf-result p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mkf-query::after{animation:none}
}
/* arrivo su un servizio: il punto dell'indice "batte" una volta */
.mkf-rail button.is-on::after{animation:mkf-arrive .7s cubic-bezier(.2,.8,.2,1)}
@keyframes mkf-arrive{0%{transform:scale(1)}45%{transform:scale(2.6)}100%{transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.mkf-rail button.is-on::after{animation:none}}
/* protezioni contro gli stili generici della home */
.mkf{margin:0;padding:0;border:0;max-width:none}
.mkf .mkf-step h3{color:var(--mkf-ink);font-family:inherit;text-transform:none}
.mkf .mkf-step p{color:var(--mkf-dim)}
.mkf .mkf-door h2{color:#f3f1ea}
.mkf .mkf-door p{color:rgba(243,241,234,.6)}
.mkf canvas{max-width:none}