/* Setclipper sales funnel. Sits on top of /assets/styles.css (tokens, header, footer). */
:root {
  --f-lime: #d4ff00;
  --f-ink: #0b0b0c;
  --f-panel: #111114;
  --f-card: #16161a;
  --f-line: rgba(255, 255, 255, 0.09);
  --f-line-strong: rgba(255, 255, 255, 0.18);
  --f-text: #f4f4f5;
  --f-mute: #a1a1aa;
  --f-radius: 16px;
  --f-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --f-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-wrap: 1180px;
}
html { scroll-behavior: smooth; }
body.funnel { background: var(--f-ink); color: var(--f-text); font-family: var(--f-body); }
.f-wrap { width: min(var(--f-wrap), 100% - 40px); margin-inline: auto; }
.f-section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.f-section.alt { background: linear-gradient(180deg, #0e0e11 0%, #0b0b0c 100%); border-block: 1px solid var(--f-line); }
.f-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--f-lime); padding: 7px 14px; border: 1px solid rgba(212, 255, 0, .3); background: rgba(212, 255, 0, .08); border-radius: 999px; }
.f-h2 { font: 700 clamp(30px, 4.6vw, 52px)/1.06 var(--f-display); letter-spacing: -.02em; margin: 18px 0 14px; }
.f-h2 em { font-style: normal; color: var(--f-lime); }
.f-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--f-mute); max-width: 720px; margin: 0; }
.f-center { text-align: center; } .f-center .f-lead { margin-inline: auto; }

/* buttons */
.f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 12px; font: 700 15px/1 var(--f-body); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; }
.f-btn.primary { background: var(--f-lime); color: #0b0b0c; box-shadow: 0 8px 30px rgba(212, 255, 0, .22); }
.f-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(212, 255, 0, .32); }
.f-btn.ghost { border: 1px solid var(--f-line-strong); color: var(--f-text); background: rgba(255, 255, 255, .03); }
.f-btn.ghost:hover { border-color: var(--f-lime); color: var(--f-lime); }
.f-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* hero */
.f-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 70px); text-align: center; overflow: hidden; position: relative; }
.f-hero::before { content: ""; position: absolute; inset: -20% 0 auto; height: 70%; background: radial-gradient(60% 60% at 50% 0%, rgba(212, 255, 0, .13), transparent 70%); pointer-events: none; }
.f-hero h1 { font: 700 clamp(38px, 6.4vw, 76px)/1.02 var(--f-display); letter-spacing: -.03em; margin: 22px auto 18px; max-width: 980px; }
.f-hero h1 em { font-style: normal; color: var(--f-lime); }
.f-hero .f-lead { margin-inline: auto; }
.f-hero .f-actions { justify-content: center; }
.f-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.f-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--f-mute); border: 1px solid var(--f-line); border-radius: 999px; padding: 8px 14px; background: rgba(255, 255, 255, .02); }
.f-chip svg { width: 14px; height: 14px; color: var(--f-lime); }
.f-stage { position: relative; margin: clamp(34px, 5vw, 56px) auto 0; max-width: 1080px; }
.f-stage::after { content: ""; position: absolute; inset: auto 8% -30px; height: 60px; background: radial-gradient(closest-side, rgba(212, 255, 0, .22), transparent); filter: blur(18px); z-index: -1; }
.f-device { border-radius: 14px; overflow: hidden; border: 1px solid var(--f-line-strong); background: #0d0d10; box-shadow: 0 40px 100px rgba(0, 0, 0, .65); }
.f-device video, .f-device img { display: block; width: 100%; height: auto; }
.f-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 22px; background: var(--f-line); border: 1px solid var(--f-line); border-radius: 14px; overflow: hidden; }
.f-stat { background: var(--f-panel); padding: 20px 14px; text-align: center; }
.f-stat b { display: block; font: 700 clamp(26px, 3.6vw, 40px)/1 var(--f-display); color: var(--f-lime); letter-spacing: -.02em; }
.f-stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--f-mute); }
.f-note { font-size: 12.5px; color: #71717a; margin-top: 12px; }

/* two doors */
.f-doors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 44px; }
.f-door { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, transform .2s; }
.f-door:hover { border-color: rgba(212, 255, 0, .45); transform: translateY(-4px); }
.f-door .tag { font: 700 11.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--f-lime); }
.f-door h3 { font: 700 26px/1.15 var(--f-display); margin: 0; letter-spacing: -.01em; }
.f-door p { margin: 0; color: var(--f-mute); line-height: 1.6; font-size: 15.5px; }
.f-door ul { list-style: none; padding: 0; margin: 4px 0 6px; display: grid; gap: 8px; }
.f-door li { display: flex; gap: 10px; font-size: 14.5px; color: #d4d4d8; }
.f-door li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--f-lime); }
.f-door .shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--f-line); margin-top: auto; }
.f-door .shot img, .f-door .shot video { width: 100%; display: block; }
.f-door .f-btn { align-self: flex-start; height: 46px; }

/* pipeline */
.f-pipe { display: grid; grid-template-columns: 340px 1fr; gap: 28px; margin-top: 46px; align-items: start; }
.f-steps { display: grid; gap: 10px; }
.f-step { text-align: left; border: 1px solid var(--f-line); background: var(--f-card); color: var(--f-text); padding: 16px 18px 18px; border-radius: 14px; cursor: pointer; font-family: inherit; position: relative; overflow: hidden; transition: border-color .2s, background .2s; }
.f-step .n { font: 700 12px/1 var(--f-body); color: var(--f-mute); letter-spacing: .08em; }
.f-step h4 { margin: 8px 0 0; font: 700 18px/1.2 var(--f-display); }
.f-step p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--f-mute); display: none; }
.f-step.on { border-color: rgba(212, 255, 0, .55); background: #1b1c14; }
.f-step.on .n { color: var(--f-lime); }
.f-step.on p { display: block; }
.f-step .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--f-lime); }
.f-step.on .bar { width: 100%; transition: width var(--dur, 6s) linear; }
.f-view { position: sticky; top: 90px; background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 14px; }
.f-view .frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--f-line); background: #0d0d10; }
.f-view .frame img { display: block; width: 100%; height: auto; }
.f-view .cap { padding: 16px 6px 4px; }
.f-view .cap b { font: 700 18px/1.2 var(--f-display); }
.f-view .cap p { color: var(--f-mute); font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; }
.f-view .slide { display: none; animation: fIn .5s ease both; } .f-view .slide.on { display: block; }
@keyframes fIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.f-view .pair { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; align-items: center; }
.f-view .pair .frame img { max-height: 330px; object-fit: cover; object-position: top; }
.f-view .pair.vert { grid-template-columns: auto 1fr; justify-content: center; } .f-view .pair.vert .frame:first-child { width: 230px; aspect-ratio: 9 / 16; } .f-view .pair.vert .frame:first-child img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center top; }
.f-exports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.f-exports div { border: 1px solid var(--f-line); border-radius: 12px; padding: 16px; background: #0d0d10; } .f-exports b { display: block; font: 700 15px/1.2 var(--f-display); } .f-exports span { display: block; color: var(--f-mute); font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
@media (max-width: 560px) { .f-view .pair.vert { grid-template-columns: 1fr; justify-items: center; } .f-view .pair.vert .frame:first-child { width: 200px; } .f-view .pair.vert .frame:last-child { width: 100%; } .f-exports { grid-template-columns: 1fr; } }
.f-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.f-meta span { font: 600 12px/1 var(--f-body); color: var(--f-lime); border: 1px solid rgba(212, 255, 0, .3); border-radius: 999px; padding: 7px 11px; background: rgba(212, 255, 0, .07); }

/* human logic */
.f-logic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.f-card { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.f-card h3 { margin: 0; font: 700 20px/1.2 var(--f-display); letter-spacing: -.01em; }
.f-card p { margin: 0; color: var(--f-mute); font-size: 14.8px; line-height: 1.6; }
.f-card .vis { border-radius: 10px; overflow: hidden; border: 1px solid var(--f-line); background: #0d0d10; }
.f-card .vis img { display: block; width: 100%; height: auto; }
.f-card .vis.vert { width: 200px; max-width: 100%; margin: 0 auto; aspect-ratio: 9 / 16; } .f-card .vis.vert img { height: 100%; object-fit: cover; }
.f-card .vis.tall img { height: 236px; object-fit: cover; object-position: top; }
.f-card .k { font: 700 11px/1 var(--f-body); color: var(--f-lime); letter-spacing: .09em; text-transform: uppercase; }
.f-bargrid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; padding: 14px; }
.f-bargrid i { height: 26px; border-radius: 3px; background: #26262c; }
.f-bargrid i.b { background: #5b6b00; } .f-bargrid i.d { background: var(--f-lime); box-shadow: 0 0 14px rgba(212, 255, 0, .55); }

/* editor gallery */
.f-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 34px; }
.f-tab { border: 1px solid var(--f-line); background: var(--f-card); color: var(--f-mute); padding: 11px 18px; border-radius: 999px; font: 600 14px/1 var(--f-body); cursor: pointer; transition: all .15s; }
.f-tab:hover { color: var(--f-text); border-color: var(--f-line-strong); }
.f-tab.on { background: var(--f-lime); color: #0b0b0c; border-color: var(--f-lime); }
.f-gallery { margin-top: 26px; }
.f-gallery .pane { display: none; } .f-gallery .pane.on { display: block; animation: fIn .45s ease both; }
.f-gallery .caption { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; padding: 16px 4px 0; }
.f-gallery .caption b { font: 700 19px/1.2 var(--f-display); }
.f-gallery .caption span { color: var(--f-mute); font-size: 14.5px; max-width: 640px; }
.f-featgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }
.f-feat { border: 1px solid var(--f-line); border-radius: 14px; padding: 16px; background: var(--f-card); font-size: 14px; color: var(--f-mute); line-height: 1.5; }
.f-feat b { display: block; color: var(--f-text); font: 700 15.5px/1.2 var(--f-display); margin-bottom: 6px; }

/* export */
.f-export { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 24px; align-items: center; margin-top: 44px; }
.f-box { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 24px; }
.f-box h3 { margin: 0 0 12px; font: 700 20px/1.2 var(--f-display); }
.f-xml { font: 500 12.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: #b6c26a; background: #0d0d10; border: 1px solid var(--f-line); border-radius: 12px; padding: 16px; overflow: hidden; }
.f-xml .c { color: #6b7280; }
.f-arrow { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(212, 255, 0, .4); color: var(--f-lime); background: rgba(212, 255, 0, .08); font-size: 24px; }
.f-nles { display: grid; gap: 10px; }
.f-nle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--f-line); border-radius: 12px; background: #101013; }
.f-nle b { font: 700 16px/1 var(--f-display); } .f-nle small { color: var(--f-mute); font-size: 12.5px; text-align: right; }
.f-nle.ok { border-color: rgba(212, 255, 0, .35); } .f-nle.ok small { color: var(--f-lime); }
.f-travels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.f-travels div { font-size: 13.5px; color: var(--f-mute); padding-left: 14px; position: relative; line-height: 1.45; }
.f-travels div::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 2px; background: var(--f-lime); }

/* built */
.f-built { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.f-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-num { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 16px; padding: 22px; }
.f-num b { display: block; font: 700 clamp(30px, 3.6vw, 44px)/1 var(--f-display); color: var(--f-lime); letter-spacing: -.02em; }
.f-num span { display: block; margin-top: 8px; color: var(--f-mute); font-size: 14px; line-height: 1.4; }
.f-quote { border-left: 3px solid var(--f-lime); padding-left: 18px; margin-top: 24px; color: #d4d4d8; font-size: 16px; line-height: 1.6; }

/* web */
.f-webflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; counter-reset: w; }
.f-wstep { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 18px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.f-wstep::before { counter-increment: w; content: counter(w); position: absolute; top: -13px; left: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--f-lime); color: #0b0b0c; font: 700 13px/26px var(--f-body); text-align: center; }
.f-wstep h4 { margin: 6px 0 0; font: 700 17px/1.2 var(--f-display); } .f-wstep p { margin: 0; color: var(--f-mute); font-size: 13.8px; line-height: 1.5; }
.f-mock { border: 1px solid var(--f-line); border-radius: 10px; background: #0d0d10; padding: 12px; min-height: 120px; display: grid; gap: 8px; align-content: center; }
.f-mock .field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--f-line-strong); border-radius: 8px; padding: 9px 10px; font-size: 12px; color: #9ca3af; }
.f-mock .field i { width: 6px; height: 14px; background: var(--f-lime); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.f-mock .bar { height: 7px; border-radius: 99px; background: #26262c; overflow: hidden; } .f-mock .bar b { display: block; height: 100%; width: 70%; background: var(--f-lime); animation: load 2.6s ease-in-out infinite; }
@keyframes load { 0% { width: 8%; } 80%, 100% { width: 96%; } }
.f-mock .lbl { font-size: 11.5px; color: #71717a; }
.f-thumbs { display: flex; gap: 8px; max-height: 190px; overflow: hidden; } .f-thumbs img { width: calc(33% - 6px); height: auto; min-width: 0; border-radius: 6px; border: 1px solid var(--f-line); object-fit: cover; aspect-ratio: 9/16; }
.f-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.f-tier { border: 1px solid var(--f-line); border-radius: 16px; padding: 22px; background: var(--f-card); } .f-tier.pro { border-color: rgba(212, 255, 0, .4); }
.f-tier h4 { margin: 0 0 8px; font: 700 19px/1 var(--f-display); } .f-tier ul { margin: 0; padding-left: 18px; color: var(--f-mute); font-size: 14.5px; line-height: 1.7; }

/* pricing + faq */
.f-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.f-plan { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.f-plan.pop { border-color: rgba(212, 255, 0, .5); background: #181a10; }
.f-plan h4 { margin: 0; font: 700 20px/1 var(--f-display); } .f-plan .price { font: 700 38px/1 var(--f-display); letter-spacing: -.02em; } .f-plan .price small { font: 500 14px var(--f-body); color: var(--f-mute); }
.f-plan ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; color: #d4d4d8; font-size: 14.5px; } .f-plan li::before { content: "✓ "; color: var(--f-lime); font-weight: 700; }
.f-plan .f-btn { margin-top: auto; height: 46px; }
.f-faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 10px; }
.f-faq details { border: 1px solid var(--f-line); background: var(--f-card); border-radius: 14px; padding: 4px 18px; }
.f-faq summary { cursor: pointer; padding: 16px 0; font: 600 16.5px/1.3 var(--f-body); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.f-faq summary::after { content: "+"; color: var(--f-lime); font-size: 22px; line-height: 1; } .f-faq details[open] summary::after { content: "–"; }
.f-faq details p { margin: 0 0 16px; color: var(--f-mute); font-size: 15px; line-height: 1.65; }
.f-final { text-align: center; padding: clamp(70px, 9vw, 120px) 0; background: radial-gradient(60% 80% at 50% 100%, rgba(212, 255, 0, .13), transparent 70%); border-top: 1px solid var(--f-line); }
.f-final h2 { font: 700 clamp(32px, 5vw, 58px)/1.05 var(--f-display); letter-spacing: -.02em; margin: 0 auto 16px; max-width: 800px; }
.f-final .f-actions { justify-content: center; }

/* reveal */
/* hidden only once funnel.js has started (html.rv-on); if the script fails or is blocked the content stays visible */
html.rv-on .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
html.rv-on .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .f-mock .bar b, .f-mock .field i { animation: none; } }

/* responsive */
@media (max-width: 980px) {
  .f-pipe { grid-template-columns: 1fr; } .f-view { position: static; }
  .f-logic, .f-plans { grid-template-columns: 1fr; } .f-featgrid { grid-template-columns: 1fr 1fr; }
  .f-export { grid-template-columns: 1fr; } .f-arrow { transform: rotate(90deg); justify-self: center; }
  .f-built { grid-template-columns: 1fr; } .f-webflow { grid-template-columns: 1fr 1fr; } .f-doors, .f-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .f-stats { grid-template-columns: 1fr 1fr; } .f-travels, .f-featgrid, .f-webflow, .f-numbers { grid-template-columns: 1fr; }
  .f-view .pair { grid-template-columns: 1fr; } .f-actions .f-btn { width: 100%; } .f-hero .f-actions { flex-direction: column; }
  .f-steps { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 6px; scroll-snap-type: x mandatory; } .f-step { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ===== funnel v2 ===== */
.f-logos { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; color: var(--f-mute); font-size: 13px; }
.f-logos img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }

/* reels wall */
.f-wall { max-width: 900px; margin: 44px auto 0; display: grid; justify-items: center; }
.f-wide { position: relative; width: min(640px, 100%); border-radius: 14px; overflow: hidden; border: 1px solid var(--f-line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.f-wide img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.f-wide .cap { position: absolute; left: 12px; bottom: 12px; font: 700 12px/1 var(--f-body); background: rgba(0, 0, 0, .7); color: var(--f-lime); padding: 7px 10px; border-radius: 8px; }
.f-arrows { width: min(640px, 100%); height: 56px; overflow: visible; }
.f-arrows path { animation: dash 1.2s linear infinite; } @keyframes dash { to { stroke-dashoffset: -24; } }
.f-reelrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: min(640px, 100%); }
.f-reel { aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; border: 1px solid var(--f-line-strong); background: #0d0d10; }
.f-reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-reel.more { display: grid; place-content: center; text-align: center; border-style: dashed; border-color: rgba(212, 255, 0, .5); background: rgba(212, 255, 0, .06); }
.f-reel.more b { font: 700 clamp(26px, 5vw, 40px)/1 var(--f-display); color: var(--f-lime); } .f-reel.more span { font-size: 13px; color: var(--f-mute); margin-top: 6px; }

/* editors */
.f-editors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; max-width: 900px; margin-inline: auto; }
.f-ed { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 18px; padding: 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.f-ed img { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; }
.f-ed b { font: 700 18px/1.2 var(--f-display); } .f-ed small { color: var(--f-mute); font-size: 13px; line-height: 1.5; }

/* story animations (12s loop, start when scrolled into view) */
.f-anim { position: relative; background: #0d0d10; border: 1px solid var(--f-line); border-radius: 14px; height: 300px; overflow: hidden; --c1: #d4ff00; --c2: #7dd3fc; --c3: #f9a8d4; --c4: #fdba74; }
.f-anim * { animation-play-state: paused; } .f-anim.go * { animation-play-state: running; }
.f-anim .lab { position: absolute; font: 600 11px/1 var(--f-body); color: var(--f-mute); opacity: 0; animation-duration: 12s; animation-iteration-count: infinite; animation-fill-mode: both; }
.f-anim.desk .auto { position: absolute; right: 12px; top: 10px; z-index: 2; font: 700 12px/1 var(--f-body); background: var(--f-lime); color: #0b0b0c; padding: 8px 12px; border-radius: 8px; animation: press 12s infinite; }
@keyframes press { 0%, 4% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 255, 0, .6); } 6% { transform: scale(.9); } 12% { transform: scale(1); box-shadow: 0 0 0 14px rgba(212, 255, 0, 0); } 100% { transform: scale(1); } }
.desk .cams { position: absolute; left: 12px; right: 12px; top: 40px; display: grid; gap: 6px; }
.desk .cam { height: 22px; border-radius: 5px; background: #17171c; overflow: hidden; position: relative; }
.desk .cam i { position: absolute; inset: 3px 0; width: 130%; left: -15%; background: repeating-linear-gradient(90deg, var(--cc) 0 2px, transparent 2px 6px); opacity: .85; animation: sync 12s ease-in-out infinite; }
.desk .cam:nth-child(1) { --cc: var(--c1); } .desk .cam:nth-child(2) { --cc: var(--c2); } .desk .cam:nth-child(3) { --cc: var(--c3); } .desk .cam:nth-child(4) { --cc: var(--c4); }
.desk .cam:nth-child(1) i { --o: 0; } .desk .cam:nth-child(2) i { --o: 34px; } .desk .cam:nth-child(3) i { --o: -22px; } .desk .cam:nth-child(4) i { --o: 48px; }
@keyframes sync { 0%, 10% { transform: translateX(var(--o)); } 28%, 100% { transform: translateX(0); } }
.desk .tl { position: absolute; left: 12px; right: 12px; top: 164px; height: 30px; border-radius: 6px; background: #17171c; display: flex; overflow: hidden; animation: fill 12s ease-out infinite; clip-path: inset(0 100% 0 0); }
.desk .tl b { height: 100%; } @keyframes fill { 0%, 30% { clip-path: inset(0 100% 0 0); } 52%, 100% { clip-path: inset(0 0 0 0); } }
.desk .mk { position: absolute; left: 12px; right: 12px; top: 154px; height: 10px; } .desk .mk b { position: absolute; top: 0; width: 9px; height: 9px; background: var(--f-lime); transform: rotate(45deg) scale(0); box-shadow: 0 0 12px var(--f-lime); animation: pop 12s infinite; }
.desk .mk b:nth-child(1) { left: 22%; animation-delay: 0s; } .desk .mk b:nth-child(2) { left: 52%; animation-delay: .25s; } .desk .mk b:nth-child(3) { left: 80%; animation-delay: .5s; }
@keyframes pop { 0%, 54% { transform: rotate(45deg) scale(0); } 60% { transform: rotate(45deg) scale(1.5); } 64%, 100% { transform: rotate(45deg) scale(1); } }
.desk .out { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 12px; }
.desk .out u { width: 42px; height: 74px; border-radius: 7px; background: linear-gradient(160deg, #2a2d12, #0d0d10 70%); border: 1px solid rgba(212, 255, 0, .55); animation: drop 12s infinite; opacity: 0; }
.desk .out u:nth-child(2) { animation-delay: .2s; } .desk .out u:nth-child(3) { animation-delay: .4s; }
@keyframes drop { 0%, 66% { opacity: 0; transform: translateY(-40px) scale(.8); } 74%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.desk .l1 { left: 12px; top: 26px; animation-name: lab1; } .desk .l2 { left: 12px; top: 140px; animation-name: lab2; } .desk .l3 { left: 12px; top: 198px; animation-name: lab3; } .desk .l4 { right: 12px; bottom: 90px; animation-name: lab4; }
@keyframes lab1 { 0%, 4% { opacity: 0; } 8%, 100% { opacity: 1; } } @keyframes lab2 { 0%, 24% { opacity: 0; } 30%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes lab3 { 0%, 36% { opacity: 0; } 46%, 100% { opacity: 1; } } @keyframes lab4 { 0%, 66% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: 0; } }

.f-anim.web .long { position: absolute; left: 12px; right: 12px; top: 56px; height: 54px; border-radius: 8px; background: linear-gradient(90deg, #1b1c22, #23252d 40%, #1b1c22); border: 1px solid var(--f-line-strong); overflow: hidden; }
.web .scan { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--f-lime); box-shadow: 0 0 18px 4px rgba(212, 255, 0, .6); animation: sweep 12s linear infinite; }
@keyframes sweep { 0%, 8% { left: 0; opacity: 0; } 10% { opacity: 1; } 55% { left: calc(100% - 3px); opacity: 1; } 58%, 100% { left: calc(100% - 3px); opacity: 0; } }
.web .long i { position: absolute; top: 14px; width: 14px; height: 26px; border-radius: 4px; background: var(--f-lime); opacity: 0; animation: hit 12s infinite; }
.web .long i:nth-of-type(1) { left: 18%; --d: 22%; } .web .long i:nth-of-type(2) { left: 38%; --d: 32%; } .web .long i:nth-of-type(3) { left: 61%; --d: 44%; } .web .long i:nth-of-type(4) { left: 82%; --d: 54%; }
.web .long i:nth-of-type(1) { animation-delay: 0s; } 
@keyframes hit { 0%, 22% { opacity: 0; transform: scale(.4); } 28%, 100% { opacity: 1; transform: none; } }
.web .outw { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: center; gap: 12px; }
.web .outw u { width: 44px; height: 78px; border-radius: 7px; background: linear-gradient(160deg, #2a2d12, #0d0d10 70%); border: 1px solid rgba(212, 255, 0, .55); opacity: 0; animation: drop 12s infinite; }
.web .outw u:nth-child(2) { animation-delay: .2s; } .web .outw u:nth-child(3) { animation-delay: .4s; } .web .outw u:nth-child(4) { animation-delay: .6s; }
.web .w1 { left: 12px; top: 38px; animation-name: lab1; } .web .w2 { left: 0; right: 0; text-align: center; bottom: 14px; animation-name: lab4; }
.f-thumbs u { flex: 1; aspect-ratio: 9/16; border-radius: 6px; border: 1px solid rgba(212, 255, 0, .45); background: linear-gradient(160deg, #2a2d12, #0d0d10 70%); }
.f-door h3 em { font-style: normal; color: var(--f-lime); }
@media (prefers-reduced-motion: reduce) { .f-anim * { animation: none !important; } .desk .tl { clip-path: none; } .desk .out u, .web .outw u, .web .long i, .f-anim .lab { opacity: 1 !important; } .desk .mk b { transform: rotate(45deg) !important; } }
@media (max-width: 980px) { .f-editors { grid-template-columns: 1fr; } }
.f-reel video{width:100%;height:100%;object-fit:cover;display:block}.f-reelrow{grid-template-columns:repeat(5,1fr)}@media(max-width:560px){.f-reelrow{grid-template-columns:repeat(3,1fr)}.f-reel:nth-child(4){display:none}}
.f-wide img{height:auto}.f-ed img,.f-logos img{height:auto}

/* ===== v3: story engine, header fix ===== */
.topbar { flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; }
.topbar .brand { flex: 0 0 auto; }
.topbar .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-left: auto; }
.topbar .nav a { white-space: nowrap; }
@media (max-width: 820px) { .topbar .nav a:not(.nav-cta):not([href="/pricing.html"]) { display: none; } }
.f-wide video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; height: auto; }
.f-door, .f-door > * { min-width: 0; }
.f-story { position: relative; background: #0d0d10; border: 1px solid var(--f-line); border-radius: 14px; padding: 12px; min-height: 330px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; --c1: #d4ff00; --c2: #7dd3fc; --c3: #f9a8d4; --c4: #fdba74; }
.f-story .bt { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.f-story .b { font: 700 11.5px/1 var(--f-body); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--f-line-strong); color: var(--f-mute); background: #17171c; transition: all .25s; white-space: nowrap; }
.f-story[data-s="4"] .b-edit, .f-story.web[data-s="2"] .b-edit, .f-story[data-s="6"] .b-clip, .f-story[data-s="7"] .b-ref { background: var(--f-lime); color: #0b0b0c; border-color: var(--f-lime); transform: scale(.94); box-shadow: 0 0 0 6px rgba(212, 255, 0, .18); }
.f-story .cams { display: grid; gap: 6px; overflow: hidden; max-height: 150px; transition: max-height .8s ease, opacity .6s ease, margin .8s ease; }
.f-story .cam { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; height: 30px; }
.f-story .cam img { width: 38px; height: 26px; object-fit: cover; border-radius: 4px; border: 1px solid var(--f-line-strong); }
.f-story .wave { position: relative; height: 22px; }
.f-story .wave::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 5px; background: repeating-linear-gradient(90deg, var(--cc) 0 2px, transparent 2px 5px), #17171c; background-blend-mode: normal; border: 1px solid rgba(255, 255, 255, .12); transition: left .9s cubic-bezier(.4, 0, .2, 1), width .9s cubic-bezier(.4, 0, .2, 1); }
.f-story .cam:nth-child(1) .wave { --cc: var(--c1); --l: 0%; --w: 62%; } .f-story .cam:nth-child(2) .wave { --cc: var(--c2); --l: 22%; --w: 78%; } .f-story .cam:nth-child(3) .wave { --cc: var(--c3); --l: 8%; --w: 48%; } .f-story .cam:nth-child(4) .wave { --cc: var(--c4); --l: 35%; --w: 65%; }
.f-story:not([data-s="0"]) .cam .wave { --l: 10%; --w: 80%; }
.f-story:not([data-s="0"]):not([data-s="1"]) .cams { max-height: 0; opacity: 0; margin-top: -10px; }
.f-story .main { flex: 0 0 auto; }
.f-story .bar { position: relative; height: 34px; border-radius: 8px; background: linear-gradient(90deg, #1b1c22, #262830 50%, #1b1c22); border: 1px solid var(--f-line-strong); overflow: hidden; opacity: 1; transition: opacity .7s; }
.f-story.desk[data-s="0"] .bar, .f-story.desk[data-s="1"] .bar { opacity: 0; }
.f-story .cuts { position: absolute; inset: 0; display: flex; opacity: 0; transition: opacity .8s; } .f-story .cuts b { height: 100%; border-right: 1px solid #0d0d10; }
.f-story.desk[data-s="4"] .cuts, .f-story.desk[data-s="5"] .cuts, .f-story.desk[data-s="6"] .cuts { opacity: .9; }
.f-story .dm { position: absolute; inset: 0; } .f-story .dm i { position: absolute; top: 50%; left: var(--x); width: 10px; height: 10px; margin: -5px; background: var(--f-lime); transform: rotate(45deg) scale(0); box-shadow: 0 0 12px var(--f-lime); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); transition-delay: var(--d); }
.f-story.desk[data-s="3"] .dm i, .f-story.desk[data-s="4"] .dm i, .f-story.desk[data-s="5"] .dm i, .f-story.web[data-s="3"] .dm i, .f-story.web[data-s="4"] .dm i { transform: rotate(45deg) scale(1); }
.f-story.web .scan { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: var(--f-lime); box-shadow: 0 0 18px 4px rgba(212, 255, 0, .6); opacity: 0; }
.f-story.web[data-s="2"] .scan { opacity: 1; left: calc(100% - 3px); transition: left 1.8s linear, opacity .3s; }
.f-story.web[data-s="3"] .scan, .f-story.web[data-s="4"] .scan { opacity: 0; }
.f-story .pieces { display: flex; justify-content: center; align-items: flex-end; gap: 4px; flex: 1; min-height: 96px; }
.f-story .pc { flex: 0 0 auto; width: 6.5%; height: 54px; border-radius: 5px; border: 1px solid rgba(212, 255, 0, .35); background: linear-gradient(160deg, #2a2d12, #14150a); opacity: 0; transform: translateY(-14px); transition: opacity .4s, transform .5s, width .7s cubic-bezier(.4, 0, .2, 1), height .7s cubic-bezier(.4, 0, .2, 1), background .5s; transition-delay: var(--d); }
.f-story.desk[data-s="3"] .pc, .f-story.desk[data-s="4"] .pc, .f-story.desk[data-s="5"] .pc { opacity: .35; transform: none; width: 5%; height: 78px; }
.f-story[data-s="6"] .pc { opacity: 1; transform: none; width: 8.5%; height: 22px; background: linear-gradient(160deg, #4a5316, #1c1e0b); }
.f-story[data-s="7"] .pc { opacity: 1; transform: none; width: 5.6%; height: 88px; background: linear-gradient(160deg, #5b6b00, #1c1e0b); border-color: var(--f-lime); }
.f-story.web[data-s="3"] .pc { opacity: 1; transform: none; width: 8.5%; height: 22px; background: linear-gradient(160deg, #4a5316, #1c1e0b); }
.f-story .cap { text-align: center; font: 700 13px/1.3 var(--f-body); color: var(--f-lime); min-height: 18px; }
@media (max-width: 560px) { .f-story { min-height: 300px; } .f-story .b { font-size: 10.5px; padding: 7px 8px; } }
@media (prefers-reduced-motion: reduce) { .f-story * { transition: none !important; } }
.f-ph { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 180px; padding: 24px; border: 1px dashed rgba(255,255,255,.22); border-radius: 12px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px); color: var(--f-mute); font: 600 13px/1.4 var(--f-body); }
.f-view .frame .f-ph, .f-device .f-ph { border: 0; border-radius: 0; min-height: 220px; }