/* ── LANDING PAGE ─────────────────────────────────────────────────── */

/* Mini animated visualization per feature card */
function FeatureMotion({ kind, color, idx = 0 }) {
  if (kind === "dots") {
    return (
      <svg viewBox="0 0 200 24" preserveAspectRatio="none" style={{ width: "100%", height: 24 }}>
        <line x1="8" y1="12" x2="192" y2="12" stroke="#e2e8f0" strokeWidth="1" strokeDasharray="3 4" />
        {[0, 0.5, 1].map((d, i) => (
          <circle key={i} r="3" fill={color}>
            <animate attributeName="cx" from="6" to="194" dur="2.4s" repeatCount="indefinite" begin={`${d + idx * 0.1}s`} />
            <animate attributeName="cy" values="12;12" dur="2.4s" repeatCount="indefinite" begin={`${d + idx * 0.1}s`} />
            <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.15;.85;1" dur="2.4s" repeatCount="indefinite" begin={`${d + idx * 0.1}s`} />
          </circle>
        ))}
        <rect x="0" y="6" width="14" height="12" rx="3" fill={`${color}1a`} stroke={color} strokeWidth="1" />
        <rect x="186" y="6" width="14" height="12" rx="3" fill={color} />
      </svg>
    );
  }
  if (kind === "nodes") {
    return (
      <svg viewBox="0 0 200 24" preserveAspectRatio="none" style={{ width: "100%", height: 24 }}>
        {/* trigger → action → action chain */}
        {[{ x: 10 }, { x: 75 }, { x: 140 }, { x: 192 }].map((n, i) => (
          <g key={i}>
            <circle cx={n.x} cy="12" r="5" fill={i === 0 ? `${color}1a` : color} stroke={color} strokeWidth="1.5">
              {i > 0 && <animate attributeName="r" values="3;5.5;5" dur="2.4s" repeatCount="indefinite" begin={`${(i - 1) * 0.6 + idx * 0.2}s`} />}
            </circle>
            {i < 3 && <line x1={n.x + 6} y1="12" x2={[75, 140, 192][i] - 6} y2="12" stroke="#e2e8f0" strokeWidth="1.5" />}
          </g>
        ))}
        {/* pulse traveling */}
        <circle r="2.5" fill="#fff" stroke={color} strokeWidth="1.5">
          <animate attributeName="cx" values="10;75;75;140;140;192" keyTimes="0;.3;.4;.65;.7;1" dur="3.2s" repeatCount="indefinite" />
          <animate attributeName="cy" values="12" dur="3.2s" repeatCount="indefinite" />
        </circle>
      </svg>
    );
  }
  if (kind === "bars") {
    const bars = [40, 60, 35, 70, 55, 85, 65, 90];
    return (
      <div style={{ display: "flex", gap: 4, alignItems: "flex-end", height: 30, paddingTop: 4 }}>
        {bars.map((h, i) => (
          <div key={i} style={{
            flex: 1, height: `${h}%`,
            background: `linear-gradient(180deg, ${color}, ${color}66)`,
            borderRadius: 2,
            animation: `kr-feat-bar-grow .8s var(--ease) ${i * 0.06}s both`,
            transformOrigin: "bottom",
          }} />
        ))}
        <style>{`@keyframes kr-feat-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }`}</style>
      </div>
    );
  }
  if (kind === "score") {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 8, height: 30 }}>
        <span style={{ fontSize: 9, fontWeight: 800, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>Score</span>
        <div style={{ flex: 1, height: 6, borderRadius: 999, background: "#f1f5f9", overflow: "hidden", position: "relative" }}>
          <div style={{
            position: "absolute", left: 0, top: 0, bottom: 0, width: "92%",
            background: `linear-gradient(90deg, ${color}, #E0B842)`,
            borderRadius: 999,
            animation: "kr-feat-fill 2s var(--ease) forwards",
          }} />
        </div>
        <span className="mono" style={{ fontSize: 10, fontWeight: 700, color }}>92</span>
        <style>{`@keyframes kr-feat-fill { from { width: 0; } to { width: 92%; } }`}</style>
      </div>
    );
  }
  if (kind === "avatars") {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 6, height: 30 }}>
        <div style={{ display: "flex" }}>
          {["#3b82f6","#8b5cf6","#10b981","#C9A227","#ef4444"].map((c, i) => (
            <span key={i} style={{
              width: 22, height: 22, borderRadius: "50%", background: c,
              marginLeft: i === 0 ? 0 : -6, border: "2px solid #fff",
              animation: `kr-feat-pop .4s var(--ease) ${i * 0.08}s both`,
              boxShadow: "0 2px 4px rgba(15,23,42,.1)",
            }} />
          ))}
        </div>
        <span style={{ marginLeft: 4, fontSize: 11, fontWeight: 700, color: "var(--muted)" }}>
          <span style={{ color: "var(--emerald)", display: "inline-flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--emerald)" }} className="kr-pulse-dot" />
            online
          </span>
        </span>
        <style>{`@keyframes kr-feat-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }`}</style>
      </div>
    );
  }
  if (kind === "shield") {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 8, height: 30 }}>
        {["SOC 2", "GDPR", "AES-256", "TLS 1.3"].map((b, i) => (
          <span key={b} className="mono" style={{
            padding: "3px 7px", borderRadius: 6,
            fontSize: 9, fontWeight: 700, color,
            background: `${color}0d`, border: `1px solid ${color}33`,
            animation: `kr-feat-pop .4s var(--ease) ${i * 0.1}s both`,
          }}>
            {b}
          </span>
        ))}
      </div>
    );
  }
  return null;
}

/* Rotating hero pill — cycles through live brand messages */
function RotatingHeroPill() {
  const MSGS = [
    { text: "Now in public beta · v2.6",                color: "var(--emerald)" },
    { text: "12 new leads captured · last minute",      color: "#3b82f6" },
    { text: "500+ sales teams already on Kredoo",       color: "#8b5cf6" },
    { text: "n8n flows fired · 8,420 times today",      color: "var(--gold)" },
  ];
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI(v => (v + 1) % MSGS.length), 3200);
    return () => clearInterval(t);
  }, []);
  const m = MSGS[i];
  return (
    <div className="kr-pill" style={{ overflow: "hidden" }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: m.color, boxShadow: `0 0 0 4px ${m.color}28`, flexShrink: 0 }} className="kr-pulse-dot" />
      <span key={i} style={{ display: "inline-block", animation: "kr-rise .4s var(--ease)", color: "var(--muted)" }}>{m.text}</span>
    </div>
  );
}

/* ── LANDING PAGE ─────────────────────────────────────────────────── */

function LandingPage() {
  return (
    <div className="kr-page" style={{ minHeight: "100vh", background: "#fff", color: "var(--ink)" }}>
      <Navbar route="" />

      {/* ════════ HERO ════════ */}
      <section className="kr-hero-section" style={{ position: "relative", overflow: "hidden", paddingTop: 130, paddingBottom: 80 }}>
        {/* Particle field full-bleed */}
        <div style={{ position: "absolute", inset: 0 }}>
          <ParticleField density={80} color="#3b82f6" opacity={0.4} accent="#C9A227" speed={0.3} />
        </div>
        <div className="kr-dots" style={{ position: "absolute", inset: 0, opacity: .45, pointerEvents: "none" }} />
        {/* Orbs */}
        <div style={{ position: "absolute", top: -120, left: -80, width: 520, height: 520, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(59,130,246,.18) 0%, transparent 70%)",
          filter: "blur(40px)", animation: "kr-orb-drift 14s ease-in-out infinite", pointerEvents: "none" }} />
        <div style={{ position: "absolute", top: -60, right: -60, width: 460, height: 460, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(201,162,39,.12) 0%, transparent 70%)",
          filter: "blur(36px)", animation: "kr-orb-drift 18s ease-in-out infinite", animationDelay: "-6s", pointerEvents: "none" }} />

        <div className="kr-container" style={{ position: "relative", maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>
          <div className="kr-hero-grid">
            {/* COPY */}
            <div className="kr-hero-copy" style={{ animation: "kr-rise-slow .8s var(--ease)" }}>
              <RotatingHeroPill />

              <AnimatedHeading
                as="h1" className="display"
                style={{ marginTop: 18, fontSize: "clamp(36px, 5.5vw, 72px)", lineHeight: 1.05, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.03em" }}
                motion="word-up"
                lines={[
                  "Capture every lead.",
                  { text: "Close more deals.", gradient: true, underline: true },
                ]}
              />

              <p style={{ marginTop: 20, fontSize: 15, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500, maxWidth: 520 }}>
                Kredoo is the modern sales CRM that auto-captures leads from Meta &amp; Google Ads,
                automates follow-ups with n8n, and gives your team a real-time view of every deal in flight.
              </p>

              <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a href="/get-started" className="kr-cta-primary">Start free trial <span className="kr-arrow">→</span></a>
                <a href="/login" className="kr-cta-ghost">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3" /></svg>
                  Watch 90‑sec demo
                </a>
              </div>

              <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 22, flexWrap: "wrap", fontSize: 12, fontWeight: 700, color: "var(--muted)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}><Check size={14} />Live in 5 minutes</div>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}><Check size={14} />No credit card</div>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}><Check size={14} />Built for sales teams</div>
              </div>

              {/* Live ticker */}
              <div style={{ marginTop: 36, maxWidth: 480 }}>
                <LiveTicker />
              </div>
            </div>

            {/* HERO VISUAL */}
            <div className="kr-hero-visual" style={{ animation: "kr-rise-slow .9s .15s var(--ease) both" }}>
              {/* radial glow behind */}
              <div style={{
                position: "absolute", inset: -40, borderRadius: 40, zIndex: 0,
                background: "radial-gradient(60% 60% at 50% 50%, rgba(59,130,246,.18), transparent 70%), radial-gradient(40% 40% at 70% 30%, rgba(201,162,39,.12), transparent 70%)",
              }} />
              <div className="kr-float kr-dash-wrapper" style={{ position: "relative", zIndex: 1 }}>
                <AnimatedDashboard />
              </div>

              {/* Floating chip — top left */}
              <div className="kr-float-soft kr-hero-chip" style={{
                position: "absolute", top: 70, left: -32, zIndex: 2,
                background: "#fff", border: "1px solid var(--line)", borderRadius: 16,
                padding: "10px 14px", display: "flex", alignItems: "center", gap: 10,
                boxShadow: "0 18px 40px -12px rgba(15,23,42,.22)",
                animationDelay: "-1s",
              }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: "linear-gradient(135deg,#3b82f6,#1d4ed8)", display: "grid", placeItems: "center", color: "#fff" }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 800, color: "var(--ink)" }}>New lead · Meta Ads</div>
                  <div style={{ fontSize: 10, fontWeight: 600, color: "var(--muted-2)" }}>just now · auto‑synced</div>
                </div>
              </div>

              {/* Floating chip — bottom right */}
              <div className="kr-float-soft kr-hero-chip" style={{
                position: "absolute", bottom: 90, right: -28, zIndex: 2,
                background: "#fff", border: "1px solid var(--line)", borderRadius: 16,
                padding: "10px 14px", display: "flex", alignItems: "center", gap: 10,
                boxShadow: "0 18px 40px -12px rgba(15,23,42,.22)",
                animationDelay: "-2.4s",
              }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: "rgba(16,185,129,.14)", display: "grid", placeItems: "center" }}>
                  <Check size={16} />
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 800, color: "var(--ink)" }}>Follow‑up sent</div>
                  <div style={{ fontSize: 10, fontWeight: 600, color: "var(--muted-2)" }}>n8n · 2s ago</div>
                </div>
              </div>

              {/* Floating gold KPI */}
              <div className="kr-float-soft kr-hero-chip" style={{
                position: "absolute", bottom: -22, left: 24, zIndex: 2,
                background: "linear-gradient(135deg,#fff, #FFFBEF)",
                border: "1px solid rgba(201,162,39,.35)", borderRadius: 18,
                padding: "12px 16px", display: "flex", alignItems: "center", gap: 12,
                boxShadow: "0 20px 50px -16px rgba(201,162,39,.4)",
                animationDelay: "-3.6s",
              }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "linear-gradient(135deg,#E0B842,#C9A227)", display: "grid", placeItems: "center", color: "#fff", boxShadow: "inset 0 1px 0 rgba(255,255,255,.4)" }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15 9 22 9 16.5 13.5 18.5 21 12 17 5.5 21 7.5 13.5 2 9 9 9 12 2" /></svg>
                </div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 800, color: "var(--ink)" }} className="display"><Counter to={94} suffix="%" /></div>
                  <div style={{ fontSize: 10, fontWeight: 700, color: "#8a6a14" }}>Faster response time</div>
                </div>
              </div>
            </div>
          </div>

          {/* Scroll indicator */}
          <div style={{ marginTop: 64, display: "flex", justifyContent: "center" }}>
            <a href="#features" style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 8, color: "var(--muted)", textDecoration: "none", animation: "kr-scroll-bob 2.4s ease-in-out infinite" }}>
              <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--muted-2)" }}>Scroll to explore</span>
              <span style={{
                width: 26, height: 40, borderRadius: 13,
                border: "1.5px solid var(--line-2)",
                position: "relative",
                display: "block",
              }}>
                <span style={{
                  position: "absolute", left: "50%", top: 8, width: 4, height: 8, marginLeft: -2,
                  borderRadius: 2, background: "var(--gold)",
                  animation: "kr-scroll-dot 1.8s ease-in-out infinite",
                }} />
              </span>
            </a>
          </div>
        </div>
        <style>{`
          @keyframes kr-scroll-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
          @keyframes kr-scroll-dot {
            0%   { transform: translateY(0); opacity: 1; }
            70%  { transform: translateY(14px); opacity: 0; }
            100% { transform: translateY(0); opacity: 0; }
          }
        `}</style>
      </section>

      {/* ════════ MARQUEE ════════ */}
      <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "26px 0", overflow: "hidden", background: "#fff" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 24px", marginBottom: 14 }}>
          <p style={{ textAlign: "center", fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--muted-2)" }}>
            Built around the channels early sales teams already use
          </p>
        </div>
        <div style={{ overflow: "hidden" }}>
          <div className="kr-marquee" style={{ gap: 48, alignItems: "center", color: "var(--muted-2)" }}>
            {[...Array(2)].map((_, dup) => (
              <div key={dup} style={{ display: "flex", gap: 48, alignItems: "center", paddingRight: 48 }}>
                {["Meta Ads", "Google Ads", "WhatsApp", "n8n", "LinkedIn", "Instagram", "Gmail", "Outlook", "CSV imports", "Booking links", "Webhooks", "Slack"].map((name, i) => (
                  <span key={i} className="display" style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-.02em", whiteSpace: "nowrap" }}>{name}</span>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ════════ FEATURES ════════ */}
      <section id="features" style={{ position: "relative", padding: "100px 0" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>
          <div style={{ maxWidth: 680, margin: "0 auto", textAlign: "center" }}>
            <p style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)" }}>Everything you need</p>
            <AnimatedHeading
              as="h2" className="display"
              style={{ marginTop: 12, fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08, color: "var(--ink)", fontWeight: 800, letterSpacing: "-.025em" }}
              motion="letter-up"
              lines={["Built for the way modern", "sales teams actually work"]}
            />
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--muted)", fontWeight: 500 }}>
              From the first ad click to the closed deal, Kredoo keeps your pipeline moving — without the manual data entry.
            </p>
          </div>

          <div className="kr-feat-grid" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
            {[
              { color: "#3b82f6", bg: "rgba(59,130,246,.10)", title: "Auto-capture leads", desc: "Connect Meta & Google once. New leads land in your pipeline in seconds, fully enriched.",
                metric: "< 2s", metricLabel: "sync time", motion: "dots",
                icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg> },
              { color: "#8b5cf6", bg: "rgba(139,92,246,.10)", title: "n8n automations", desc: "Trigger follow-ups, SMS, and Slack pings the moment a lead matches your rules. No code.",
                metric: "3 flows", metricLabel: "running", motion: "nodes",
                icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M6 21V9a9 9 0 0 0 9 9" /></svg> },
              { color: "#10b981", bg: "rgba(16,185,129,.10)", title: "Real-time analytics", desc: "Win rate, source ROI, and pipeline velocity, all updated live. No more weekly spreadsheets.",
                metric: "↑ 34%", metricLabel: "this week", motion: "bars",
                icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" /></svg> },
              { color: "#C9A227", bg: "rgba(201,162,39,.10)", title: "Lead scoring", desc: "Surface the leads most likely to close, ranked by behaviour, source, and engagement signals.",
                metric: "92/100", metricLabel: "top score", motion: "score",
                icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18" /><polyline points="17 6 23 6 23 12" /></svg> },
              { color: "#7c3aed", bg: "rgba(124,58,237,.10)", title: "Team workspace", desc: "Round-robin assignments, shared notes, and role-based access — all on one canvas.",
                metric: "12 ppl", metricLabel: "online now", motion: "avatars",
                icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg> },
              { color: "#ef4444", bg: "rgba(239,68,68,.10)", title: "Enterprise security", desc: "SOC 2 Type II, EU data residency, SSO. So IT can sleep at night.",
                metric: "SOC 2", metricLabel: "type II", motion: "shield",
                icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg> },
            ].map((card, idx) => (
              <div key={card.title} className="kr-feat-card" style={{
                position: "relative",
                borderRadius: 20, background: "#fff",
                border: "1px solid var(--line)", padding: 24,
                boxShadow: "0 1px 0 rgba(15,23,42,.02)",
                transition: "transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)",
                overflow: "hidden",
                display: "flex", flexDirection: "column",
              }}>
                {/* traveling top accent */}
                <div style={{ position: "absolute", left: 0, right: 0, top: 0, height: 2, overflow: "hidden", opacity: .9 }}>
                  <div style={{
                    position: "absolute", top: 0, bottom: 0, width: "40%",
                    background: `linear-gradient(90deg, transparent, ${card.color}, transparent)`,
                    animation: `kr-feat-shimmer 3.6s linear ${idx * 0.4}s infinite`,
                  }} />
                </div>

                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 16 }}>
                  <div style={{
                    position: "relative",
                    width: 46, height: 46, borderRadius: 14, background: card.bg, color: card.color,
                    display: "grid", placeItems: "center",
                  }}>
                    {/* expanding ring */}
                    <span style={{
                      position: "absolute", inset: -3, borderRadius: 16,
                      border: `1.5px solid ${card.color}55`,
                      animation: `kr-feat-ripple 2.4s ease-out ${idx * 0.35}s infinite`,
                    }} />
                    {card.icon}
                  </div>
                  {/* live metric */}
                  <div style={{
                    textAlign: "right",
                    padding: "6px 10px", borderRadius: 10,
                    background: `${card.color}0d`, border: `1px solid ${card.color}26`,
                  }}>
                    <p className="display" style={{ margin: 0, fontSize: 13, fontWeight: 800, color: card.color, lineHeight: 1, letterSpacing: "-.01em" }}>{card.metric}</p>
                    <p style={{ margin: "2px 0 0", fontSize: 8, fontWeight: 800, color: card.color, opacity: .75, letterSpacing: ".08em", textTransform: "uppercase" }}>{card.metricLabel}</p>
                  </div>
                </div>

                <h3 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: "var(--ink)", letterSpacing: "-.015em" }} className="display">{card.title}</h3>
                <p style={{ margin: "8px 0 0", fontSize: 13, lineHeight: 1.55, color: "var(--muted)", fontWeight: 500 }}>{card.desc}</p>

                {/* per-card animated mini-viz */}
                <div style={{ marginTop: "auto", paddingTop: 16, height: 38 }}>
                  <FeatureMotion kind={card.motion} color={card.color} idx={idx} />
                </div>

                {/* hover glow */}
                <div style={{ position: "absolute", inset: 0, pointerEvents: "none", background: `radial-gradient(120% 80% at 100% 0%, ${card.color}10, transparent 50%)` }} />
              </div>
            ))}
          </div>
        </div>

        <style>{`
          .kr-feat-card:hover{transform:translateY(-4px);border-color:#dbe2ec;box-shadow:0 20px 40px -16px rgba(15,23,42,.18)}
          @keyframes kr-feat-shimmer { 0%{left:-40%} 100%{left:100%} }
          @keyframes kr-feat-ripple {
            0%   { transform: scale(1);    opacity: .85; }
            70%  { transform: scale(1.45); opacity: 0; }
            100% { transform: scale(1);    opacity: .85; }
          }
        `}</style>
      </section>

      {/* ════════ HOW IT WORKS ════════ */}
      <HowItWorks />

      {/* ════════ PIPELINE SECTION ════════ */}
      <PipelineSection />

      {/* ════════ INTEGRATIONS ════════ */}
      <IntegrationsSection />

      {/* ════════ PRODUCT PROOF ════════ */}
      <ProductProof />

      {/* ════════ PRICING ════════ */}
      {/* TEMPORARILY HIDDEN — pricing TBD. Restore by uncommenting:
      <PricingSection />
      */}

      {/* ════════ FAQ ════════ */}
      <FAQSection />

      {/* ════════ FINAL CTA (pulse rings + glass card) ════════ */}
      <FinalCTA />

      {/* ════════ FOOTER ════════ */}
      <FullFooter />
    </div>
  );
}

Object.assign(window, { LandingPage });