// NEXUS — Dark tech minimal. Black bg, electric blue accent, Space Grotesk + JetBrains Mono.
// Ambient motion: orbiting glow, scrolling marquees, pulse dots.

const { useEffect: nxEffect, useRef: nxRef, useState: nxState } = React;

const nexusStyles = {
  font: "'Space Grotesk', system-ui, sans-serif",
  mono: "'JetBrains Mono', monospace",
  bg: "#070708",
  fg: "#fafafa",
  dim: "#8a8a92",
  line: "rgba(255,255,255,0.08)",
  accent: "#3b82f6",
  accent2: "#60a5fa",
};

function NexusReveal({ children, delay = 0, y = 24 }) {
  const ref = nxRef(null);
  const [shown, setShown] = nxState(false);
  nxEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && setShown(true)),
      { threshold: 0.1 },
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div
      ref={ref}
      style={{
        opacity: shown ? 1 : 0,
        transform: shown ? "translateY(0)" : `translateY(${y}px)`,
        transition: `opacity .9s cubic-bezier(.2,.7,.3,1) ${delay}ms, transform .9s cubic-bezier(.2,.7,.3,1) ${delay}ms`,
      }}
    >
      {children}
    </div>
  );
}

function NexusNav() {
  const [scrolled, setScrolled] = nxState(false);
  const [active, setActive] = nxState("");
  nxEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  nxEffect(() => {
    const ids = ["servicos", "portfolio", "clientes", "stack"];
    const sections = ids
      .map((id) => document.getElementById(id))
      .filter(Boolean);
    if (!sections.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        // Pick the entry that is most visible (largest intersectionRatio among intersecting)
        const visible = entries.filter((e) => e.isIntersecting);
        if (visible.length) {
          const top = visible.sort(
            (a, b) => b.intersectionRatio - a.intersectionRatio,
          )[0];
          setActive(top.target.id);
        }
      },
      { rootMargin: "-30% 0px -55% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] },
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);
  const links = [
    { label: "Serviços", href: "#servicos", id: "servicos" },
    { label: "Clientes", href: "#clientes", id: "clientes" },
    { label: "Portfolio", href: "#portfolio", id: "portfolio" },
    { label: "Stack", href: "#stack", id: "stack" },
  ];
  return (
    <nav
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 100,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: scrolled ? "14px 56px" : "24px 56px",
        borderBottom: `1px solid ${scrolled ? nexusStyles.line : "transparent"}`,
        backdropFilter: "blur(12px)",
        background: scrolled ? "rgba(7,7,8,0.78)" : "rgba(7,7,8,0.3)",
        transition:
          "padding .25s ease, background .25s ease, border-color .25s ease",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <img
          src="assets/aptechs-logo.png"
          alt="APTechs"
          style={{
            height: 44,
            width: "auto",
            display: "block",
            filter: "invert(1)",
          }}
        />
      </div>
      <div
        style={{
          display: "flex",
          gap: 36,
          fontSize: 14,
          fontFamily: nexusStyles.font,
        }}
      >
        {links.map((t) => {
          const isActive = active === t.id;
          return (
            <a
              key={t.label}
              href={t.href}
              className="nexus-nav-link"
              style={{
                color: nexusStyles.fg,
                textDecoration: "none",
                opacity: isActive ? 1 : 0.7,
                position: "relative",
                padding: "4px 0",
                transition: "opacity .2s",
              }}
            >
              {t.label}
              <span
                style={{
                  position: "absolute",
                  left: 0,
                  right: 0,
                  bottom: -2,
                  height: 1.5,
                  background: nexusStyles.accent,
                  borderRadius: 1,
                  transform: isActive ? "scaleX(1)" : "scaleX(0)",
                  transformOrigin: isActive ? "left center" : "right center",
                  transition: "transform .35s cubic-bezier(.2,.7,.3,1)",
                  boxShadow: isActive
                    ? `0 0 12px ${nexusStyles.accent}99`
                    : "none",
                }}
              />
            </a>
          );
        })}
      </div>
      <a
        href="#contato"
        onClick={(e) => {
          e.preventDefault();
          window.dispatchEvent(new Event("open-contact-modal"));
        }}
        style={{
          fontFamily: nexusStyles.font,
          fontSize: 14,
          fontWeight: 500,
          padding: "10px 18px",
          borderRadius: 999,
          background: nexusStyles.fg,
          color: "#000",
          textDecoration: "none",
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          cursor: "pointer",
        }}
      >
        Vamos conversar? <span style={{ fontFamily: nexusStyles.mono }}>→</span>
      </a>
    </nav>
  );
}

function HeroTicker() {
  const phrases = [
    "faça seu aplicativo agora",
    "resposta rápido",
    "+40 produtos entregues desde 2018",
  ];
  const [i, setI] = nxState(0);
  nxEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % phrases.length), 2800);
    return () => clearInterval(id);
  }, []);
  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        padding: "6px 14px",
        border: `1px solid ${nexusStyles.line}`,
        borderRadius: 999,
        fontFamily: nexusStyles.mono,
        fontSize: 12,
        color: nexusStyles.dim,
        marginBottom: 36,
        height: 28,
        overflow: "hidden",
        maxWidth: "max-content",
      }}
    >
      <span
        style={{
          width: 6,
          height: 6,
          borderRadius: 999,
          background: "#10b981",
          flex: "0 0 auto",
          boxShadow: "0 0 12px #10b981",
          animation: "nexusPulse 2s ease-in-out infinite",
        }}
      />
      <span
        style={{
          position: "relative",
          height: 16,
          overflow: "hidden",
          display: "inline-block",
          minWidth: 260,
        }}
      >
        {phrases.map((p, idx) => (
          <span
            key={idx}
            style={{
              position: "absolute",
              left: 0,
              top: 0,
              whiteSpace: "nowrap",
              transform:
                idx === i
                  ? "translateY(0)"
                  : idx < i || (i === 0 && idx === phrases.length - 1)
                    ? "translateY(-100%)"
                    : "translateY(100%)",
              opacity: idx === i ? 1 : 0,
              transition:
                "transform .55s cubic-bezier(.2,.7,.3,1), opacity .35s",
            }}
          >
            {p}
          </span>
        ))}
      </span>
    </div>
  );
}

function NexusHero() {
  return (
    <section
      style={{
        position: "relative",
        height: 920,
        overflow: "hidden",
        borderBottom: `1px solid ${nexusStyles.line}`,
      }}
    >
      {/* Animated orb */}
      <div
        style={{
          position: "absolute",
          width: 900,
          height: 900,
          borderRadius: "50%",
          background: `radial-gradient(circle at 30% 30%, ${nexusStyles.accent}55, transparent 60%)`,
          filter: "blur(40px)",
          top: -200,
          right: -200,
          animation: "nexusFloat 14s ease-in-out infinite",
        }}
      />
      <div
        style={{
          position: "absolute",
          width: 600,
          height: 600,
          borderRadius: "50%",
          background: `radial-gradient(circle at 60% 40%, ${nexusStyles.accent2}33, transparent 60%)`,
          filter: "blur(60px)",
          bottom: -120,
          left: -100,
          animation: "nexusFloat2 18s ease-in-out infinite",
        }}
      />
      {/* Grid */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: `linear-gradient(${nexusStyles.line} 1px, transparent 1px), linear-gradient(90deg, ${nexusStyles.line} 1px, transparent 1px)`,
          backgroundSize: "64px 64px",
          maskImage:
            "radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%)",
        }}
      />

      <div
        style={{
          position: "relative",
          padding: "180px 56px 0",
          maxWidth: 1180,
          margin: "0 auto",
        }}
      >
        <HeroTicker />

        <h1
          style={{
            fontFamily: nexusStyles.font,
            fontWeight: 500,
            fontSize: 104,
            lineHeight: 0.95,
            letterSpacing: -3.5,
            margin: 0,
            color: nexusStyles.fg,
          }}
        >
          Software
          <br />
          que sua{" "}
          <span
            style={{
              fontStyle: "italic",
              fontFamily: "'Instrument Serif', serif",
              fontWeight: 400,
            }}
          >
            operação
          </span>
          <br />
          precisa hoje.
        </h1>

        <p
          style={{
            fontFamily: nexusStyles.font,
            fontSize: 20,
            lineHeight: 1.5,
            color: nexusStyles.dim,
            maxWidth: 560,
            marginTop: 40,
          }}
        >
          Aplicativos mobile, sites e sistemas web sob medida — desenvolvidos
          por um time enxuto e experiente, com foco em resultado, processo
          transparente e entrega no prazo.
        </p>

        <div style={{ display: "flex", gap: 16, marginTop: 48 }}>
          <a
            onClick={() =>
              window.dispatchEvent(new Event("open-contact-modal"))
            }
            style={{
              padding: "16px 28px",
              borderRadius: 999,
              background: nexusStyles.accent,
              color: "#fff",
              fontFamily: nexusStyles.font,
              fontWeight: 500,
              fontSize: 16,
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              boxShadow: `0 12px 40px ${nexusStyles.accent}55`,
              cursor: "pointer",
            }}
          >
            Começar um projeto <span>→</span>
          </a>
          <a
            href="#portfolio"
            style={{
              padding: "16px 28px",
              borderRadius: 999,
              border: `1px solid ${nexusStyles.line}`,
              color: nexusStyles.fg,
              fontFamily: nexusStyles.font,
              fontWeight: 500,
              fontSize: 16,
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              cursor: "pointer",
            }}
          >
            <span style={{ fontFamily: nexusStyles.mono, fontSize: 12 }}>
              ▶
            </span>{" "}
            Ver cases
          </a>
        </div>

        {/* Stats row */}
        <div
          style={{
            marginTop: 110,
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            borderTop: `1px solid ${nexusStyles.line}`,
            paddingTop: 28,
          }}
        >
          {[
            { n: "8+", l: "anos no mercado" },
            { n: "40+", l: "produtos entregues" },
            { n: "12wk", l: "do brief ao deploy" },
            { n: "4.9/5", l: "satisfação clientes" },
          ].map((s, i) => (
            <div
              key={i}
              style={{
                paddingLeft: i === 0 ? 0 : 28,
                borderLeft: i === 0 ? "none" : `1px solid ${nexusStyles.line}`,
              }}
            >
              <div
                style={{
                  fontFamily: nexusStyles.font,
                  fontSize: 44,
                  fontWeight: 500,
                  letterSpacing: -1.5,
                }}
              >
                {s.n}
              </div>
              <div
                style={{
                  fontFamily: nexusStyles.mono,
                  fontSize: 12,
                  color: nexusStyles.dim,
                  marginTop: 4,
                }}
              >
                {s.l}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MobileIllustration() {
  return (
    <svg
      viewBox="0 0 280 160"
      style={{ width: "100%", height: "100%", display: "block" }}
    >
      <defs>
        <radialGradient id="mobGlow" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.45" />
          <stop offset="70%" stopColor="#3b82f6" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="280" height="160" fill="transparent" />
      <circle cx="140" cy="80" r="80" fill="url(#mobGlow)" />
      {/* Phone behind */}
      <g transform="translate(80 18) rotate(-8 32 60)" opacity="0.5">
        <rect
          x="0"
          y="0"
          width="64"
          height="124"
          rx="10"
          fill="none"
          stroke="rgba(255,255,255,0.25)"
          strokeWidth="1"
        />
        <rect
          x="4"
          y="14"
          width="56"
          height="100"
          rx="3"
          fill="rgba(59,130,246,0.06)"
        />
        <circle cx="32" cy="6" r="1.5" fill="rgba(255,255,255,0.3)" />
      </g>
      {/* Phone front */}
      <g transform="translate(118 8) rotate(6 32 72)">
        <rect
          x="0"
          y="0"
          width="72"
          height="144"
          rx="11"
          fill="#0a0a0c"
          stroke="#3b82f6"
          strokeWidth="1"
        />
        <rect
          x="4"
          y="16"
          width="64"
          height="116"
          rx="4"
          fill="rgba(59,130,246,0.08)"
        />
        <rect
          x="26"
          y="3"
          width="20"
          height="4"
          rx="2"
          fill="rgba(255,255,255,0.4)"
        />
        {/* Status bar */}
        <rect
          x="10"
          y="22"
          width="20"
          height="2"
          fill="rgba(255,255,255,0.4)"
        />
        <rect x="56" y="22" width="6" height="2" fill="rgba(255,255,255,0.6)" />
        {/* Hero card */}
        <rect
          x="10"
          y="30"
          width="52"
          height="28"
          rx="3"
          fill="#3b82f6"
          opacity="0.85"
        />
        <rect x="14" y="36" width="24" height="2" fill="white" opacity="0.9" />
        <rect x="14" y="42" width="36" height="2" fill="white" opacity="0.5" />
        <rect
          x="14"
          y="48"
          width="20"
          height="3"
          rx="1.5"
          fill="white"
          opacity="0.9"
        />
        {/* Cards grid */}
        <rect
          x="10"
          y="64"
          width="24"
          height="22"
          rx="3"
          fill="rgba(255,255,255,0.06)"
          stroke="rgba(255,255,255,0.1)"
          strokeWidth="0.5"
        />
        <rect
          x="38"
          y="64"
          width="24"
          height="22"
          rx="3"
          fill="rgba(255,255,255,0.06)"
          stroke="rgba(255,255,255,0.1)"
          strokeWidth="0.5"
        />
        <rect
          x="10"
          y="90"
          width="52"
          height="14"
          rx="3"
          fill="rgba(255,255,255,0.06)"
          stroke="rgba(255,255,255,0.1)"
          strokeWidth="0.5"
        />
        <rect
          x="10"
          y="108"
          width="52"
          height="14"
          rx="3"
          fill="rgba(255,255,255,0.06)"
          stroke="rgba(255,255,255,0.1)"
          strokeWidth="0.5"
        />
        {/* Bottom nav */}
        <line
          x1="10"
          y1="126"
          x2="62"
          y2="126"
          stroke="rgba(255,255,255,0.08)"
          strokeWidth="0.5"
        />
        <circle cx="18" cy="130" r="1.4" fill="#3b82f6" />
        <circle cx="30" cy="130" r="1.4" fill="rgba(255,255,255,0.25)" />
        <circle cx="42" cy="130" r="1.4" fill="rgba(255,255,255,0.25)" />
        <circle cx="54" cy="130" r="1.4" fill="rgba(255,255,255,0.25)" />
      </g>
    </svg>
  );
}

function SiteIllustration() {
  return (
    <svg
      viewBox="0 0 280 160"
      style={{ width: "100%", height: "100%", display: "block" }}
    >
      <defs>
        <radialGradient id="siteGlow" cx="50%" cy="55%">
          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.4" />
          <stop offset="70%" stopColor="#3b82f6" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="280" height="160" fill="transparent" />
      <circle cx="140" cy="90" r="90" fill="url(#siteGlow)" />
      {/* Browser window */}
      <g transform="translate(40 22)">
        <rect
          x="0"
          y="0"
          width="200"
          height="124"
          rx="6"
          fill="#0a0a0c"
          stroke="#3b82f6"
          strokeWidth="1"
        />
        {/* Top bar */}
        <rect
          x="0"
          y="0"
          width="200"
          height="14"
          rx="6"
          fill="rgba(255,255,255,0.04)"
        />
        <rect
          x="0"
          y="8"
          width="200"
          height="6"
          fill="rgba(255,255,255,0.04)"
        />
        <circle cx="8" cy="7" r="1.6" fill="rgba(255,255,255,0.3)" />
        <circle cx="14" cy="7" r="1.6" fill="rgba(255,255,255,0.3)" />
        <circle cx="20" cy="7" r="1.6" fill="rgba(255,255,255,0.3)" />
        <rect
          x="32"
          y="3"
          width="80"
          height="8"
          rx="4"
          fill="rgba(255,255,255,0.06)"
        />
        {/* Hero section */}
        <rect x="12" y="26" width="60" height="3" fill="rgba(59,130,246,0.9)" />
        <rect
          x="12"
          y="34"
          width="120"
          height="6"
          fill="rgba(255,255,255,0.9)"
        />
        <rect
          x="12"
          y="44"
          width="100"
          height="6"
          fill="rgba(255,255,255,0.9)"
        />
        <rect
          x="12"
          y="56"
          width="76"
          height="3"
          fill="rgba(255,255,255,0.4)"
        />
        <rect
          x="12"
          y="62"
          width="64"
          height="3"
          fill="rgba(255,255,255,0.4)"
        />
        <rect x="12" y="74" width="36" height="9" rx="4.5" fill="#3b82f6" />
        <rect
          x="54"
          y="74"
          width="36"
          height="9"
          rx="4.5"
          fill="none"
          stroke="rgba(255,255,255,0.3)"
          strokeWidth="0.5"
        />
        {/* Right hero visual */}
        <rect
          x="142"
          y="26"
          width="46"
          height="57"
          rx="3"
          fill="rgba(59,130,246,0.12)"
          stroke="rgba(59,130,246,0.4)"
          strokeWidth="0.5"
        />
        <circle cx="165" cy="50" r="11" fill="rgba(59,130,246,0.35)" />
        <circle cx="165" cy="50" r="6" fill="#3b82f6" />
        {/* Bottom cards */}
        <rect
          x="12"
          y="94"
          width="56"
          height="22"
          rx="3"
          fill="rgba(255,255,255,0.04)"
          stroke="rgba(255,255,255,0.08)"
          strokeWidth="0.5"
        />
        <rect
          x="72"
          y="94"
          width="56"
          height="22"
          rx="3"
          fill="rgba(255,255,255,0.04)"
          stroke="rgba(255,255,255,0.08)"
          strokeWidth="0.5"
        />
        <rect
          x="132"
          y="94"
          width="56"
          height="22"
          rx="3"
          fill="rgba(255,255,255,0.04)"
          stroke="rgba(255,255,255,0.08)"
          strokeWidth="0.5"
        />
      </g>
    </svg>
  );
}

function SaaSIllustration() {
  return (
    <svg
      viewBox="0 0 280 160"
      style={{ width: "100%", height: "100%", display: "block" }}
    >
      <defs>
        <radialGradient id="saasGlow" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.4" />
          <stop offset="70%" stopColor="#3b82f6" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="saasBar" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#3b82f6" stopOpacity="1" />
          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.2" />
        </linearGradient>
      </defs>
      <rect width="280" height="160" fill="transparent" />
      <circle cx="140" cy="85" r="85" fill="url(#saasGlow)" />
      {/* Dashboard window */}
      <g transform="translate(40 22)">
        <rect
          x="0"
          y="0"
          width="200"
          height="120"
          rx="6"
          fill="#0a0a0c"
          stroke="#3b82f6"
          strokeWidth="1"
        />
        {/* Sidebar */}
        <rect
          x="0"
          y="0"
          width="38"
          height="120"
          rx="6"
          fill="rgba(255,255,255,0.03)"
        />
        <rect
          x="0"
          y="0"
          width="38"
          height="120"
          fill="rgba(255,255,255,0.03)"
          clipPath="inset(0 0 0 1)"
        />
        <rect
          x="6"
          y="8"
          width="18"
          height="3"
          rx="1.5"
          fill="rgba(255,255,255,0.5)"
        />
        <rect
          x="6"
          y="22"
          width="26"
          height="6"
          rx="2"
          fill="rgba(59,130,246,0.3)"
        />
        <rect
          x="6"
          y="32"
          width="26"
          height="6"
          rx="2"
          fill="rgba(255,255,255,0.05)"
        />
        <rect
          x="6"
          y="42"
          width="26"
          height="6"
          rx="2"
          fill="rgba(255,255,255,0.05)"
        />
        <rect
          x="6"
          y="52"
          width="26"
          height="6"
          rx="2"
          fill="rgba(255,255,255,0.05)"
        />
        <rect
          x="6"
          y="62"
          width="26"
          height="6"
          rx="2"
          fill="rgba(255,255,255,0.05)"
        />
        {/* Main */}
        <rect
          x="46"
          y="8"
          width="50"
          height="4"
          rx="2"
          fill="rgba(255,255,255,0.7)"
        />
        <rect
          x="46"
          y="16"
          width="30"
          height="3"
          rx="1.5"
          fill="rgba(255,255,255,0.3)"
        />
        {/* KPI cards */}
        <g>
          <rect
            x="46"
            y="26"
            width="44"
            height="22"
            rx="3"
            fill="rgba(255,255,255,0.04)"
            stroke="rgba(255,255,255,0.08)"
            strokeWidth="0.5"
          />
          <rect
            x="50"
            y="30"
            width="14"
            height="2"
            fill="rgba(255,255,255,0.3)"
          />
          <rect
            x="50"
            y="36"
            width="22"
            height="5"
            fill="rgba(255,255,255,0.9)"
          />
          <rect x="50" y="44" width="8" height="2" fill="#10b981" />
        </g>
        <g>
          <rect
            x="94"
            y="26"
            width="44"
            height="22"
            rx="3"
            fill="rgba(255,255,255,0.04)"
            stroke="rgba(255,255,255,0.08)"
            strokeWidth="0.5"
          />
          <rect
            x="98"
            y="30"
            width="14"
            height="2"
            fill="rgba(255,255,255,0.3)"
          />
          <rect
            x="98"
            y="36"
            width="22"
            height="5"
            fill="rgba(255,255,255,0.9)"
          />
          <rect x="98" y="44" width="8" height="2" fill="#10b981" />
        </g>
        <g>
          <rect
            x="142"
            y="26"
            width="44"
            height="22"
            rx="3"
            fill="rgba(255,255,255,0.04)"
            stroke="rgba(255,255,255,0.08)"
            strokeWidth="0.5"
          />
          <rect
            x="146"
            y="30"
            width="14"
            height="2"
            fill="rgba(255,255,255,0.3)"
          />
          <rect
            x="146"
            y="36"
            width="22"
            height="5"
            fill="rgba(255,255,255,0.9)"
          />
          <rect x="146" y="44" width="8" height="2" fill="#ef4444" />
        </g>
        {/* Chart */}
        <rect
          x="46"
          y="54"
          width="140"
          height="58"
          rx="3"
          fill="rgba(255,255,255,0.02)"
          stroke="rgba(255,255,255,0.08)"
          strokeWidth="0.5"
        />
        {/* Bars */}
        {[8, 14, 10, 20, 16, 24, 30, 22, 28, 36, 32, 42].map((h, i) => (
          <rect
            key={i}
            x={52 + i * 11}
            y={108 - h}
            width="6"
            height={h}
            fill="url(#saasBar)"
          />
        ))}
        {/* Trend line */}
        <path
          d="M55 100 L66 96 L77 98 L88 90 L99 92 L110 84 L121 78 L132 82 L143 76 L154 70 L165 72 L176 66"
          fill="none"
          stroke="#60a5fa"
          strokeWidth="1"
        />
        {[55, 66, 77, 88, 99, 110, 121, 132, 143, 154, 165, 176].map(
          (cx, i) => {
            const cy = [100, 96, 98, 90, 92, 84, 78, 82, 76, 70, 72, 66][i];
            return <circle key={i} cx={cx} cy={cy} r="1.2" fill="#60a5fa" />;
          },
        )}
      </g>
    </svg>
  );
}

function EcommerceIllustration() {
  return (
    <svg
      viewBox="0 0 280 160"
      style={{ width: "100%", height: "100%", display: "block" }}
    >
      <defs>
        <radialGradient id="ecomGlow" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.4" />
          <stop offset="70%" stopColor="#3b82f6" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="140" cy="85" r="90" fill="url(#ecomGlow)" />
      {/* Storefront window */}
      <g transform="translate(28 18)">
        <rect
          x="0"
          y="0"
          width="160"
          height="124"
          rx="6"
          fill="#0a0a0c"
          stroke="#3b82f6"
          strokeWidth="1"
        />
        <rect
          x="0"
          y="0"
          width="160"
          height="14"
          rx="6"
          fill="rgba(255,255,255,0.04)"
        />
        <rect
          x="0"
          y="8"
          width="160"
          height="6"
          fill="rgba(255,255,255,0.04)"
        />
        <circle cx="8" cy="7" r="1.6" fill="rgba(255,255,255,0.3)" />
        <circle cx="14" cy="7" r="1.6" fill="rgba(255,255,255,0.3)" />
        <circle cx="20" cy="7" r="1.6" fill="rgba(255,255,255,0.3)" />
        {/* Product grid 2x3 */}
        {[0, 1, 2].map((c) =>
          [0, 1].map((r) => (
            <g
              key={`${c}-${r}`}
              transform={`translate(${10 + c * 48} ${22 + r * 48})`}
            >
              <rect
                width="42"
                height="42"
                rx="3"
                fill="rgba(59,130,246,0.08)"
                stroke="rgba(59,130,246,0.3)"
                strokeWidth="0.5"
              />
              <circle cx="21" cy="20" r="9" fill="rgba(59,130,246,0.25)" />
              <rect
                x="6"
                y="33"
                width="22"
                height="2"
                fill="rgba(255,255,255,0.7)"
              />
              <rect
                x="6"
                y="37"
                width="14"
                height="2"
                fill="rgba(59,130,246,0.9)"
              />
            </g>
          )),
        )}
      </g>
      {/* Cart bubble */}
      <g transform="translate(196 36)">
        <circle r="32" fill="#0a0a0c" stroke="#3b82f6" strokeWidth="1" />
        <path
          d="M-12 -10 L-8 -10 L-5 6 L9 6 L12 -4 L-6 -4"
          stroke="#fafafa"
          strokeWidth="1.4"
          fill="none"
          strokeLinejoin="round"
          strokeLinecap="round"
        />
        <circle cx="-4" cy="11" r="2" fill="#fafafa" />
        <circle cx="7" cy="11" r="2" fill="#fafafa" />
        {/* Badge */}
        <circle cx="14" cy="-14" r="9" fill="#3b82f6" />
        <text
          x="14"
          y="-10"
          textAnchor="middle"
          fontSize="11"
          fontWeight="700"
          fill="white"
          fontFamily="'Space Grotesk',sans-serif"
        >
          3
        </text>
      </g>
    </svg>
  );
}

function ApiIllustration() {
  return (
    <svg
      viewBox="0 0 280 160"
      style={{ width: "100%", height: "100%", display: "block" }}
    >
      <defs>
        <radialGradient id="apiGlow" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.45" />
          <stop offset="70%" stopColor="#3b82f6" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="140" cy="80" r="90" fill="url(#apiGlow)" />
      {/* Connection lines (animated dash) */}
      <g stroke="#3b82f6" strokeWidth="1" fill="none" strokeDasharray="3 3">
        <path d="M58 80 Q100 40 140 80" />
        <path d="M58 80 Q100 120 140 80" />
        <path d="M222 80 Q180 40 140 80" />
        <path d="M222 80 Q180 120 140 80" />
        <style>{`
          @keyframes nexusDash { to { stroke-dashoffset: -12; } }
          .nexus-api-line { animation: nexusDash 1.6s linear infinite; }
        `}</style>
      </g>
      <g
        stroke="#3b82f6"
        strokeWidth="1"
        fill="none"
        strokeDasharray="3 3"
        className="nexus-api-line"
      >
        <path d="M58 80 Q100 40 140 80" />
        <path d="M58 80 Q100 120 140 80" />
        <path d="M222 80 Q180 40 140 80" />
        <path d="M222 80 Q180 120 140 80" />
      </g>
      {/* Left nodes */}
      {[
        { y: 38, label: "ERP" },
        { y: 80, label: "CRM" },
        { y: 122, label: "PAY" },
      ].map((n, i) => (
        <g key={i} transform={`translate(28 ${n.y})`}>
          <rect
            x="0"
            y="-14"
            width="60"
            height="28"
            rx="4"
            fill="#0a0a0c"
            stroke="rgba(255,255,255,0.25)"
            strokeWidth="1"
          />
          <text
            x="30"
            y="4"
            textAnchor="middle"
            fontSize="11"
            fontWeight="600"
            fill="rgba(255,255,255,0.85)"
            fontFamily="'JetBrains Mono',monospace"
          >
            {n.label}
          </text>
        </g>
      ))}
      {/* Center hub */}
      <g transform="translate(140 80)">
        <circle r="28" fill="#0a0a0c" stroke="#3b82f6" strokeWidth="1.5" />
        <circle
          r="36"
          fill="none"
          stroke="#3b82f6"
          strokeWidth="0.5"
          opacity="0.4"
        />
        <circle
          r="44"
          fill="none"
          stroke="#3b82f6"
          strokeWidth="0.5"
          opacity="0.2"
        />
        <text
          y="2"
          textAnchor="middle"
          fontSize="11"
          fontWeight="700"
          fill="#3b82f6"
          fontFamily="'JetBrains Mono',monospace"
        >
          API
        </text>
        <text
          y="14"
          textAnchor="middle"
          fontSize="7"
          fill="rgba(255,255,255,0.5)"
          fontFamily="'JetBrains Mono',monospace"
        >
          v2026
        </text>
      </g>
      {/* Right nodes */}
      {[
        { y: 38, label: "APP" },
        { y: 80, label: "WEB" },
        { y: 122, label: "BOT" },
      ].map((n, i) => (
        <g key={i} transform={`translate(192 ${n.y})`}>
          <rect
            x="0"
            y="-14"
            width="60"
            height="28"
            rx="4"
            fill="#0a0a0c"
            stroke="rgba(255,255,255,0.25)"
            strokeWidth="1"
          />
          <text
            x="30"
            y="4"
            textAnchor="middle"
            fontSize="11"
            fontWeight="600"
            fill="rgba(255,255,255,0.85)"
            fontFamily="'JetBrains Mono',monospace"
          >
            {n.label}
          </text>
        </g>
      ))}
    </svg>
  );
}

function NexusServices() {
  const items = [
    {
      kind: "01",
      title: "Aplicativos Mobile",
      sub: "iOS & Android",
      body: "Apps nativos e React Native que rodam suaves em qualquer celular. Push, offline, biometria, pagamentos in-app — tudo pronto pra escalar.",
      tags: ["React Native", "Swift", "Kotlin", "Firebase"],
      illustration: <MobileIllustration />,
    },
    {
      kind: "02",
      title: "Sites & Landing Pages",
      sub: "Marketing & institucional",
      body: "Sites que carregam em <1s, ranqueiam no Google e convertem visitante em cliente. CMS amigável pro seu time de marketing.",
      tags: ["Next.js", "Astro", "Sanity", "Vercel"],
      illustration: <SiteIllustration />,
    },
    {
      kind: "03",
      title: "Sistemas Web & SaaS",
      sub: "ERPs, dashboards, plataformas",
      body: "Plataformas robustas com auth, billing, multi-tenant, integrações com seu ERP. Do MVP em 8 semanas ao produto que escala.",
      tags: ["React", "Node", "PostgreSQL", "AWS"],
      illustration: <SaaSIllustration />,
    },
    {
      kind: "04",
      title: "E-commerce",
      sub: "Lojas online que vendem",
      body: "Lojas customizadas, checkout otimizado e integração com gateways, ERP e logística. Da Shopify ao headless, do MVP ao high-traffic.",
      tags: ["Shopify", "VTEX", "Stripe", "WooCommerce"],
      illustration: <EcommerceIllustration />,
    },
    {
      kind: "05",
      title: "Integrações & APIs",
      sub: "Conecte tudo que você usa",
      body: "Integramos seu ERP, CRM, gateway, marketplace e sistema legado em uma API limpa. Webhooks, filas, retry — confiabilidade no operacional.",
      tags: ["REST", "GraphQL", "Webhooks", "AWS Lambda"],
      illustration: <ApiIllustration />,
    },
  ];

  const [index, setIndex] = nxState(0);
  const gap = 20;

  const viewportRef = nxRef(null);
  const [vpW, setVpW] = nxState(0);
  const [perView, setPerView] = nxState(3);
  nxEffect(() => {
    const el = viewportRef.current;
    if (!el) return;
    const calcPerView = () => {
      const w = window.innerWidth;
      if (w < 640) return 1;
      if (w < 1024) return 2;
      return 3;
    };
    const update = () => {
      setVpW(el.clientWidth);
      setPerView(calcPerView());
    };
    const ro = new ResizeObserver(update);
    ro.observe(el);
    window.addEventListener("resize", update);
    update();
    return () => {
      ro.disconnect();
      window.removeEventListener("resize", update);
    };
  }, []);

  const maxIndex = Math.max(0, items.length - perView);
  // Clamp index if perView grew
  nxEffect(() => {
    if (index > maxIndex) setIndex(maxIndex);
  }, [maxIndex]);
  const go = (dir) => setIndex((i) => Math.max(0, Math.min(maxIndex, i + dir)));

  const cardW = vpW > 0 ? (vpW - (perView - 1) * gap) / perView : 0;
  const step = cardW + gap;

  return (
    <section
      id="servicos"
      style={{
        padding: "140px 56px",
        borderBottom: `1px solid ${nexusStyles.line}`,
        position: "relative",
        scrollMarginTop: 80,
      }}
    >
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "end",
            marginBottom: 60,
          }}
        >
          <div>
            <div
              style={{
                fontFamily: nexusStyles.mono,
                fontSize: 12,
                color: nexusStyles.accent,
                marginBottom: 16,
              }}
            >
              [ 01 / SERVIÇOS ]
            </div>
            <h2
              style={{
                fontFamily: nexusStyles.font,
                fontWeight: 500,
                fontSize: 64,
                letterSpacing: -2,
                lineHeight: 1,
                margin: 0,
                maxWidth: 720,
              }}
            >
              O que fazemos.
              <br />
              <span style={{ color: nexusStyles.dim }}>
                Do design ao deploy.
              </span>
            </h2>
          </div>
          <div
            style={{
              fontFamily: nexusStyles.font,
              fontSize: 15,
              color: nexusStyles.dim,
              maxWidth: 280,
            }}
          >
            Discovery, design, código e deploy sob o mesmo teto. Sem
            terceirização, sem ruído.
          </div>
        </div>

        {/* Carousel controls */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 24,
          }}
        >
          <div style={{ display: "flex", gap: 6 }}>
            {Array.from({ length: maxIndex + 1 }).map((_, i) => (
              <button
                key={i}
                onClick={() => setIndex(i)}
                style={{
                  width: i === index ? 28 : 8,
                  height: 8,
                  borderRadius: 999,
                  background:
                    i === index ? nexusStyles.accent : nexusStyles.line,
                  border: "none",
                  cursor: "pointer",
                  padding: 0,
                  transition: "width .3s, background .3s",
                }}
                aria-label={`Slide ${i + 1}`}
              />
            ))}
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <span
              style={{
                fontFamily: nexusStyles.mono,
                fontSize: 12,
                color: nexusStyles.dim,
                marginRight: 8,
              }}
            >
              {String(index + 1).padStart(2, "0")} /{" "}
              {String(maxIndex + 1).padStart(2, "0")}
            </span>
            <button
              onClick={() => go(-1)}
              disabled={index === 0}
              className="nexus-carousel-btn"
              style={{
                width: 48,
                height: 48,
                borderRadius: 999,
                border: `1px solid ${nexusStyles.line}`,
                background: "transparent",
                color: nexusStyles.fg,
                cursor: index === 0 ? "not-allowed" : "pointer",
                opacity: index === 0 ? 0.3 : 1,
                fontFamily: nexusStyles.mono,
                fontSize: 16,
                transition: "background .2s, border-color .2s",
              }}
              aria-label="Anterior"
            >
              ←
            </button>
            <button
              onClick={() => go(1)}
              disabled={index === maxIndex}
              className="nexus-carousel-btn"
              style={{
                width: 48,
                height: 48,
                borderRadius: 999,
                border: `1px solid ${nexusStyles.line}`,
                background: "transparent",
                color: nexusStyles.fg,
                cursor: index === maxIndex ? "not-allowed" : "pointer",
                opacity: index === maxIndex ? 0.3 : 1,
                fontFamily: nexusStyles.mono,
                fontSize: 16,
                transition: "background .2s, border-color .2s",
              }}
              aria-label="Próximo"
            >
              →
            </button>
          </div>
        </div>

        {/* Carousel track */}
        <div ref={viewportRef} style={{ overflow: "hidden" }}>
          <div
            style={{
              display: "flex",
              gap: gap,
              transform: `translateX(${-index * step}px)`,
              transition: "transform .6s cubic-bezier(.2,.7,.3,1)",
            }}
          >
            {items.map((it, i) => {
              const visible = i >= index && i < index + perView;
              return (
                <div
                  key={i}
                  style={{
                    flex: `0 0 ${cardW}px`,
                    opacity: visible ? 1 : 0.35,
                    transition: "opacity .4s",
                  }}
                >
                  <div
                    className="nexus-svc-card"
                    style={{
                      border: `1px solid ${nexusStyles.line}`,
                      borderRadius: 16,
                      padding: 0,
                      height: 560,
                      display: "flex",
                      flexDirection: "column",
                      position: "relative",
                      overflow: "hidden",
                      background:
                        "linear-gradient(180deg, rgba(255,255,255,0.02), transparent)",
                      transition: "border-color .3s, transform .3s",
                    }}
                  >
                    {/* Illustration area */}
                    <div
                      style={{
                        height: 200,
                        position: "relative",
                        overflow: "hidden",
                        borderBottom: `1px solid ${nexusStyles.line}`,
                        background:
                          "radial-gradient(ellipse at center, rgba(59,130,246,0.06), transparent 70%)",
                      }}
                    >
                      <div
                        className="nexus-svc-illu"
                        style={{
                          position: "absolute",
                          inset: 0,
                          padding: 20,
                          transition: "transform .5s cubic-bezier(.2,.7,.3,1)",
                        }}
                      >
                        {it.illustration}
                      </div>
                      <div
                        style={{
                          position: "absolute",
                          top: 20,
                          left: 20,
                          right: 20,
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "start",
                          zIndex: 2,
                        }}
                      >
                        <span
                          style={{
                            fontFamily: nexusStyles.mono,
                            fontSize: 12,
                            color: nexusStyles.dim,
                            padding: "4px 10px",
                            background: "rgba(7,7,8,0.8)",
                            backdropFilter: "blur(4px)",
                            borderRadius: 999,
                            border: `1px solid ${nexusStyles.line}`,
                          }}
                        >
                          {it.kind}
                        </span>
                        <span
                          style={{
                            width: 36,
                            height: 36,
                            borderRadius: 999,
                            background: "rgba(7,7,8,0.8)",
                            backdropFilter: "blur(4px)",
                            border: `1px solid ${nexusStyles.line}`,
                            display: "grid",
                            placeItems: "center",
                            color: nexusStyles.fg,
                            fontFamily: nexusStyles.mono,
                          }}
                        >
                          ↗
                        </span>
                      </div>
                    </div>

                    {/* Content area */}
                    <div
                      style={{
                        padding: 28,
                        display: "flex",
                        flexDirection: "column",
                        flex: 1,
                      }}
                    >
                      <div
                        style={{
                          fontFamily: nexusStyles.mono,
                          fontSize: 11,
                          color: nexusStyles.accent,
                          marginBottom: 12,
                        }}
                      >
                        {it.sub.toUpperCase()}
                      </div>
                      <h3
                        style={{
                          fontFamily: nexusStyles.font,
                          fontWeight: 500,
                          fontSize: 28,
                          letterSpacing: -0.6,
                          margin: "0 0 16px",
                          lineHeight: 1.1,
                        }}
                      >
                        {it.title}
                      </h3>
                      <p
                        style={{
                          fontFamily: nexusStyles.font,
                          fontSize: 14,
                          lineHeight: 1.55,
                          color: nexusStyles.dim,
                          margin: 0,
                        }}
                      >
                        {it.body}
                      </p>
                      <div
                        style={{
                          display: "flex",
                          flexWrap: "wrap",
                          gap: 6,
                          marginTop: "auto",
                          paddingTop: 20,
                        }}
                      >
                        {it.tags.map((t) => (
                          <span
                            key={t}
                            style={{
                              fontFamily: nexusStyles.mono,
                              fontSize: 10,
                              color: nexusStyles.dim,
                              padding: "4px 8px",
                              border: `1px solid ${nexusStyles.line}`,
                              borderRadius: 4,
                            }}
                          >
                            {t}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function NexusPortfolio() {
  const cases = [
    {
      tag: "SaaS · Logística",
      name: "RotaPro",
      desc: "Plataforma de controle de fretes/entregas/contas a pagar e receber",
      metric: "−34% custos com frete",
      color: "#3b82f6",
    },
    {
      tag: "Saas · Mobile · Comandas",
      name: "ComandasPro",
      desc: "App+Sistema Web de Gestão de Comandas/Pedidos com relatórios gerenciáveis",
      metric: "-gestão manual de comandas de papel",
      color: "#a855f7",
    },
    {
      tag: "SaaS",
      name: "Sucata Bussiness",
      desc: "Sistema de controle de pedidos + estoque de sucata com contas a pagar e receber",
      metric: "-panilhas de controle de vendas/estoque",
      color: "#f97316",
    },
    {
      tag: "Site",
      name: "Terasts",
      desc: "Site focado em vendas de SPDA para a região de MG e RJ",
      metric: "+desempenho",
      color: "#10b981",
    },
  ];

  return (
    <section
      id="portfolio"
      style={{
        padding: "140px 56px",
        borderBottom: `1px solid ${nexusStyles.line}`,
        position: "relative",
        scrollMarginTop: 80,
      }}
    >
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ marginBottom: 64 }}>
          <div
            style={{
              fontFamily: nexusStyles.mono,
              fontSize: 12,
              color: nexusStyles.accent,
              marginBottom: 16,
            }}
          >
            [ 03 / PORTFOLIO ]
          </div>
          <h2
            style={{
              fontFamily: nexusStyles.font,
              fontWeight: 500,
              fontSize: 64,
              letterSpacing: -2,
              lineHeight: 1,
              margin: 0,
            }}
          >
            Sistemas
            <br />
            já construídos.
          </h2>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 20,
          }}
        >
          {cases.map((c, i) => (
            <NexusReveal key={i} delay={i * 100}>
              <div
                style={{
                  borderRadius: 16,
                  overflow: "hidden",
                  position: "relative",
                  height: 380,
                  border: `1px solid ${nexusStyles.line}`,
                  cursor: "pointer",
                }}
              >
                {/* Placeholder visual */}
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    background: `linear-gradient(135deg, ${c.color}22, ${c.color}05 50%, transparent), repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 18px)`,
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    width: 140,
                    height: 140,
                    borderRadius: "50%",
                    background: `radial-gradient(circle, ${c.color}80, ${c.color}10 70%, transparent)`,
                    filter: "blur(8px)",
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    padding: 28,
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                  }}
                >
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <span
                      style={{
                        fontFamily: nexusStyles.mono,
                        fontSize: 11,
                        color: nexusStyles.dim,
                        padding: "6px 10px",
                        background: "rgba(0,0,0,0.4)",
                        backdropFilter: "blur(6px)",
                        borderRadius: 999,
                        border: `1px solid ${nexusStyles.line}`,
                      }}
                    >
                      {c.tag}
                    </span>
                    <span
                      style={{
                        width: 40,
                        height: 40,
                        borderRadius: 999,
                        background: "rgba(0,0,0,0.4)",
                        backdropFilter: "blur(6px)",
                        border: `1px solid ${nexusStyles.line}`,
                        display: "grid",
                        placeItems: "center",
                        color: nexusStyles.fg,
                        fontFamily: nexusStyles.mono,
                        fontSize: 14,
                      }}
                    >
                      ↗
                    </span>
                  </div>
                  <div>
                    <h3
                      style={{
                        fontFamily: nexusStyles.font,
                        fontWeight: 500,
                        fontSize: 38,
                        letterSpacing: -1,
                        margin: 0,
                        lineHeight: 1,
                      }}
                    >
                      {c.name}
                    </h3>
                    <p
                      style={{
                        fontFamily: nexusStyles.font,
                        fontSize: 15,
                        color: nexusStyles.dim,
                        margin: "10px 0 0",
                      }}
                    >
                      {c.desc}
                    </p>
                    <div
                      style={{
                        marginTop: 20,
                        paddingTop: 16,
                        borderTop: `1px solid ${nexusStyles.line}`,
                        fontFamily: nexusStyles.mono,
                        fontSize: 13,
                        color: c.color,
                      }}
                    >
                      → {c.metric}
                    </div>
                  </div>
                </div>
              </div>
            </NexusReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function NexusClientes() {
  // Logos reais de clientes (arquivos em assets/).
  const brands = [
    { src: "assets/logo-Pimentas.png", name: "Pimenta's Bar e Petiscaria" },
    { src: "assets/logo-BarMusicClub.png", name: "Bar Music Club" },
    { src: "assets/logo.png", name: "TERA Soluções em Tecnologia" },
    { src: "assets/projeto-casa.png", name: "Casa" },
    { src: "assets/logosba.jpg", name: "SBA Sucata Bahia" },
    { src: "assets/sbax.jpeg", name: "Sucata X" },
    { src: "assets/blagropecuaria.png", name: "BL Agropecuária" },
    { src: "assets/otica-central.png", name: "Otica Central" },
    { src: "assets/leao-almeida.png", name: "Leão Almeida Transportadora" },
    { src: "assets/rv-sucata.png", name: "Rv Sucata" },
  ];

  const Logo = ({ b }) => (
    <div
      className="nexus-logo"
      title={b.name}
      style={{
        flex: "0 0 auto",
        width: 200,
        height: 116,
        margin: "0 10px",
        padding: 20,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 14,
        background: "rgba(255,255,255,0.04)",
        border: `1px solid ${nexusStyles.line}`,
        transition: "border-color .25s, transform .25s",
      }}
    >
      <img
        src={b.src}
        alt={b.name}
        loading="lazy"
        style={{
          maxWidth: "100%",
          maxHeight: "100%",
          objectFit: "contain",
          display: "block",
        }}
      />
    </div>
  );

  return (
    <section
      id="clientes"
      style={{
        padding: "140px 0",
        borderBottom: `1px solid ${nexusStyles.line}`,
        position: "relative",
        overflow: "hidden",
        scrollMarginTop: 80,
      }}
    >
      <div
        style={{
          maxWidth: 1180,
          margin: "0 auto",
          padding: "0 56px",
          marginBottom: 72,
        }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 60,
            alignItems: "end",
          }}
        >
          <div>
            <div
              style={{
                fontFamily: nexusStyles.mono,
                fontSize: 12,
                color: nexusStyles.accent,
                marginBottom: 16,
              }}
            >
              [ 02 / CLIENTES ]
            </div>
            <h2
              style={{
                fontFamily: nexusStyles.font,
                fontWeight: 500,
                fontSize: 64,
                letterSpacing: -2,
                lineHeight: 1,
                margin: 0,
              }}
            >
              Nossos
              <br />
              <span style={{ color: nexusStyles.dim }}>clientes.</span>
            </h2>
          </div>
          <div
            style={{
              fontFamily: nexusStyles.font,
              fontSize: 15,
              color: nexusStyles.dim,
              maxWidth: 380,
              justifySelf: "end",
            }}
          >
            De startups em estágio inicial a empresas com décadas de história —
            construímos software para times que levam o produto a sério.
          </div>
        </div>
      </div>

      {/* Marquee row 1 */}
      <div
        style={{
          display: "flex",
          width: "max-content",
          padding: "26px 0",
          animation: "nexusMarquee 50s linear infinite",
          borderTop: `1px solid ${nexusStyles.line}`,
          borderBottom: `1px solid ${nexusStyles.line}`,
        }}
      >
        {[...brands, ...brands].map((b, i) => (
          <Logo key={`r1-${i}`} b={b} />
        ))}
      </div>
      {/* Marquee row 2 reverse */}
      <div
        style={{
          display: "flex",
          width: "max-content",
          padding: "26px 0",
          animation: "nexusMarqueeR 65s linear infinite",
          borderBottom: `1px solid ${nexusStyles.line}`,
        }}
      >
        {[...brands.slice().reverse(), ...brands.slice().reverse()].map(
          (b, i) => (
            <Logo key={`r2-${i}`} b={b} />
          ),
        )}
      </div>

      <div
        style={{
          maxWidth: 1180,
          margin: "64px auto 0",
          padding: "0 56px",
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
          borderTop: `1px solid ${nexusStyles.line}`,
          paddingTop: 32,
        }}
      >
        {[
          { n: "+40", l: "clientes atendidos" },
          { n: "94%", l: "projetos com cliente recorrente" },
          { n: "8+ anos", l: "construindo software" },
        ].map((s, i) => (
          <div
            key={i}
            style={{
              paddingLeft: i === 0 ? 0 : 24,
              borderLeft: i === 0 ? "none" : `1px solid ${nexusStyles.line}`,
            }}
          >
            <div
              style={{
                fontFamily: nexusStyles.font,
                fontSize: 32,
                fontWeight: 500,
                letterSpacing: -1,
                color: nexusStyles.fg,
              }}
            >
              {s.n}
            </div>
            <div
              style={{
                fontFamily: nexusStyles.mono,
                fontSize: 11,
                color: nexusStyles.dim,
                marginTop: 6,
                lineHeight: 1.5,
              }}
            >
              {s.l}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function NexusStack() {
  const stack = [
    "React",
    "Next.js",
    "React Native",
    "Swift",
    "Kotlin",
    "Node.js",
    "TypeScript",
    "PostgreSQL",
    "AWS",
    "Vercel",
    "Stripe",
    "Firebase",
    "Tailwind",
    "Figma",
    "GraphQL",
    "Docker",
    "PHP",
    "Laravel",
    "React Native",
  ];
  return (
    <section
      id="stack"
      style={{
        padding: "120px 0 140px",
        borderBottom: `1px solid ${nexusStyles.line}`,
        overflow: "hidden",
        scrollMarginTop: 80,
      }}
    >
      <div
        style={{
          maxWidth: 1180,
          margin: "0 auto",
          padding: "0 56px",
          marginBottom: 64,
        }}
      >
        <div
          style={{
            fontFamily: nexusStyles.mono,
            fontSize: 12,
            color: nexusStyles.accent,
            marginBottom: 16,
          }}
        >
          [ 04 / STACK ]
        </div>
        <h2
          style={{
            fontFamily: nexusStyles.font,
            fontWeight: 500,
            fontSize: 56,
            letterSpacing: -1.5,
            lineHeight: 1,
            margin: 0,
          }}
        >
          Usamos o que tem de mais atual
          <br />
          <span style={{ color: nexusStyles.dim }}>no mercado.</span>
        </h2>
      </div>
      {/* Marquee row 1 */}
      <div
        style={{
          display: "flex",
          gap: 16,
          animation: "nexusMarquee 40s linear infinite",
          width: "max-content",
        }}
      >
        {[...stack, ...stack].map((t, i) => (
          <div
            key={i}
            style={{
              padding: "18px 32px",
              border: `1px solid ${nexusStyles.line}`,
              borderRadius: 999,
              fontFamily: nexusStyles.font,
              fontSize: 22,
              fontWeight: 400,
              whiteSpace: "nowrap",
              color: nexusStyles.fg,
              background: "rgba(255,255,255,0.02)",
            }}
          >
            {t}
          </div>
        ))}
      </div>
      {/* Marquee row 2 reverse */}
      <div
        style={{
          display: "flex",
          gap: 16,
          animation: "nexusMarqueeR 50s linear infinite",
          width: "max-content",
          marginTop: 16,
        }}
      >
        {[...stack.slice().reverse(), ...stack.slice().reverse()].map(
          (t, i) => (
            <div
              key={i}
              style={{
                padding: "18px 32px",
                border: `1px solid ${nexusStyles.line}`,
                borderRadius: 999,
                fontFamily: nexusStyles.font,
                fontSize: 22,
                fontWeight: 400,
                whiteSpace: "nowrap",
                color: nexusStyles.dim,
              }}
            >
              {t}
            </div>
          ),
        )}
      </div>
    </section>
  );
}

function NexusCTA() {
  return (
    <section
      id="contato"
      style={{
        padding: "160px 56px 100px",
        position: "relative",
        overflow: "hidden",
        scrollMarginTop: 80,
      }}
    >
      <div
        style={{
          position: "absolute",
          width: 1000,
          height: 1000,
          borderRadius: "50%",
          background: `radial-gradient(circle, ${nexusStyles.accent}33, transparent 60%)`,
          filter: "blur(80px)",
          top: -300,
          left: "50%",
          transform: "translateX(-50%)",
          animation: "nexusFloat 12s ease-in-out infinite",
        }}
      />
      <div
        style={{
          position: "relative",
          maxWidth: 980,
          margin: "0 auto",
          textAlign: "center",
        }}
      >
        <div
          style={{
            fontFamily: nexusStyles.mono,
            fontSize: 12,
            color: nexusStyles.accent,
            marginBottom: 24,
          }}
        >
          [ 05 / VAMOS CONVERSAR ]
        </div>
        <h2
          style={{
            fontFamily: nexusStyles.font,
            fontWeight: 500,
            fontSize: 96,
            letterSpacing: -3,
            lineHeight: 0.95,
            margin: 0,
          }}
        >
          Tem uma ideia?
          <br />
          <span
            style={{
              fontStyle: "italic",
              fontFamily: "'Instrument Serif', serif",
              fontWeight: 400,
            }}
          >
            Conta pra gente.
          </span>
        </h2>
        <p
          style={{
            fontFamily: nexusStyles.font,
            fontSize: 20,
            color: nexusStyles.dim,
            maxWidth: 540,
            margin: "32px auto 0",
            lineHeight: 1.5,
          }}
        >
          Respondemos rapidamente com uma proposta de escopo + estimativa de
          prazo. Sem ligação chata, sem follow-up infinito.
        </p>
        <div
          style={{
            display: "flex",
            gap: 14,
            justifyContent: "center",
            marginTop: 48,
          }}
        >
          <a
            onClick={() =>
              window.dispatchEvent(new Event("open-contact-modal"))
            }
            style={{
              padding: "20px 36px",
              borderRadius: 999,
              background: nexusStyles.accent,
              color: "#fff",
              fontFamily: nexusStyles.font,
              fontWeight: 500,
              fontSize: 17,
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              cursor: "pointer",
              boxShadow: `0 12px 40px ${nexusStyles.accent}55`,
            }}
          >
            Pedir orçamento <span>→</span>
          </a>
        </div>

        <div
          style={{
            marginTop: 100,
            padding: 28,
            border: `1px solid ${nexusStyles.line}`,
            borderRadius: 16,
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 24,
            textAlign: "left",
          }}
        >
          {[{ l: "EMAIL", v: "contato@aptechs.com.br" }].map((c, i) => (
            <div key={i}>
              <div
                style={{
                  fontFamily: nexusStyles.mono,
                  fontSize: 11,
                  color: nexusStyles.dim,
                  marginBottom: 8,
                }}
              >
                {c.l}
              </div>
              <div
                style={{
                  fontFamily: nexusStyles.font,
                  fontSize: 18,
                  color: nexusStyles.fg,
                }}
              >
                {c.v}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function NexusFooter() {
  return (
    <footer
      style={{
        borderTop: `1px solid ${nexusStyles.line}`,
        padding: "32px 56px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        fontFamily: nexusStyles.mono,
        fontSize: 12,
        color: nexusStyles.dim,
      }}
    >
      <span>
        © {new Date().getFullYear()} APTechs · CNPJ 64.811.186/0001-41
      </span>
      <span>Feito com o ❤️ em São Paulo · BR para o 🌐</span>
      <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span
          style={{
            width: 6,
            height: 6,
            borderRadius: 999,
            background: "#10b981",
            boxShadow: "0 0 8px #10b981",
            animation: "nexusPulse 2s infinite",
          }}
        />
        Todos os sistemas estão operacionais
      </span>
    </footer>
  );
}

function NexusContactModal() {
  const [open, setOpen] = nxState(false);
  const [done, setDone] = nxState(false);
  const [error, setError] = nxState("");
  const [form, setForm] = nxState({ nome: "", telefone: "", mensagem: "" });

  nxEffect(() => {
    const openH = () => {
      setOpen(true);
      setDone(false);
      setError("");
    };
    const escH = (e) => {
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("open-contact-modal", openH);
    window.addEventListener("keydown", escH);
    return () => {
      window.removeEventListener("open-contact-modal", openH);
      window.removeEventListener("keydown", escH);
    };
  }, []);

  nxEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }, [open]);

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.nome || !form.telefone || !form.mensagem) {
      setError("Preencha todos os campos.");
      return;
    }
    setError("");
    // Abre o cliente de e-mail do navegador com os campos já preenchidos.
    const assunto = `Novo projeto — ${form.nome}`;
    const corpo =
      `Nome: ${form.nome}\n` +
      `Telefone: ${form.telefone}\n\n` +
      `Mensagem:\n${form.mensagem}`;
    const mailto =
      `mailto:contato@aptechs.com.br` +
      `?subject=${encodeURIComponent(assunto)}` +
      `&body=${encodeURIComponent(corpo)}`;
    window.location.href = mailto;
    setDone(true);
    setForm({ nome: "", telefone: "", mensagem: "" });
  };

  if (!open) return null;

  const inputStyle = {
    width: "100%",
    padding: "14px 16px",
    background: "rgba(255,255,255,0.04)",
    border: `1px solid ${nexusStyles.line}`,
    borderRadius: 10,
    color: nexusStyles.fg,
    fontFamily: nexusStyles.font,
    fontSize: 15,
    outline: "none",
    transition: "border-color .2s, background .2s",
  };

  const labelStyle = {
    fontFamily: nexusStyles.mono,
    fontSize: 11,
    color: nexusStyles.dim,
    textTransform: "uppercase",
    letterSpacing: 1,
    marginBottom: 8,
    display: "block",
  };

  return (
    <div
      className="nexus-modal-backdrop"
      onClick={(e) => {
        if (e.target === e.currentTarget) setOpen(false);
      }}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 1000,
        background: "rgba(0,0,0,0.7)",
        backdropFilter: "blur(12px)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 20,
        animation: "nexusFadeIn .25s ease",
      }}
    >
      <div
        className="nexus-modal-card"
        style={{
          width: "100%",
          maxWidth: 540,
          background: nexusStyles.bg,
          border: `1px solid ${nexusStyles.line}`,
          borderRadius: 20,
          padding: 36,
          position: "relative",
          maxHeight: "calc(100vh - 40px)",
          overflow: "auto",
          animation: "nexusModalIn .35s cubic-bezier(.2,.7,.3,1)",
        }}
      >
        {/* Decorative orb */}
        <div
          style={{
            position: "absolute",
            top: -60,
            right: -60,
            width: 240,
            height: 240,
            borderRadius: "50%",
            pointerEvents: "none",
            background: `radial-gradient(circle, ${nexusStyles.accent}33, transparent 65%)`,
            filter: "blur(40px)",
          }}
        />

        {/* Close */}
        <button
          onClick={() => setOpen(false)}
          aria-label="Fechar"
          style={{
            position: "absolute",
            top: 18,
            right: 18,
            width: 36,
            height: 36,
            borderRadius: 999,
            border: `1px solid ${nexusStyles.line}`,
            background: "transparent",
            color: nexusStyles.fg,
            cursor: "pointer",
            fontFamily: nexusStyles.mono,
            fontSize: 16,
            display: "grid",
            placeItems: "center",
            transition: "background .2s, border-color .2s",
          }}
          className="nexus-modal-close"
        >
          ×
        </button>

        {done ? (
          <div
            style={{
              position: "relative",
              textAlign: "center",
              padding: "20px 0",
            }}
          >
            <div
              style={{
                width: 64,
                height: 64,
                borderRadius: "50%",
                background: "#10b98122",
                border: "1px solid #10b981",
                display: "grid",
                placeItems: "center",
                margin: "0 auto 24px",
                color: "#10b981",
                fontSize: 28,
              }}
            >
              ✓
            </div>
            <h3
              style={{
                fontFamily: nexusStyles.font,
                fontWeight: 500,
                fontSize: 28,
                letterSpacing: -0.8,
                margin: 0,
              }}
            >
              Mensagem enviada.
            </h3>
            <p
              style={{
                fontFamily: nexusStyles.font,
                fontSize: 15,
                color: nexusStyles.dim,
                marginTop: 12,
                lineHeight: 1.5,
              }}
            >
              Obrigado! Vamos retornar eem breve.
            </p>
            <button
              onClick={() => setOpen(false)}
              style={{
                marginTop: 24,
                padding: "12px 24px",
                borderRadius: 999,
                background: nexusStyles.fg,
                color: "#000",
                border: "none",
                fontFamily: nexusStyles.font,
                fontWeight: 500,
                fontSize: 14,
                cursor: "pointer",
              }}
            >
              Fechar
            </button>
          </div>
        ) : (
          <div style={{ position: "relative" }}>
            <div
              style={{
                fontFamily: nexusStyles.mono,
                fontSize: 12,
                color: nexusStyles.accent,
                marginBottom: 14,
              }}
            >
              [ NOVO PROJETO ]
            </div>
            <h3
              style={{
                fontFamily: nexusStyles.font,
                fontWeight: 500,
                fontSize: 32,
                letterSpacing: -1,
                margin: 0,
                lineHeight: 1.05,
              }}
            >
              Tem uma ideia?
              <br />
              <span
                style={{
                  fontStyle: "italic",
                  fontFamily: "'Instrument Serif', serif",
                  fontWeight: 400,
                  color: nexusStyles.accent2,
                }}
              >
                Conta pra gente.
              </span>
            </h3>
            <p
              style={{
                fontFamily: nexusStyles.font,
                fontSize: 14,
                color: nexusStyles.dim,
                marginTop: 12,
                marginBottom: 28,
                lineHeight: 1.55,
              }}
            >
              Respondemos em até 4h úteis com uma proposta de escopo e
              estimativa de prazo.
            </p>

            <form
              onSubmit={onSubmit}
              style={{ display: "flex", flexDirection: "column", gap: 18 }}
            >
              <div>
                <label htmlFor="nexus-nome" style={labelStyle}>
                  Nome
                </label>
                <input
                  id="nexus-nome"
                  type="text"
                  value={form.nome}
                  onChange={(e) => setForm({ ...form, nome: e.target.value })}
                  placeholder="Como podemos te chamar?"
                  className="nexus-modal-input"
                  style={inputStyle}
                  autoFocus
                  required
                />
              </div>
              <div>
                <label htmlFor="nexus-tel" style={labelStyle}>
                  Telefone
                </label>
                <input
                  id="nexus-tel"
                  type="tel"
                  value={form.telefone}
                  onChange={(e) =>
                    setForm({ ...form, telefone: e.target.value })
                  }
                  placeholder="(00) 00000-0000"
                  className="nexus-modal-input"
                  style={inputStyle}
                  required
                />
              </div>
              <div>
                <label htmlFor="nexus-msg" style={labelStyle}>
                  Mensagem
                </label>
                <textarea
                  id="nexus-msg"
                  value={form.mensagem}
                  onChange={(e) =>
                    setForm({ ...form, mensagem: e.target.value })
                  }
                  placeholder="Conta um pouco sobre o que você quer construir…"
                  className="nexus-modal-input"
                  rows="4"
                  style={{
                    ...inputStyle,
                    resize: "vertical",
                    minHeight: 110,
                    fontFamily: nexusStyles.font,
                  }}
                  required
                />
              </div>

              {error ? (
                <div
                  style={{
                    fontFamily: nexusStyles.mono,
                    fontSize: 12,
                    color: "#f87171",
                    padding: "10px 14px",
                    borderRadius: 8,
                    background: "rgba(248,113,113,0.08)",
                    border: "1px solid rgba(248,113,113,0.3)",
                  }}
                >
                  {error}
                </div>
              ) : null}

              <button
                type="submit"
                style={{
                  marginTop: 4,
                  padding: "16px 24px",
                  borderRadius: 999,
                  background: nexusStyles.accent,
                  color: "#fff",
                  border: "none",
                  fontFamily: nexusStyles.font,
                  fontWeight: 500,
                  fontSize: 16,
                  cursor: "pointer",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: 10,
                  boxShadow: `0 12px 32px ${nexusStyles.accent}44`,
                  transition: "transform .15s, box-shadow .2s",
                }}
                className="nexus-modal-submit"
              >
                Enviar mensagem{" "}
                <span style={{ fontFamily: nexusStyles.mono }}>→</span>
              </button>

              
            </form>
          </div>
        )}
      </div>
    </div>
  );
}

function NexusSite() {
  return (
    <div
      className="nexus-root"
      style={{
        background: nexusStyles.bg,
        color: nexusStyles.fg,
        fontFamily: nexusStyles.font,
        position: "relative",
        width: "100%",
        overflowX: "hidden",
      }}
    >
      <style>{`
        @keyframes nexusFloat {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(40px, -30px); }
        }
        @keyframes nexusFloat2 {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(-30px, 40px); }
        }
        @keyframes nexusPulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
        @keyframes nexusMarquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        @keyframes nexusMarqueeR {
          0% { transform: translateX(-50%); }
          100% { transform: translateX(0); }
        }
        .nexus-svc-card:hover { border-color: ${nexusStyles.accent} !important; transform: translateY(-4px); }
        .nexus-svc-card:hover .nexus-svc-illu { transform: scale(1.05); }
        .nexus-nav-link:hover { opacity: 1 !important; }
        .nexus-carousel-btn:hover:not(:disabled) { background: ${nexusStyles.accent}22 !important; border-color: ${nexusStyles.accent} !important; }
        .nexus-logo:hover { border-color: ${nexusStyles.accent} !important; transform: translateY(-3px); }

        /* MODAL */
        @keyframes nexusFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes nexusModalIn {
          from { opacity: 0; transform: translateY(20px) scale(0.96); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .nexus-modal-input:focus {
          border-color: ${nexusStyles.accent} !important;
          background: rgba(59,130,246,0.06) !important;
        }
        .nexus-modal-input::placeholder { color: rgba(255,255,255,0.3); }
        .nexus-modal-close:hover { background: ${nexusStyles.accent}22 !important; border-color: ${nexusStyles.accent} !important; }
        .nexus-modal-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 40px ${nexusStyles.accent}66; }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 1024px) {
          .nexus-root section { padding-left: 32px !important; padding-right: 32px !important; }
          .nexus-root nav { padding-left: 32px !important; padding-right: 32px !important; }
          .nexus-root footer { padding-left: 32px !important; padding-right: 32px !important; }
          /* Generic h2 in sections */
          .nexus-root section h2 { font-size: clamp(36px, 6.5vw, 56px) !important; letter-spacing: -1.5px !important; }
          /* Hide the right "tag/desc" caption on tablet headers */
        }

        @media (max-width: 768px) {
          /* Layout containers: tighter padding */
          .nexus-root section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 80px !important; padding-bottom: 80px !important; }
          .nexus-root nav { padding-left: 20px !important; padding-right: 20px !important; gap: 12px !important; }
          .nexus-root footer { padding-left: 20px !important; padding-right: 20px !important; flex-wrap: wrap; gap: 12px; text-align: center; }

          /* Hide middle nav links on mobile */
          .nexus-root nav > div:nth-child(2) { display: none !important; }
          .nexus-root nav > a { padding: 9px 16px !important; font-size: 13px !important; }
          .nexus-root nav img { height: 36px !important; }

          /* Hero */
          .nexus-root section:first-of-type { height: auto !important; min-height: 100vh; padding-top: 120px !important; padding-bottom: 80px !important; }
          .nexus-root h1 { font-size: clamp(40px, 12vw, 64px) !important; letter-spacing: -1.5px !important; line-height: 1 !important; }
          .nexus-root section p { font-size: 16px !important; }

          /* Hero buttons row → stack */
          .nexus-root section > div > div[style*="display: flex"][style*="gap: 16px"] { flex-direction: column !important; align-items: stretch !important; }
          .nexus-root section > div > div[style*="display: flex"][style*="gap: 16px"] > a { justify-content: center !important; padding: 14px 22px !important; font-size: 15px !important; }

          /* Stats row: 4 → 2 cols */
          .nexus-root [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; }
          .nexus-root [style*="grid-template-columns: repeat(4"] > div { padding-left: 0 !important; border-left: none !important; }
          .nexus-root [style*="grid-template-columns: repeat(4"] > div > div:first-child { font-size: 32px !important; }

          /* Sections h2 */
          .nexus-root section h2 { font-size: clamp(34px, 9vw, 48px) !important; letter-spacing: -1px !important; line-height: 1.05 !important; }

          /* Section headers: 1fr 1fr → stack */
          .nexus-root [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }
          .nexus-root section > div > div[style*="justify-content: space-between"][style*="align-items: end"] { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }

          /* 2-col grids → 1 col (portfolio) */
          .nexus-root [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }

          /* 3-col grids → 1 col (contact info) */
          .nexus-root [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; gap: 20px !important; }

          /* Service cards in carousel: reduce min height + tweak illustration height */
          .nexus-svc-card { height: 520px !important; }

          /* Carousel controls — keep them small */
          .nexus-carousel-btn { width: 40px !important; height: 40px !important; }

          /* Clientes marquee logos: smaller tiles */
          .nexus-logo { width: 150px !important; height: 92px !important; padding: 14px !important; }

          /* Stack marquee pills smaller */
          .nexus-root section > div[style*="animation: nexusMarquee"] > div,
          .nexus-root section > div[style*="animation: nexusMarqueeR"] > div { padding: 12px 22px !important; font-size: 16px !important; }

          /* CTA big h2 */
          .nexus-root section[id="contato"] h2 { font-size: clamp(44px, 13vw, 72px) !important; letter-spacing: -1.5px !important; }
          .nexus-root section[id="contato"] > div > div[style*="display: flex"][style*="justify-content: center"] { flex-direction: column !important; align-items: stretch !important; }
          .nexus-root section[id="contato"] > div > div[style*="display: flex"][style*="justify-content: center"] > a { justify-content: center !important; }

          /* Hero ticker pill: ensure phrases area fits */
          .nexus-root section > div > div[style*="border-radius: 999"][style*="overflow: hidden"] { max-width: 100% !important; }
        }

        @media (max-width: 420px) {
          .nexus-root nav { padding: 12px 16px !important; }
          .nexus-root section { padding-left: 16px !important; padding-right: 16px !important; }
          .nexus-root h1 { font-size: 44px !important; }
          .nexus-root section h2 { font-size: 34px !important; }
        }
      `}</style>
      <NexusNav />
      <NexusHero />
      <NexusServices />
      <NexusClientes />
      <NexusPortfolio />
      <NexusStack />
      <NexusCTA />
      <NexusFooter />
      <NexusContactModal />
    </div>
  );
}

Object.assign(window, { NexusSite });