/* global React, Logo, Counter, Reveal, GlowCard, BlueprintHouse, Sparkline, DonutChart, Icon, DimCorner */
// Hero, Nav, Marquee, Metrics — v2 editorial / blueprint

const { useEffect, useState } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav style={{
      position: "fixed",
      top: 18,
      left: "50%",
      transform: "translateX(-50%)",
      width: "calc(100% - 40px)",
      maxWidth: 1340,
      zIndex: 50,
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      padding: "10px 14px 10px 20px",
      borderRadius: 999,
      border: "1px solid var(--border)",
      background: scrolled ? "rgba(6, 12, 24, 0.85)" : "rgba(6, 12, 24, 0.55)",
      backdropFilter: "blur(16px)",
      WebkitBackdropFilter: "blur(16px)",
      transition: "background 0.3s, box-shadow 0.3s",
      boxShadow: scrolled ? "0 18px 40px -20px rgba(0,209,255,0.4), 0 0 0 1px rgba(0,209,255,0.1)" : "none",
    }}>
      <div className="row gap-16">
        <Logo size={30} />
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.24em", color: "var(--cyan-2)", padding: "3px 8px", border: "1px solid var(--border)", borderRadius: 4 }}>
          MK.07 · 2026.Q2
        </span>
      </div>
      <div className="row gap-24" style={{ fontSize: 13, color: "var(--ink-2)" }}>
        {["Platform", "Features", "Intelligence", "Pricing", "Customers"].map(item => (
          <a key={item} href={`#${item.toLowerCase()}`} style={{
            color: "inherit",
            textDecoration: "none",
            padding: "6px 2px",
            transition: "color 0.2s",
          }}
          onMouseEnter={e => e.currentTarget.style.color = "var(--cyan-2)"}
          onMouseLeave={e => e.currentTarget.style.color = "var(--ink-2)"}
          >{item}</a>
        ))}
      </div>
      <div className="row gap-12">
        <a href="#login" style={{ color: "var(--ink-2)", fontSize: 13, textDecoration: "none" }}>Sign in</a>
        <a href="#demo" className="btn btn-orange" style={{ height: 38, padding: "0 16px", fontSize: 13 }}>
          Book Demo <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

// ------------ Floating dashboard mockup ----------------
function HeroDashboard() {
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 720, perspective: 1600 }}>
      <div className="ring-glow" style={{
        width: 600, height: 600, top: -120, left: -50,
        background: "radial-gradient(circle, rgba(0,209,255,0.45), transparent 60%)",
      }}/>
      <div className="ring-glow" style={{
        width: 400, height: 400, bottom: -100, right: -80,
        background: "radial-gradient(circle, rgba(255,138,30,0.25), transparent 60%)",
      }}/>

      <div style={{ position: "absolute", top: -20, left: "50%", transform: "translateX(-45%)", opacity: 0.4, zIndex: 0 }}>
        <BlueprintHouse size={700} withMeasurements={false} withScan={true}/>
      </div>

      <div style={{
        position: "relative",
        zIndex: 2,
        transform: "rotateX(2deg) rotateY(-6deg)",
        transformStyle: "preserve-3d",
        marginLeft: 30,
        marginTop: 70,
      }}>
        <GlowCard style={{ width: 620, padding: 0, background: "linear-gradient(180deg, rgba(8,16,32,0.95), rgba(4,10,22,0.95))" }}>
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "14px 20px",
            borderBottom: "1px solid var(--border)",
            background: "rgba(0,209,255,0.04)",
          }}>
            <div className="row gap-12">
              <div style={{ display: "flex", gap: 6 }}>
                <span style={{ width:10,height:10,borderRadius:"50%",background:"#ff5f57"}}/>
                <span style={{ width:10,height:10,borderRadius:"50%",background:"#ffbd2e"}}/>
                <span style={{ width:10,height:10,borderRadius:"50%",background:"#28c840"}}/>
              </div>
              <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.16em" }}>OWNERS BOX · LIVE</span>
            </div>
            <div className="row gap-8">
              <span className="live-dot"/>
              <span className="mono" style={{ fontSize: 11, color: "var(--green)" }}>OPS ONLINE</span>
            </div>
          </div>

          <div style={{ padding: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 18 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--muted)", marginBottom: 4 }} className="mono">GOOD MORNING, JUSTIN</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>Today's command view</div>
              </div>
              <span className="chip">This week</span>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 18 }}>
              {[
                { label: "Active Jobs", v: 27, accent: "var(--cyan)", icon: "calendar" },
                { label: "Crews Live", v: 18, accent: "var(--orange)", icon: "crew" },
                { label: "Estimates", v: 14, accent: "var(--green)", icon: "doc" },
                { label: "Revenue", v: "48.7K", accent: "var(--violet)", icon: "money", prefix: "$" },
              ].map(k => (
                <div key={k.label} style={{
                  padding: 12,
                  background: "rgba(0,209,255,0.04)",
                  border: `1px solid rgba(0,209,255,0.16)`,
                  borderRadius: 12,
                }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
                    <span style={{ fontSize: 10, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em" }}>{k.label}</span>
                    <Icon name={k.icon} size={14} stroke={k.accent}/>
                  </div>
                  <div className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, color: k.accent, lineHeight: 1 }}>
                    {k.prefix}{k.v}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 12 }}>
              <div style={{
                padding: 14,
                background: "rgba(4,12,24,0.7)",
                border: "1px solid var(--border)",
                borderRadius: 12,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                  <span style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.12em" }} className="mono">SCHEDULE</span>
                  <span className="chip" style={{ height: 20, fontSize: 9 }}>TODAY</span>
                </div>
                {[
                  { t: "9 AM", title: "Roof Inspection", sub: "123 Maple St", c: "var(--orange)" },
                  { t: "11 AM", title: "Estimate Review", sub: "456 Oak Ave", c: "var(--cyan)" },
                  { t: "1 PM", title: "Material Delivery", sub: "789 Pine Rd", c: "var(--green)" },
                  { t: "3 PM", title: "Project Walkthrough", sub: "321 Cedar Ln", c: "var(--violet)" },
                ].map((r, i) => (
                  <div key={i} style={{
                    display: "grid",
                    gridTemplateColumns: "40px 4px 1fr",
                    gap: 10,
                    alignItems: "center",
                    padding: "6px 0",
                  }}>
                    <span className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>{r.t}</span>
                    <span style={{ width: 3, height: 24, background: r.c, borderRadius: 2, boxShadow: `0 0 8px ${r.c}` }}/>
                    <div>
                      <div style={{ fontSize: 11, fontWeight: 600 }}>{r.title}</div>
                      <div style={{ fontSize: 10, color: "var(--muted)" }}>{r.sub}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <div style={{
                  padding: 14,
                  background: "rgba(4,12,24,0.7)",
                  border: "1px solid var(--border)",
                  borderRadius: 12,
                  display: "flex",
                  alignItems: "center",
                  gap: 14,
                }}>
                  <div style={{ position: "relative" }}>
                    <DonutChart size={84} stroke={9} segments={[
                      { value: 9, color: "var(--cyan)" },
                      { value: 6, color: "var(--orange)" },
                      { value: 5, color: "var(--green)" },
                      { value: 7, color: "var(--violet)" },
                    ]}/>
                    <div style={{
                      position: "absolute", inset: 0,
                      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                    }}>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, lineHeight: 1 }}>27</div>
                      <div style={{ fontSize: 8, color: "var(--muted)" }}>TOTAL</div>
                    </div>
                  </div>
                  <div style={{ fontSize: 10, color: "var(--muted)", display: "flex", flexDirection: "column", gap: 4 }}>
                    <div className="row gap-8"><span style={{width:6,height:6,background:"var(--cyan)",borderRadius:"50%"}}/>9 In progress</div>
                    <div className="row gap-8"><span style={{width:6,height:6,background:"var(--orange)",borderRadius:"50%"}}/>6 Scheduled</div>
                    <div className="row gap-8"><span style={{width:6,height:6,background:"var(--green)",borderRadius:"50%"}}/>5 Completed</div>
                    <div className="row gap-8"><span style={{width:6,height:6,background:"var(--violet)",borderRadius:"50%"}}/>7 Pending</div>
                  </div>
                </div>
                <div style={{
                  padding: 14,
                  background: "rgba(4,12,24,0.7)",
                  border: "1px solid var(--border)",
                  borderRadius: 12,
                }}>
                  <div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.14em", marginBottom: 8 }} className="mono">REVENUE · 7D</div>
                  <Sparkline data={[12,18,15,22,28,24,32,38,34,42,48,46,54]} color="var(--cyan)" width={210} height={42}/>
                </div>
              </div>
            </div>
          </div>
        </GlowCard>
      </div>

      <FloatingCard style={{ top: 40, left: -40, animationDelay: "0s" }} size="lg">
        <div className="row gap-12" style={{ marginBottom: 8 }}>
          <Icon name="spark" size={16} stroke="var(--cyan)"/>
          <span className="mono" style={{ fontSize: 10, color: "var(--cyan)", letterSpacing: "0.18em" }}>AI COPILOT</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Suggested action</div>
        <div style={{ fontSize: 11, color: "var(--ink-2)", lineHeight: 1.4 }}>
          Reroute crew B to <span style={{ color: "var(--cyan)" }}>456 Oak Ave</span> — saves 38 min.
        </div>
      </FloatingCard>

      <FloatingCard style={{ top: 280, left: -80, animationDelay: "1.4s" }} size="sm">
        <div className="row gap-8" style={{ marginBottom: 6 }}>
          <span className="live-dot"/>
          <span className="mono" style={{ fontSize: 9, color: "var(--green)", letterSpacing: "0.16em" }}>ON TRACK</span>
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, lineHeight: 1 }}>
          <span style={{ color: "var(--green)" }}>98%</span>
        </div>
        <div style={{ fontSize: 10, color: "var(--muted)" }}>Workflow accuracy</div>
      </FloatingCard>

      <FloatingCard style={{ bottom: -20, right: -30, animationDelay: "2.2s" }} size="lg">
        <div className="row gap-12" style={{ marginBottom: 10 }}>
          <Icon name="bell" size={16} stroke="var(--orange)"/>
          <span className="mono" style={{ fontSize: 10, color: "var(--orange)", letterSpacing: "0.18em" }}>UP NEXT · 10:00 AM</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600 }}>Roof Inspection</div>
        <div style={{ fontSize: 11, color: "var(--ink-2)", marginBottom: 8 }}>123 Maple St · 12 min away</div>
        <div className="row gap-8">
          <span className="chip orange" style={{ height: 20, fontSize: 9 }}>LIVE</span>
          <span className="chip" style={{ height: 20, fontSize: 9 }}>CREW A</span>
        </div>
      </FloatingCard>

      <FloatingCard style={{ top: 200, right: -50, animationDelay: "3s" }} size="sm">
        <div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.14em" }} className="mono">FORECAST</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, lineHeight: 1.1 }}>
          +<Counter to={35} suffix="%"/>
        </div>
        <Sparkline data={[10,12,11,18,22,28,32]} color="var(--cyan)" width={88} height={22}/>
      </FloatingCard>
    </div>
  );
}

function FloatingCard({ children, style = {}, size = "md" }) {
  const pad = size === "sm" ? 12 : size === "lg" ? 16 : 14;
  const w = size === "sm" ? 150 : size === "lg" ? 220 : 180;
  return (
    <div style={{
      position: "absolute",
      width: w,
      padding: pad,
      background: "linear-gradient(180deg, rgba(8,18,36,0.92), rgba(4,10,22,0.88))",
      border: "1px solid rgba(0,209,255,0.35)",
      borderRadius: 14,
      backdropFilter: "blur(14px)",
      boxShadow: "0 18px 40px -10px rgba(0,209,255,0.45), 0 0 0 1px rgba(0,209,255,0.18)",
      animation: "floatY 6s ease-in-out infinite",
      zIndex: 3,
      ...style,
    }}>
      <span className="corner tl"></span>
      <span className="corner tr"></span>
      <span className="corner bl"></span>
      <span className="corner br"></span>
      {children}
    </div>
  );
}

// ============== COMMAND STRIP — live ops ticker ==============
function CommandStrip() {
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "10px 22px",
      borderTop: "1px solid var(--border)",
      borderBottom: "1px solid var(--border)",
      background: "linear-gradient(180deg, rgba(0,209,255,0.05), rgba(0,209,255,0.02))",
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      letterSpacing: "0.18em",
      color: "var(--ink-2)",
      overflow: "hidden",
    }}>
      <div className="row gap-16" style={{ flexShrink: 0 }}>
        <span className="live-dot"/>
        <span style={{ color: "var(--green)" }}>OPS ONLINE</span>
        <span style={{ color: "var(--dim)" }}>/</span>
        <span>MK.07 · 2026.Q2</span>
      </div>
      <div style={{
        overflow: "hidden",
        flex: 1,
        margin: "0 40px",
        maskImage: "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)",
      }}>
        <div style={{
          display: "inline-flex",
          gap: 48,
          whiteSpace: "nowrap",
          animation: "scroll 60s linear infinite",
        }}>
          {[
            ["CREW A", "→ 123 MAPLE ST", "var(--cyan)"],
            ["NEXT JOB", "10:00 AM · ROOF INSPECTION", "var(--orange)"],
            ["AI COPILOT", "REROUTE CREW B → SAVES 38 MIN", "var(--cyan)"],
            ["PAYMENT", "+$8,250 · MAPLE PROJECT", "var(--green)"],
            ["ESTIMATE", "ACCEPTED · $14,800", "var(--cyan)"],
            ["WEATHER", "CLEAR · 72°F · WIND 4MPH", "var(--ink-2)"],
            ["18 CREWS ACTIVE", "· 27 JOBS LIVE", "var(--orange)"],
            ["UPTIME", "99.99% · 142MS SYNC", "var(--green)"],
          ].concat([
            ["CREW A", "→ 123 MAPLE ST", "var(--cyan)"],
            ["NEXT JOB", "10:00 AM · ROOF INSPECTION", "var(--orange)"],
            ["AI COPILOT", "REROUTE CREW B → SAVES 38 MIN", "var(--cyan)"],
            ["PAYMENT", "+$8,250 · MAPLE PROJECT", "var(--green)"],
            ["ESTIMATE", "ACCEPTED · $14,800", "var(--cyan)"],
            ["WEATHER", "CLEAR · 72°F · WIND 4MPH", "var(--ink-2)"],
          ]).map((it, i) => (
            <span key={i} style={{ display: "inline-flex", gap: 10, alignItems: "center" }}>
              <span style={{ color: it[2], fontWeight: 600 }}>{it[0]}</span>
              <span style={{ color: "var(--muted)" }}>{it[1]}</span>
            </span>
          ))}
        </div>
      </div>
      <div className="row gap-16" style={{ flexShrink: 0 }}>
        <span>EVENTS · <span style={{ color: "var(--cyan)" }}>2,847/HR</span></span>
        <span style={{ color: "var(--dim)" }}>/</span>
        <span>SYS · <span style={{ color: "var(--green)" }}>GREEN</span></span>
      </div>
    </div>
  );
}

// ============== PRODUCT WINDOW — clean, detailed Owners Box ==============
function HeroProduct() {
  return (
    <div className="card-sharp" style={{
      position: "relative",
      width: "100%",
      maxWidth: 760,
      height: 560,
      borderRadius: 16,
      overflow: "hidden",
      background: "linear-gradient(180deg, #08111f 0%, #03070f 100%)",
      boxShadow:
        "0 60px 120px -30px rgba(0,209,255,0.5)," +
        "0 30px 60px -20px rgba(0,0,0,0.6)," +
        "0 0 0 1px rgba(0,209,255,0.32) inset",
    }}>
      {/* Title bar */}
      <div style={{
        height: 38,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 14px",
        borderBottom: "1px solid var(--border)",
        background: "linear-gradient(180deg, rgba(8,18,36,1), rgba(4,10,22,1))",
      }}>
        <div className="row gap-12">
          <div style={{ display: "flex", gap: 6 }}>
            <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#ff5f57" }}/>
            <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#ffbd2e" }}/>
            <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#28c840" }}/>
          </div>
          <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.16em" }}>
            lynkeduppro.app <span style={{ color: "var(--dim)" }}>/</span> owners-box
          </span>
        </div>
        <div className="row gap-12">
          <span className="mono" style={{ fontSize: 10, color: "var(--green)" }}>● SYNCED</span>
        </div>
      </div>

      {/* Body: sidebar + main */}
      <div style={{ display: "grid", gridTemplateColumns: "160px 1fr", height: "calc(100% - 38px)" }}>
        {/* Sidebar */}
        <div style={{
          padding: "14px 8px",
          borderRight: "1px solid var(--border)",
          background: "rgba(0,209,255,0.02)",
          display: "flex", flexDirection: "column", gap: 2,
        }}>
          {/* mini logo */}
          <div className="row gap-8" style={{ padding: "6px 10px", marginBottom: 8 }}>
            <svg width="18" height="18" viewBox="0 0 48 48">
              <polygon points="24,3 43,13.5 43,34.5 24,45 5,34.5 5,13.5"
                fill="rgba(0,40,70,0.8)" stroke="#00d1ff" strokeWidth="2"/>
              <path d="M16 18 Q24 12 32 18 Q26 22 24 24 Q22 26 16 30 Q24 36 32 30"
                fill="none" stroke="#bff3ff" strokeWidth="3" strokeLinecap="round"/>
            </svg>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 600, letterSpacing: "-0.01em" }}>
              LynkedUp <span style={{ color: "var(--orange)" }}>Pro</span>
            </span>
          </div>
          {[
            { l: "Owners Box", i: "field", active: true },
            { l: "Dashboard", i: "growth" },
            { l: "Projects", i: "doc" },
            { l: "Leads", i: "lead" },
            { l: "Pipeline", i: "calendar" },
            { l: "LynkDispatch", i: "fleet" },
            { l: "Canvas", i: "spark" },
            { l: "Measurements", i: "target" },
            { l: "AI Assistant", i: "ai" },
            { l: "Settings", i: "shield" },
          ].map(it => (
            <div key={it.l} style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "7px 10px",
              borderRadius: 6,
              fontSize: 11.5,
              color: it.active ? "var(--cyan)" : "var(--ink-2)",
              background: it.active ? "linear-gradient(90deg, rgba(0,209,255,0.18), rgba(0,209,255,0.04))" : "transparent",
              borderLeft: it.active ? "2px solid var(--cyan)" : "2px solid transparent",
              fontWeight: it.active ? 600 : 400,
            }}>
              <Icon name={it.i} size={13} stroke={it.active ? "var(--cyan)" : "var(--muted)"}/>
              <span>{it.l}</span>
            </div>
          ))}
        </div>

        {/* Main */}
        <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
          {/* Top bar */}
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 2 }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.16em", marginBottom: 3 }}>OWNERS BOX</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>
                Good morning, <span style={{ color: "var(--cyan)" }}>Justin</span>
              </div>
            </div>
            <div className="row gap-10">
              <span className="chip" style={{ height: 24, fontSize: 10 }}>This week</span>
              <div style={{ width: 26, height: 26, borderRadius: "50%", background: "linear-gradient(135deg, #ff8a1e, #d96100)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, color: "#1a0800" }}>J</div>
            </div>
          </div>

          {/* KPI strip */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
            {[
              { l: "Appointments", v: "18", s: "Today", c: "var(--cyan)", i: "calendar" },
              { l: "Projects", v: "27", s: "In progress", c: "var(--orange)", i: "hammer" },
              { l: "Estimates", v: "14", s: "Sent", c: "var(--green)", i: "doc" },
              { l: "Revenue", v: "$48.7K", s: "This week", c: "var(--violet)", i: "money" },
            ].map(k => (
              <div key={k.l} style={{
                padding: "10px 12px",
                borderRadius: 9,
                background: `linear-gradient(180deg, ${k.c}18, ${k.c}05)`,
                border: `1px solid ${k.c}40`,
              }}>
                <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
                  <Icon name={k.i} size={12} stroke={k.c}/>
                  <span style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.14em" }} className="mono">{k.l.toUpperCase()}</span>
                </div>
                <div className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: k.c, lineHeight: 1 }}>{k.v}</div>
                <div style={{ fontSize: 9, color: "var(--muted)", marginTop: 3 }}>{k.s}</div>
              </div>
            ))}
          </div>

          {/* Body: schedule + right column */}
          <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 10, flex: 1, minHeight: 0 }}>
            {/* Schedule */}
            <div style={{
              padding: 12,
              border: "1px solid var(--border)",
              borderRadius: 10,
              background: "rgba(4,12,24,0.5)",
              display: "flex", flexDirection: "column", gap: 4,
              overflow: "hidden",
            }}>
              <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
                <span className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.16em" }}>SCHEDULE · TODAY</span>
                <span className="mono" style={{ fontSize: 9, color: "var(--cyan)" }}>4 ITEMS</span>
              </div>
              {[
                { t: "9 AM",  title: "Roof Inspection",     sub: "123 Maple St · Justin J.", c: "var(--orange)" },
                { t: "11 AM", title: "Estimate Review",     sub: "456 Oak Ave · Sarah M.",   c: "var(--cyan)"   },
                { t: "1 PM",  title: "Material Delivery",   sub: "789 Pine Rd · Mike T.",    c: "var(--green)"  },
                { t: "3 PM",  title: "Project Walkthrough", sub: "321 Cedar Ln · Justin J.", c: "var(--violet)" },
              ].map((r, i) => (
                <div key={i} style={{
                  display: "grid",
                  gridTemplateColumns: "36px 3px 1fr",
                  gap: 9,
                  alignItems: "center",
                  padding: "5px 0",
                  borderTop: i ? "1px solid rgba(255,255,255,0.04)" : "none",
                }}>
                  <span className="mono" style={{ fontSize: 9, color: "var(--muted)" }}>{r.t}</span>
                  <span style={{ width: 3, height: 28, background: r.c, borderRadius: 2, boxShadow: `0 0 6px ${r.c}` }}/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.title}</div>
                    <div style={{ fontSize: 9.5, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.sub}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Right column: donut + activity + map */}
            <div style={{ display: "flex", flexDirection: "column", gap: 8, minHeight: 0 }}>
              <div style={{
                padding: 10,
                border: "1px solid var(--border)",
                borderRadius: 10,
                background: "rgba(4,12,24,0.5)",
                display: "flex", alignItems: "center", gap: 10,
              }}>
                <div style={{ position: "relative" }}>
                  <DonutChart size={62} stroke={7} segments={[
                    { value: 9, color: "var(--cyan)" },
                    { value: 6, color: "var(--orange)" },
                    { value: 5, color: "var(--green)" },
                    { value: 7, color: "var(--violet)" },
                  ]}/>
                  <div style={{
                    position: "absolute", inset: 0,
                    display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                  }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 700, lineHeight: 1 }}>27</div>
                  </div>
                </div>
                <div style={{ fontSize: 9, color: "var(--ink-2)", display: "flex", flexDirection: "column", gap: 2.5, flex: 1 }}>
                  <div className="row gap-8" style={{ justifyContent: "space-between" }}>
                    <span className="row gap-8"><span style={{width:5,height:5,background:"var(--cyan)",borderRadius:"50%"}}/>In progress</span>
                    <span className="tabular" style={{ fontWeight: 600 }}>9</span>
                  </div>
                  <div className="row gap-8" style={{ justifyContent: "space-between" }}>
                    <span className="row gap-8"><span style={{width:5,height:5,background:"var(--orange)",borderRadius:"50%"}}/>Scheduled</span>
                    <span className="tabular" style={{ fontWeight: 600 }}>6</span>
                  </div>
                  <div className="row gap-8" style={{ justifyContent: "space-between" }}>
                    <span className="row gap-8"><span style={{width:5,height:5,background:"var(--green)",borderRadius:"50%"}}/>Completed</span>
                    <span className="tabular" style={{ fontWeight: 600 }}>5</span>
                  </div>
                  <div className="row gap-8" style={{ justifyContent: "space-between" }}>
                    <span className="row gap-8"><span style={{width:5,height:5,background:"var(--violet)",borderRadius:"50%"}}/>Pending</span>
                    <span className="tabular" style={{ fontWeight: 600 }}>7</span>
                  </div>
                </div>
              </div>

              <div style={{
                padding: 10,
                border: "1px solid var(--border)",
                borderRadius: 10,
                background: "rgba(4,12,24,0.5)",
                flex: 1,
                minHeight: 0,
              }}>
                <div className="row" style={{ justifyContent: "space-between", marginBottom: 5 }}>
                  <span className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.16em" }}>RECENT ACTIVITY</span>
                  <span className="mono" style={{ fontSize: 9, color: "var(--cyan)" }}>LIVE</span>
                </div>
                {[
                  { c: "var(--cyan)",   t: "New lead added",     s: "John Smith · 34m" },
                  { c: "var(--orange)", t: "Estimate sent",      s: "456 Oak · 1h" },
                  { c: "var(--green)",  t: "Payment received",   s: "$8.2K · 3h" },
                ].map((a, i) => (
                  <div key={i} className="row gap-8" style={{ padding: "3px 0" }}>
                    <span style={{ width: 5, height: 5, borderRadius: "50%", background: a.c, boxShadow: `0 0 6px ${a.c}` }}/>
                    <span style={{ fontSize: 10, fontWeight: 600, flex: 1 }}>{a.t}</span>
                    <span style={{ fontSize: 9, color: "var(--muted)" }} className="mono">{a.s}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// AI Copilot overlay — single confident card
function CopilotOverlay() {
  return (
    <div style={{
      position: "absolute",
      top: 36,
      right: -40,
      width: 270,
      padding: 16,
      background: "linear-gradient(180deg, rgba(8,20,40,0.96), rgba(4,10,22,0.96))",
      border: "1px solid rgba(0,209,255,0.5)",
      borderRadius: 14,
      backdropFilter: "blur(16px)",
      boxShadow: "0 30px 60px -20px rgba(0,209,255,0.55), 0 0 0 1px rgba(0,209,255,0.2)",
      zIndex: 4,
      animation: "floatY 6s ease-in-out infinite",
    }}>
      <span className="corner tl"/>
      <span className="corner tr"/>
      <span className="corner bl"/>
      <span className="corner br"/>
      <div className="row gap-10" style={{ marginBottom: 12 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: "linear-gradient(135deg, var(--cyan), var(--cyan-deep))",
          display: "grid", placeItems: "center",
          boxShadow: "0 0 14px var(--cyan)",
        }}>
          <Icon name="spark" size={14} stroke="#001520"/>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--cyan-2)", letterSpacing: "0.18em" }}>AI COPILOT</div>
          <div style={{ fontSize: 10, color: "var(--muted)" }}>Suggested action · 2s ago</div>
        </div>
      </div>
      <div style={{ fontSize: 13, lineHeight: 1.45, color: "var(--ink)", marginBottom: 12 }}>
        Traffic on Maple St is moderate. Suggest leaving by <span style={{ color: "var(--cyan)", fontWeight: 600 }}>9:42 AM</span> for your <span style={{ color: "var(--orange)" }}>10:00 AM</span> inspection.
      </div>
      <div className="row gap-8">
        <button style={{
          flex: 1, height: 32,
          background: "linear-gradient(180deg, var(--cyan), var(--cyan-deep))",
          color: "#001520",
          border: "none", borderRadius: 8,
          fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12,
          cursor: "pointer",
          boxShadow: "0 6px 16px -4px var(--cyan)",
        }}>Apply route</button>
        <button style={{
          height: 32, padding: "0 12px",
          background: "transparent",
          color: "var(--ink-2)",
          border: "1px solid var(--border)",
          borderRadius: 8,
          fontSize: 12, cursor: "pointer",
        }}>Dismiss</button>
      </div>
    </div>
  );
}

function UpNextOverlay() {
  return (
    <div style={{
      position: "absolute",
      bottom: -32,
      left: -36,
      width: 260,
      padding: 14,
      background: "linear-gradient(180deg, rgba(38,18,4,0.96), rgba(20,10,2,0.96))",
      border: "1px solid rgba(255,138,30,0.55)",
      borderRadius: 14,
      backdropFilter: "blur(14px)",
      boxShadow: "0 30px 60px -20px rgba(255,138,30,0.55), 0 0 0 1px rgba(255,138,30,0.2)",
      zIndex: 4,
      animation: "floatY 7s ease-in-out infinite",
      animationDelay: "1.4s",
    }}>
      <span className="corner tl" style={{ borderColor: "var(--orange)" }}/>
      <span className="corner tr" style={{ borderColor: "var(--orange)" }}/>
      <span className="corner bl" style={{ borderColor: "var(--orange)" }}/>
      <span className="corner br" style={{ borderColor: "var(--orange)" }}/>
      <div className="row gap-10" style={{ marginBottom: 8 }}>
        <Icon name="bell" size={14} stroke="var(--orange)"/>
        <span className="mono" style={{ fontSize: 10, color: "var(--orange-2)", letterSpacing: "0.18em" }}>UP NEXT · 10:00 AM</span>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 600 }}>Roof Inspection</div>
      <div style={{ fontSize: 11, color: "var(--ink-2)" }}>123 Maple St · 12 min away</div>
      <div className="row gap-8" style={{ marginTop: 10 }}>
        <span className="chip orange" style={{ height: 20, fontSize: 9 }}>● LIVE</span>
        <span className="chip" style={{ height: 20, fontSize: 9 }}>CREW A</span>
        <span className="chip" style={{ height: 20, fontSize: 9 }}>RES.</span>
      </div>
    </div>
  );
}

// ============== HERO v3 — Confident Editorial ==============
function Hero() {
  return (
    <section className="section" style={{ paddingTop: 120, paddingBottom: 40 }}>
      <div className="shell">
        <div className="hero-frame" style={{ padding: 0, overflow: "hidden" }}>
          <DimCorner pos="tl"/>
          <DimCorner pos="tr"/>
          <DimCorner pos="bl"/>
          <DimCorner pos="br"/>

          <CommandStrip/>

          <div style={{ padding: "70px 56px 56px" }}>
            {/* Section meta strip */}
            <Reveal>
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "center",
                marginBottom: 56,
              }}>
                <span className="section-number">
                  <span className="num">§01</span>
                  <span>FIELD OPERATING SYSTEM</span>
                </span>
                <div className="row gap-12">
                  <span className="dim-tag">BUILD MK.07</span>
                  <span className="dim-tag">SOC 2 TYPE II</span>
                  <span className="dim-tag" style={{ color: "var(--green)", borderColor: "rgba(43,212,156,0.4)" }}>
                    99.99% UPTIME
                  </span>
                </div>
              </div>
            </Reveal>

            <div style={{
              display: "grid",
              gridTemplateColumns: "minmax(420px, 5fr) minmax(540px, 7fr)",
              gap: 64,
              alignItems: "center",
            }}>
              {/* LEFT — editorial column */}
              <div>
                <Reveal>
                  <span className="eyebrow">
                    <span className="dot"/> AI CONSTRUCTION OPERATING SYSTEM
                  </span>
                </Reveal>

                <Reveal delay={1}>
                  <h1 className="h-mega" style={{ marginTop: 36, fontSize: "clamp(56px, 7.2vw, 112px)" }}>
                    <span className="grad">One platform.</span><br/>
                    <span className="grad">Every job.</span><br/>
                    <span style={{ display: "inline-flex", alignItems: "baseline", gap: 12 }}>
                      <span className="accent">Zero</span>
                      <span style={{
                        color: "var(--orange)",
                        position: "relative",
                        display: "inline-block",
                      }}>
                        drag.
                        <span style={{
                          position: "absolute",
                          left: 0, right: 0, bottom: "0.06em",
                          height: 5,
                          background: "linear-gradient(90deg, var(--orange), transparent)",
                          boxShadow: "0 0 20px var(--orange)",
                          borderRadius: 1,
                        }}/>
                      </span>
                    </span>
                  </h1>
                </Reveal>

                <Reveal delay={2}>
                  <p className="sub" style={{ marginTop: 32, fontSize: 17, maxWidth: 480 }}>
                    The AI command center for modern construction. Connect crews,
                    projects, scheduling, budgets, and field intelligence in a
                    single seamless ecosystem.
                  </p>
                </Reveal>

                <Reveal delay={3}>
                  <div className="row gap-16" style={{ marginTop: 36 }}>
                    <a href="#demo" className="btn btn-primary">
                      Book Live Demo <span className="arrow">→</span>
                    </a>
                    <a href="#platform" className="btn btn-ghost">
                      <Icon name="play" size={14} stroke="#fff"/> Watch 2-min film
                    </a>
                  </div>
                </Reveal>

                <Reveal delay={4}>
                  <div style={{
                    marginTop: 56,
                    paddingTop: 22,
                    borderTop: "1px dashed var(--border)",
                  }}>
                    <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.22em", marginBottom: 14 }}>
                      ENGINEERED WITH FIELD TEAMS AT
                    </div>
                    <div style={{
                      display: "flex", gap: 28, alignItems: "center", flexWrap: "wrap",
                      opacity: 0.85,
                      fontFamily: "var(--font-display)",
                      fontSize: 13,
                      fontWeight: 600,
                      letterSpacing: "0.04em",
                      color: "var(--ink-2)",
                    }}>
                      {["APEX ROOFING", "CRUZ BUILT", "NORTHSTAR", "PEAK INFRA", "MERIDIAN GROUP"].map((c, i) => (
                        <span key={c} style={{ display: "inline-flex", alignItems: "center", gap: 28 }}>
                          <span>{c}</span>
                          {i < 4 && <span style={{ width: 4, height: 4, background: "var(--cyan)", borderRadius: "50%", opacity: 0.6 }}/>}
                        </span>
                      ))}
                    </div>
                  </div>
                </Reveal>
              </div>

              {/* RIGHT — product stage */}
              <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
                {/* Ambient glows */}
                <div className="ring-glow" style={{
                  width: 600, height: 600, top: -100, left: -100,
                  background: "radial-gradient(circle, rgba(0,209,255,0.4), transparent 60%)",
                }}/>
                <div className="ring-glow" style={{
                  width: 460, height: 460, bottom: -60, right: -100,
                  background: "radial-gradient(circle, rgba(255,138,30,0.22), transparent 60%)",
                }}/>

                {/* Half wireframe house behind */}
                <div style={{
                  position: "absolute",
                  top: -10, left: "50%",
                  transform: "translateX(-50%)",
                  opacity: 0.32,
                  zIndex: 0,
                  pointerEvents: "none",
                }}>
                  <BlueprintHouse size={780} withMeasurements={false} withScan={true}/>
                </div>

                {/* Floor reflection plate */}
                <div style={{
                  position: "absolute",
                  bottom: -10,
                  width: "100%",
                  height: 90,
                  background: "radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,209,255,0.18), transparent 70%)",
                  filter: "blur(8px)",
                  zIndex: 0,
                }}/>

                <Reveal delay={3}>
                  <div style={{ position: "relative", zIndex: 2 }}>
                    <HeroProduct/>
                    <CopilotOverlay/>
                    <UpNextOverlay/>

                    {/* Stage signature plate */}
                    <div style={{
                      position: "absolute",
                      top: -28,
                      left: 24,
                      padding: "6px 12px",
                      border: "1px solid var(--border-strong)",
                      background: "rgba(2,6,14,0.9)",
                      borderRadius: 4,
                      fontFamily: "var(--font-mono)",
                      fontSize: 10,
                      letterSpacing: "0.22em",
                      color: "var(--cyan-2)",
                      backdropFilter: "blur(8px)",
                      zIndex: 5,
                    }}>
                      OWNERS BOX · v7.1
                    </div>

                    {/* Vertical mono rail beside the product */}
                    <div style={{
                      position: "absolute",
                      right: -32,
                      top: 60,
                      bottom: 60,
                      width: 14,
                      display: "flex", flexDirection: "column", justifyContent: "space-between",
                      pointerEvents: "none",
                    }}>
                      {["▴","|","|","◆","|","|","▾"].map((c, i) => (
                        <span key={i} style={{
                          fontFamily: "var(--font-mono)",
                          fontSize: 11,
                          color: i === 3 ? "var(--cyan)" : "var(--dim)",
                          textShadow: i === 3 ? "0 0 8px var(--cyan)" : "none",
                          textAlign: "center",
                        }}>{c}</span>
                      ))}
                    </div>
                  </div>
                </Reveal>
              </div>
            </div>

            {/* Bottom stat strip */}
            <Reveal delay={4}>
              <div style={{
                marginTop: 80,
                paddingTop: 28,
                borderTop: "1px dashed var(--border)",
                display: "grid",
                gridTemplateColumns: "repeat(4, 1fr)",
                gap: 0,
              }}>
                {[
                  { v: "10,247", l: "Operators on platform", c: "var(--cyan)" },
                  { v: "98%",    l: "Workflow accuracy",    c: "var(--green)" },
                  { v: "35%",    l: "Faster delivery",      c: "var(--orange)" },
                  { v: "24/7",   l: "AI ops monitoring",    c: "var(--violet)" },
                ].map((s, i) => (
                  <div key={s.l} style={{
                    paddingLeft: i ? 28 : 0,
                    paddingRight: i < 3 ? 28 : 0,
                    borderRight: i < 3 ? "1px solid var(--border)" : "none",
                  }}>
                    <div className="tabular" style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 38,
                      fontWeight: 600,
                      lineHeight: 1,
                      letterSpacing: "-0.03em",
                      color: s.c,
                      textShadow: `0 0 20px ${s.c}44`,
                    }}>{s.v}</div>
                    <div className="mono" style={{
                      fontSize: 11,
                      letterSpacing: "0.16em",
                      color: "var(--muted)",
                      marginTop: 8,
                      textTransform: "uppercase",
                    }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== MANIFESTO ==============
function Manifesto() {
  return (
    <section className="section tight" style={{ padding: "60px 0" }}>
      <div className="shell">
        <Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div>
              <span className="section-number">
                <span className="num">§02</span>
                <span>THESIS</span>
              </span>
              <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.22em", marginTop: 18 }}>
                WHY LYNKEDUP PRO
              </div>
              <div className="ticks" style={{ width: 80, height: 8, marginTop: 12,
                backgroundImage: "repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 9px)", opacity: 0.6 }}/>
            </div>
            <div>
              <h2 className="h-section" style={{ textWrap: "balance", lineHeight: 1.02 }}>
                Construction runs on <span className="orange" style={{ color: "var(--orange)" }}>five tools</span>,{" "}
                <span style={{ color: "var(--muted)" }}>four spreadsheets</span>,<br/>
                and a whiteboard. We replaced all of it with{" "}
                <span className="accent">one operating brain</span>.
              </h2>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 56 }}>
                {[
                  { n: "01", t: "Connected by design", d: "Every action across CRM, jobs, billing and field flows through the same data layer in real time." },
                  { n: "02", t: "Intelligent by default", d: "The AI Copilot watches every workflow and suggests the next best action — before you know you need it." },
                  { n: "03", t: "Built for the field", d: "Engineered with the operators using it. Roofers, contractors, infrastructure teams — not desk-bound PMs." },
                ].map(p => (
                  <div key={p.n}>
                    <span className="mono" style={{ fontSize: 11, color: "var(--cyan)", letterSpacing: "0.2em" }}>{p.n} /</span>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, margin: "10px 0 8px" }}>{p.t}</div>
                    <div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.55 }}>{p.d}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============== BLUEPRINT MARQUEE — uses dim tags ==============
function TrustMarquee() {
  const items = [
    { t: "BUILT FOR ROOFING", d: "18′-7″" },
    { t: "ENTERPRISE GRADE", d: "12′-3″" },
    { t: "AI-POWERED OPS", d: "MK.07" },
    { t: "SOC 2 TYPE II", d: "CERT.04" },
    { t: "REAL-TIME SYNC", d: "142 MS" },
    { t: "10,000+ PROJECTS", d: "Q2.26" },
    { t: "TRUSTED BY FIELD TEAMS", d: "v7.1" },
    { t: "ZERO DOWNTIME", d: "99.99%" },
    { t: "BUILT BY ROOFERS", d: "EST.21" },
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((it, i) => (
          <React.Fragment key={i}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
              <span style={{ color: "var(--ink-2)" }}>{it.t}</span>
              <span className="dim-tag" style={{ height: 22, fontSize: 9, padding: "2px 8px" }}>{it.d}</span>
            </span>
            <span className="sep">◆</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ============== LIVE METRICS v2 ==============
function LiveMetrics() {
  const metrics = [
    { v: 10000, suffix: "+", label: "PROJECTS MANAGED", sub: "Across enterprise contractors", icon: "shield", color: "var(--cyan)", code: "M.01" },
    { v: 98, suffix: "%", label: "WORKFLOW ACCURACY", sub: "Connected data, fewer errors", icon: "target", color: "var(--green)", code: "M.02" },
    { v: 35, suffix: "%", label: "FASTER JOB DELIVERY", sub: "Vs. legacy spreadsheets & CRMs", icon: "growth", color: "var(--orange)", code: "M.03" },
    { v: 24, suffix: "/7", label: "AI OPS MONITORING", sub: "Always-on field intelligence", icon: "ai", color: "var(--violet)", code: "M.04" },
  ];
  return (
    <section className="section tight" id="trust">
      <div className="beam top"/>
      <div className="shell">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 20 }}>
            <div>
              <span className="section-number">
                <span className="num">§03</span>
                <span>LIVE METRICS · STREAMING</span>
              </span>
              <h2 className="h-section" style={{ marginTop: 22 }}>
                Field teams choose <span className="accent">precision</span>.
              </h2>
            </div>
            <span className="dim-tag" style={{ height: 30, padding: "4px 12px" }}>
              <span className="live-dot"/> STREAM · 142 MS
            </span>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {metrics.map((m, i) => (
            <Reveal key={m.label} delay={i + 1}>
              <GlowCard style={{ padding: 0 }}>
                <div className="pad" style={{ padding: 28 }}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 24 }}>
                    <span className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.2em" }}>{m.code} /</span>
                    <Icon name={m.icon} size={22} stroke={m.color}/>
                  </div>
                  <div className="tabular" style={{
                    fontFamily: "var(--font-display)",
                    fontSize: 60,
                    fontWeight: 600,
                    lineHeight: 1,
                    letterSpacing: "-0.04em",
                    color: m.color,
                    textShadow: `0 0 30px ${m.color}55`,
                    marginBottom: 14,
                  }}>
                    <Counter to={m.v} suffix={m.suffix}/>
                  </div>
                  <div className="mono" style={{
                    fontSize: 11,
                    letterSpacing: "0.18em",
                    color: "var(--ink)",
                    marginBottom: 6,
                  }}>{m.label}</div>
                  <div style={{ fontSize: 13, color: "var(--muted)" }}>{m.sub}</div>
                </div>
                <div style={{
                  height: 4,
                  background: `linear-gradient(90deg, transparent, ${m.color}, transparent)`,
                  filter: `drop-shadow(0 0 8px ${m.color})`,
                  opacity: 0.7,
                }}/>
              </GlowCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Manifesto, TrustMarquee, LiveMetrics });