/* ============================================================
   Feedwrk — LANDING UI. Marketing section components (fw-l-*).
   Token-driven; pairs with landing-tokens.css. Load last:
     tokens.css → feedwrk-ui.css → landing-tokens.css → landing-ui.css
   Reuse core components (fw-btn, fw-badge, fw-card) wherever they
   fit. These are the landing-only parts on top.
   ============================================================ */

/* --- base --- */
.fw-l{font-family:var(--font-sans);color:var(--ink-1)}
.fw-l ::selection{background:var(--voltage-tint)}

/* --- landing typography --- */
.fw-l-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:var(--l-fs-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--ink-3)}
.fw-l-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--l-grad-flow)} /* mini flow tick */
.fw-l-display{font-family:var(--l-font-display);font-weight:600;font-size:var(--l-fs-display);
  line-height:var(--l-lh-display);letter-spacing:var(--track-tight);color:var(--ink-1);margin:0}
.fw-l-h2{font-family:var(--l-font-display);font-weight:600;font-size:var(--l-fs-h2);
  line-height:var(--l-lh-tight);letter-spacing:var(--track-tight);color:var(--ink-1);margin:0}
.fw-l-lead{font-family:var(--font-sans);font-size:var(--l-fs-lead);line-height:var(--l-lh-body);
  color:var(--ink-3);max-width:46ch;margin:0}
.fw-l-grad{background:var(--l-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.fw-l-mark{background:linear-gradient(180deg,transparent 62%,var(--citrus) 62%);padding:0 .06em} /* citrus highlighter — decorative */

/* --- section shell --- */
.fw-l-section{padding:var(--l-sec-y) var(--l-gutter)}
.fw-l-wrap{max-width:var(--l-maxw);margin:0 auto}

/* --- dark cinematic band --- */
.fw-l-dark{background:var(--l-dark-1);color:var(--l-on-dark-1)}
.fw-l-dark .fw-l-display,.fw-l-dark .fw-l-h2{color:var(--l-on-dark-1)}
.fw-l-dark .fw-l-lead{color:var(--l-on-dark-2)}
.fw-l-dark .fw-l-eyebrow{color:var(--l-on-dark-2)}

/* =====================================================================
   SIGNATURE MOTIF — the pipeline spine.
   Feedwrk's product IS a line data flows along (Ingest → Enrich →
   Publish). It is the layout backbone, not just a hero animation.
   ===================================================================== */
.fw-l-spine{display:flex;align-items:center;gap:0;font-family:var(--font-mono)}
.fw-l-spine .node{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.fw-l-spine .dot{width:14px;height:14px;border-radius:50%;background:var(--surface);
  border:2px solid var(--voltage);position:relative;z-index:1}
.fw-l-spine .node.is-live .dot{background:var(--voltage);box-shadow:0 0 0 6px var(--voltage-tint)}
.fw-l-spine .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fw-l-spine .link{flex:1;min-width:44px;height:2px;background:var(--rule-strong);position:relative;overflow:hidden}
.fw-l-spine .link::after{content:"";position:absolute;inset:0;width:40%;background:var(--l-grad-flow);
  animation:fw-l-flow var(--l-dur-slow) linear infinite}
@keyframes fw-l-flow{from{transform:translateX(-110%)}to{transform:translateX(360%)}}
.fw-l-dark .fw-l-spine .dot{background:var(--l-dark-2)}
.fw-l-dark .fw-l-spine .link{background:var(--l-rule-dark-strong)}
.fw-l-dark .fw-l-spine .lbl{color:var(--l-on-dark-2)}

/* vertical spine — sections dock onto it down the page */
.fw-l-rail{position:relative;padding-left:32px}
.fw-l-rail::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--rule-strong)}
.fw-l-rail::after{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--surface);border:2px solid var(--voltage)}

/* --- stat strip (Handhold / Lexogrine) --- */
.fw-l-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-6)}
.fw-l-stat .n{font-family:var(--l-font-display);font-weight:600;font-size:clamp(2rem,4vw,3rem);
  line-height:1;letter-spacing:var(--track-tight);
  background:var(--l-grad-flow);-webkit-background-clip:text;background-clip:text;color:transparent}
.fw-l-stat .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.fw-l-dark .fw-l-stat .k{color:var(--l-on-dark-2)}

/* --- logo / proof marquee (Lexogrine) --- */
.fw-l-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fw-l-marquee .track{display:flex;gap:var(--s-8);width:max-content;animation:fw-l-marq var(--l-dur-marquee) linear infinite}
.fw-l-marquee .track span{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;
  color:var(--ink-4);white-space:nowrap;text-transform:uppercase}
@keyframes fw-l-marq{to{transform:translateX(-50%)}}

/* --- hero aurora mesh (Stripe) --- */
.fw-l-aurora{position:relative;isolation:isolate;overflow:clip}
.fw-l-aurora::before{content:"";position:absolute;inset:-25% -10% auto -10%;height:150%;z-index:-1;
  background:
    radial-gradient(40% 50% at 18% 22%,color-mix(in oklab,var(--l-fuchsia) 40%,transparent),transparent 70%),
    radial-gradient(45% 55% at 82% 14%,color-mix(in oklab,var(--l-azure) 45%,transparent),transparent 70%),
    radial-gradient(52% 60% at 55% 46%,color-mix(in oklab,var(--voltage) 42%,transparent),transparent 72%);
  filter:blur(46px) saturate(1.08);opacity:.9;
  animation:fw-l-drift var(--l-dur-drift) ease-in-out infinite alternate}
@keyframes fw-l-drift{to{transform:translate3d(0,-3%,0) scale(1.08)}}

/* --- floating product shot (Stripe / Handhold) --- */
.fw-l-float{border-radius:var(--l-r-lg);box-shadow:var(--l-shadow-float);border:1px solid var(--rule);
  overflow:hidden;background:var(--surface);transform:perspective(1600px) rotateX(6deg) rotateY(-5deg)}

/* --- orb (Handhold) --- */
.fw-l-orb{width:clamp(160px,26vw,320px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--l-azure),var(--voltage) 55%,var(--voltage-press) 100%);
  box-shadow:var(--l-glow-voltage),inset 0 0 60px -10px rgba(255,255,255,.4);filter:saturate(1.05)}

/* --- input-as-hero (Lovable) --- */
.fw-l-inputcta{display:flex;gap:8px;align-items:center;padding:8px;background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:var(--r-pill);box-shadow:var(--shadow-sm);max-width:520px}
.fw-l-inputcta input{flex:1;min-width:0;border:0;outline:none;background:transparent;
  font-family:var(--font-mono);font-size:14px;padding:0 12px;color:var(--ink-1)}
.fw-l-inputcta input::placeholder{color:var(--ink-4)}

/* --- scroll reveal utility --- */
.fw-l-reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--l-dur-reveal) var(--l-ease-out),transform var(--l-dur-reveal) var(--l-ease-out)}
.fw-l-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fw-l-reveal{opacity:1;transform:none}}

/* --- big display CTA button (extends the core primary) --- */
.fw-btn--l-lg{height:52px;padding:0 26px;font-size:15px;border-radius:var(--r-pill)}
/* glass secondary for dark / mesh heroes */
.fw-btn--l-ondark{background:color-mix(in oklab,#fff 8%,transparent);color:var(--l-on-dark-1);
  border-color:var(--l-rule-dark-strong);backdrop-filter:blur(6px)}
.fw-btn--l-ondark:hover{background:color-mix(in oklab,#fff 15%,transparent);border-color:rgba(255,255,255,.28)}

/* =====================================================================
   ICONS — the ONE family: single-stroke utility (Lucide-style), 1.75px,
   currentColor (themes itself on dark). ASCETIC RULE (2026-07-08):
   neutral chips by default; a tinted variant only where the hue means
   something — ONE accent per group. The AI/enrich mark = sparkles.
   Never emoji. (The v2 cold-palette pictograms are retired from UI —
   brand illustration archive only; see Pictogram Guidelines v2.html.)
   ===================================================================== */
.fw-l-picto{width:48px;height:48px;border-radius:var(--r-3);display:grid;place-items:center;flex:none;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink-2)}
.fw-l-picto svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fw-l-picto--lg{width:64px;height:64px;border-radius:var(--l-r-lg)}
.fw-l-picto--lg svg{width:30px;height:30px}
.fw-l-picto--sm{width:34px;height:34px;border-radius:8px}
.fw-l-picto--sm svg{width:18px;height:18px}
.fw-l-picto--voltage{color:var(--voltage);background:var(--voltage-tint);border-color:transparent}
.fw-l-picto--azure{color:var(--l-azure-ink);background:var(--l-azure-tint);border-color:transparent}
.fw-l-picto--fuchsia{color:var(--l-fuchsia-ink);background:var(--l-fuchsia-tint);border-color:transparent}
.fw-l-picto--emerald{color:var(--l-emerald-ink);background:var(--l-emerald-tint);border-color:transparent}
.fw-l-picto--coral{color:var(--l-coral-ink);background:var(--l-coral-tint);border-color:transparent}
.fw-l-picto--gold{color:var(--signal-amber-ink);background:var(--l-gold-tint);border-color:transparent}
.fw-l-picto--violet{color:var(--l-violet-ink);background:var(--l-violet-tint);border-color:transparent}
.fw-l-picto--grad{color:#fff;background:var(--l-grad-flow);border-color:transparent;box-shadow:var(--l-glow-voltage)}
.fw-l-dark .fw-l-picto{background:var(--l-dark-2);border-color:var(--l-rule-dark);color:var(--l-on-dark-1)}

/* feature row — docks to the spine rather than sitting in a generic bento card */
.fw-l-feat{display:flex;gap:16px;align-items:flex-start}
.fw-l-feat h3{font:600 var(--l-fs-h3)/1.15 var(--l-font-display);letter-spacing:var(--track-tight);margin:4px 0 6px;color:var(--ink-1)}
.fw-l-feat p{margin:0;color:var(--ink-3);font-size:var(--l-fs-body);line-height:1.5;max-width:44ch}
.fw-l-dark .fw-l-feat h3{color:var(--l-on-dark-1)}
.fw-l-dark .fw-l-feat p{color:var(--l-on-dark-2)}

/* channel chip — colour identity WITHOUT reproducing a brand's logo */
.fw-l-chan{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
  color:var(--ink-3);padding:7px 13px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);background:var(--surface)}
.fw-l-chan i{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.fw-l-dark .fw-l-chan{color:var(--l-on-dark-2);border-color:var(--l-rule-dark-strong);background:transparent}

/* =====================================================================
   MESH — animated node network (3D-feel). The next level of the current
   Vanta hero: a living pipeline, brand-coloured, meaningful. JS paints
   the <canvas>; this is the shell + radial vignette. Dark sections only.
   ===================================================================== */
.fw-l-mesh{position:relative;isolation:isolate;background:var(--l-mesh-bg);overflow:clip}
.fw-l-mesh > canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2}
.fw-l-mesh::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 82% at 50% 44%,transparent 30%,
    color-mix(in oklab,var(--l-mesh-bg) 82%,transparent) 74%,var(--l-mesh-bg) 100%)}