/* FunnelKit — steps.css : per-step visual styling. */

/* ---------- hero ---------- */
.fk-hero { justify-content: flex-end; align-items: center; text-align: center; padding: 0 24px 56px; }
.fk-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.fk-hero-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.92) 60%, #000); }
.fk-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.fk-hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.08; margin: 0 0 28px; }
.fk-hero-title em { font-style: normal; font-weight: 700; color: var(--accent); text-shadow: 0 0 30px var(--accent-glow); }
.fk-hero-hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font-display); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 22px; }
.fk-hero-hint .fk-icon { color: var(--accent-bright); }
.fk-hero .fk-btn-primary { width: 100%; }

/* ---------- fake call ---------- */
.fk-call { text-align: center; }
.fk-call-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.fk-call-grad { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.4), rgba(0,0,0,.9) 70%, #000); }
.fk-call-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 40px 24px; }
.fk-call-ring { position: relative; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; }
.fk-call-ring .fk-ping { position: absolute; inset: -6px; border-radius: 50%; background: rgba(37,211,102,.22); animation: fk-ping 1.6s ease-out infinite; }
.fk-call-ring.fk-answered .fk-ping { animation: none; box-shadow: 0 0 0 2px var(--wa-green); }
@keyframes fk-ping { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.fk-call-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; }
.fk-call-handle { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.fk-call-name { color: var(--muted); letter-spacing: .35em; text-transform: uppercase; font-size: 12px; margin-bottom: 22px; }
.fk-call-status { color: var(--wa-green); letter-spacing: .3em; text-transform: uppercase; font-size: 11px; }
.fk-call-timer { color: var(--wa-green); font-size: 13px; margin-bottom: 14px; }
.fk-call .fk-wave { color: var(--wa-green); justify-content: center; }
.fk-call-actions { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 3; display: flex; justify-content: center; }
.fk-call-answer { width: 66px; height: 66px; border-radius: 50%; background: var(--wa-green); color: #fff; border: 0; display: grid; place-items: center; box-shadow: 0 0 24px rgba(37,211,102,.5); animation: fk-bob 1.2s ease-in-out infinite; }
@keyframes fk-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ---------- audio note ---------- */
.fk-audionote { align-items: center; justify-content: center; text-align: center; }
.fk-audionote-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.fk-audionote-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 24px; width: 100%; }
.fk-audionote-center { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--accent-bright); transition: opacity .4s; }
.fk-audionote-center .fk-wave { color: var(--accent-bright); }
.fk-audionote-playing { color: var(--muted); letter-spacing: .35em; text-transform: uppercase; font-size: 10px; }

/* ---------- quiz ---------- */
.fk-quiz { align-items: center; justify-content: center; padding: 0 22px; text-align: center; }
.fk-quiz-card { position: relative; z-index: 2; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; transition: opacity .4s; }
.fk-quiz-badgeicon { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; color: var(--accent-bright); border: 1px solid rgba(127,29,29,.5); background: rgba(127,29,29,.1); box-shadow: 0 0 30px var(--accent-glow); margin-bottom: 16px; }
.fk-quiz-q { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 5.5vw, 1.8rem); line-height: 1.18; margin: 0 0 26px; }
.fk-quiz-opts { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.fk-quiz-opt { display: flex; align-items: center; gap: 14px; text-align: left; background: rgba(20,20,22,.72); border: 1px solid var(--line); color: #e5e7eb; padding: 15px 16px; border-radius: 10px; transition: border-color .25s, background .25s; }
.fk-quiz-opt:hover { border-color: rgba(127,29,29,.55); }
.fk-quiz-opt.is-selected { border-color: var(--accent-bright); background: rgba(127,29,29,.18); }
.fk-quiz-letter { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-display); font-size: 12px; color: var(--accent-bright); border: 1px solid rgba(127,29,29,.5); }
.fk-quiz-label { font-size: 14px; line-height: 1.35; }

/* ---------- video gate ---------- */
.fk-videogate { background: #000; }
.fk-videogate-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fk-videogate-loader { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--muted); letter-spacing: .3em; text-transform: uppercase; font-size: 11px; background: rgba(0,0,0,.5); }
.fk-videogate-gate { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; }
.fk-videogate-card { background: rgba(127,29,29,.92); padding: 26px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 4px; }
.fk-videogate-started { font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; }
.fk-videogate-tap { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
.fk-videogate-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background: rgba(255,255,255,.15); }
.fk-videogate-bar i { display: block; height: 100%; width: 0; background: var(--accent-bright); transition: width .2s linear; }

/* ---------- lock screen ---------- */
.fk-lock { color: #fff; }
.fk-lock-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.fk-lock-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.fk-lock-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: 64px 18px 28px; }
.fk-lock-clockwrap { text-align: center; margin-top: 30px; }
.fk-lock-date { letter-spacing: .35em; text-transform: uppercase; font-size: 11px; color: rgba(255,255,255,.85); margin-bottom: 4px; }
.fk-lock-time { font-weight: 300; font-size: 84px; line-height: 1; letter-spacing: -.02em; }
.fk-lock-notifs { margin-top: auto; }
.fk-lock-notif { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: rgba(30,30,32,.62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 0; border-radius: 18px; padding: 13px 14px; transition: opacity .4s, transform .4s; }
.fk-lock-appicon { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; display: grid; place-items: center; }
.fk-wa-icon { background: var(--wa-green); color: #fff; }
.fk-lock-notif-body { flex: 1; min-width: 0; }
.fk-lock-notif-top { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .05em; }
.fk-lock-sender { font-weight: 700; font-size: 14px; margin: 1px 0; }
.fk-lock-preview { display: flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255,255,255,.85); }

/* ---------- whatsapp chat ---------- */
.fk-wa { background: #0b141a; }
.fk-wa-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .12; z-index: 0; }
.fk-wa-header { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: #1f2c34; border-bottom: 1px solid rgba(0,0,0,.3); }
.fk-wa-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #334; }
.fk-wa-name { font-weight: 600; font-size: 15px; }
.fk-wa-status { font-size: 12px; color: var(--wa-green); }
.fk-wa-status.is-recording { color: #a78bfa; }
.fk-wa-brand { margin-left: auto; font-family: var(--font-display); font-size: 8px; letter-spacing: .3em; color: var(--muted-2); }
.fk-wa-thread { position: relative; z-index: 2; flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.fk-wa-encrypted { align-self: center; max-width: 88%; text-align: center; font-size: 12px; color: #ffe08a; background: rgba(50,42,18,.6); padding: 8px 12px; border-radius: 8px; }
.fk-wa-bubbles { display: flex; flex-direction: column; gap: 10px; }
.fk-wa-bubble { align-self: flex-start; display: flex; align-items: center; gap: 8px; background: #202c33; padding: 9px 10px; border-radius: 10px; max-width: 80%; }
.fk-wa-play { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); color: #d1d7db; border: 0; display: grid; place-items: center; flex: none; }
.fk-wa-wave { display: flex; flex-direction: column; gap: 3px; }
.fk-wa-wave .fk-wave { color: #8696a0; height: 22px; }
/* Voice notes show POSITION by filling bars up to the playhead (like WhatsApp),
   so the generic bouncing animation is suppressed here — it read as "recording"
   and carried no progress information. Bounce stays on the call / audio-note steps. */
.fk-wa-wave .fk-wave.is-playing span { animation: none; }
.fk-wa-wave .fk-wave span.played { background: var(--wa-green); opacity: 1; }
.fk-wa-dur { font-size: 10px; color: #8696a0; }
.fk-wa-bubava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; align-self: flex-end; }
.fk-wa-composer { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1f2c34; color: #8696a0; }
.fk-wa-input { flex: 1; background: #2a3942; border-radius: 18px; padding: 9px 14px; font-size: 13px; }
.fk-wa-cta { margin-top: 14px; display: flex; justify-content: center; }

/* ---------- tiktok ---------- */
.fk-tt { background: #000; }
.fk-tt-login { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 28px; }
.fk-tt-loginhead { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; justify-content: center; margin-bottom: 8px; }
.fk-tt-logo { font-size: 20px; }
.fk-tt-field label { display: block; font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.fk-tt-input { width: 100%; background: #1c1c1e; border: 1px solid var(--line); color: #fff; padding: 13px 14px; border-radius: 8px; font-size: 14px; }
.fk-tt-pwwrap { position: relative; }
.fk-tt-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); }
.fk-tt-login .fk-btn { width: 100%; margin-top: 6px; }
.fk-tt-feed { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.fk-tt-track { height: 100%; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.fk-tt-panel { position: relative; height: 100%; background: #000; }
.fk-tt-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fk-tt-playoverlay { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; background: rgba(0,0,0,.0); color: rgba(255,255,255,.85); border: 0; display: grid; place-items: center; transition: opacity .2s; }
.fk-tt-playoverlay.is-hidden { opacity: 0; pointer-events: none; }
.fk-tt-rail { position: absolute; right: 10px; bottom: 96px; z-index: 3; display: flex; flex-direction: column; gap: 20px; align-items: center; color: #fff; }
.fk-tt-railitem { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.fk-tt-railava { position: relative; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid #fff; }
.fk-tt-plus { position: absolute; margin-top: 34px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-bright); color: #fff; font-size: 13px; line-height: 18px; }
.fk-tt-caption { position: absolute; left: 14px; bottom: 92px; z-index: 3; max-width: 74%; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.fk-tt-user { font-weight: 700; margin-bottom: 4px; }
.fk-tt-hint { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 3; text-align: center; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.fk-tt-arrowup { display: block; animation: fk-bob 1.4s infinite; }
/* dark "scroll up" overlay shown when a (non-last) video finishes */
.fk-tt-endscroll { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,.62); color: #fff; cursor: pointer; backdrop-filter: blur(1px); }
.fk-tt-endscroll .fk-tt-arrowup { font-size: 44px; line-height: 1; }
.fk-tt-endtext { font-size: 13px; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.fk-tt-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-around; align-items: center; padding: 12px 0; background: #000; border-top: 1px solid #161616; }
.fk-tt-navitem { font-size: 10px; color: #aaa; }
.fk-tt-navplus { background: #fff; color: #000; padding: 3px 12px; border-radius: 6px; font-size: 16px; }
.fk-tt-ctawrap { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(0,0,0,.7); padding: 0 28px; }
.fk-tt-ctawrap .fk-btn { width: 100%; }
.fk-tt-loading { color: var(--muted); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; }

/* ---------- sales page (full-width, responsive, readable) ---------- */
.fk-sp { background: #050505; color: #e7e9ec; }
.fk-sp-bg { position: fixed; inset: 0; background-size: cover; background-position: center; opacity: .06; z-index: 0; pointer-events: none; }
.fk-sp-section { position: relative; z-index: 1; padding: 80px 24px; border-bottom: 1px solid var(--line); }
.fk-sp-section > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.fk-sp-hero { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-bottom: 0; }
.fk-sp-bigtitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 9vw, 5.5rem); letter-spacing: .14em; margin: 0; line-height: 1;
  text-wrap: balance; } /* even line lengths instead of a long line + orphan */
.fk-sp-bigtitle span { display: inline-block; }
/* words never split mid-letter — the only break points are the spaces between them */
.fk-sp-bigtitle .fk-sp-word { white-space: nowrap; }
.fk-sp-tagline { margin-top: 22px; color: #c7ccd3; letter-spacing: .22em; text-transform: uppercase; font-size: 13px; line-height: 2.1; }
.fk-sp-scroll { margin-top: 46px; color: #8b93a0; letter-spacing: .5em; text-transform: uppercase; font-size: 10px; }
.fk-sp-act { text-align: center; }
.fk-sp-actnum { font-family: var(--font-display); color: var(--accent-bright); font-size: 14px; letter-spacing: .3em; margin-bottom: 12px; }
.fk-sp-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.12; margin: 0 0 18px; }
.fk-sp-h2 em { font-style: normal; color: var(--accent-bright); }
.fk-sp-body { color: #c7ccd3; font-size: 17px; line-height: 1.65; max-width: 720px; }
.fk-sp-act .fk-sp-body { margin-left: auto; margin-right: auto; }
.fk-sp-block { text-align: center; }
.fk-sp-block .fk-eyebrow { text-align: center; }
.fk-sp-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; text-align: left; }
.fk-sp-stage { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: rgba(255,255,255,.02); }
.fk-sp-stage.is-featured { border-color: rgba(127,29,29,.55); background: rgba(127,29,29,.08); }
.fk-sp-stagenum { font-family: var(--font-display); color: var(--accent-bright); font-size: 12px; letter-spacing: .2em; }
.fk-sp-stagetitle { font-weight: 700; font-size: 18px; margin: 6px 0; }
.fk-sp-stagedesc { color: #aab0b8; font-size: 15px; line-height: 1.5; }
.fk-sp-deliver { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 26px; text-align: left; }
.fk-sp-deliveritem { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: #d6dadf; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.fk-sp-delivernum { font-family: var(--font-display); color: var(--accent-bright); font-size: 13px; }
.fk-sp-proof { text-align: center; }
.fk-sp-proof .fk-sp-body { margin-left: auto; margin-right: auto; text-align: center; }
.fk-sp-proofimg { width: 100%; max-width: 720px; border-radius: 14px; margin: 18px auto; }
.fk-sp-guarantees { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 26px; text-align: left; }
.fk-sp-guarantee { border: 1px solid var(--line); border-radius: 12px; padding: 22px; color: #aab0b8; }
.fk-sp-guarantee .fk-icon { color: var(--accent-bright); }
.fk-sp-guarantee h3 { margin: 10px 0 8px; color: #fff; font-size: 18px; }
.fk-sp-guarantee p { font-size: 15px; line-height: 1.55; margin: 0; }
.fk-sp-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; text-align: left; max-width: 760px; }
.fk-sp-faqq { width: 100%; text-align: left; display: flex; gap: 14px; align-items: center; background: #0e0e10; border: 1px solid var(--line); color: #fff; padding: 18px; border-radius: 10px; font-size: 15px; font-family: var(--font-display); letter-spacing: .02em; }
.fk-sp-faqa { color: #aab0b8; font-size: 15px; line-height: 1.6; padding: 14px 18px; }
/* pricing */
.fk-sp-pricingsec { text-align: center; }
.fk-sp-lots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 760px; margin: 24px auto 0; }
.fk-sp-lot { border: 1px solid var(--line); border-radius: 16px; padding: 32px 26px; text-align: center; }
.fk-sp-lot.is-primary { border-color: rgba(37,211,102,.45); box-shadow: 0 0 40px rgba(37,211,102,.08); }
.fk-sp-lot.is-locked { opacity: .5; }
.fk-sp-lottitle { font-family: var(--font-display); letter-spacing: .15em; text-transform: uppercase; font-size: 13px; color: #aab0b8; }
.fk-sp-anchor { color: #6b7280; text-decoration: line-through; font-size: 14px; margin-top: 14px; }
.fk-sp-price { font-family: var(--font-display); font-weight: 700; font-size: 42px; color: var(--wa-green); margin: 6px 0; }
.fk-sp-lot.is-locked .fk-sp-price { color: #6b7280; }
.fk-sp-pricesub { color: #aab0b8; font-size: 14px; }
.fk-sp-pricetag { color: #8b93a0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin: 10px 0 18px; }
.fk-sp-lot .fk-btn { width: 100%; }
.fk-sp-lotnote { font-size: 12px; color: #8b93a0; margin-top: 16px; line-height: 1.6; }
.fk-sp-footer { text-align: center; padding: 60px 24px; color: #8b93a0; }
.fk-sp-footer > * { max-width: 980px; margin: 0 auto; }
.fk-sp-footbrand { font-family: var(--font-display); letter-spacing: .3em; color: #c7ccd3; margin-bottom: 10px; font-size: 20px; }
.fk-sp-legal { font-size: 12px; margin-top: 16px; }

/* lead modal */
.fk-lm-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.82); display: grid; place-items: center; padding: 18px; }
.fk-lm-card { width: 100%; max-width: 360px; background: #0d0d0f; border: 1px solid var(--line); border-radius: 14px; padding: 0 22px 22px; overflow: hidden; }
.fk-lm-img { width: calc(100% + 44px); margin: 0 -22px 18px; height: 180px; object-fit: cover; }
.fk-lm-field { margin-bottom: 14px; }
.fk-lm-field label { display: block; font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.fk-lm-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: #fff; padding: 8px 0; font-size: 15px; }
.fk-lm-input:focus { outline: 0; border-color: var(--accent-bright); }
.fk-lm-phonewrap { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.fk-lm-flag { font-size: 18px; }
.fk-lm-dial { color: var(--muted); font-size: 14px; }
.fk-lm-phone { border: 0; }
.fk-lm-submit { width: 100%; background: var(--wa-green); margin-top: 6px; }
.fk-lm-submit:hover { background: #1eb858; }
.fk-lm-overlay .fk-link { display: block; width: 100%; text-align: center; }