/* global React */
// Foundation + Systems linear marquees
// ─────────────────────────────────────────────────────────────────
// Two infinite linear ticker rows shown directly under the hero:
//   1. The world's leading foundation models  (Anthropic, OpenAI,
//      Google Gemini, Meta, Mistral AI, Cohere, xAI, DeepSeek,
//      AWS Bedrock, Azure OpenAI)
//   2. AI expertise across the systems that power your operations
//      (Microsoft 365, Salesforce, HubSpot, SharePoint, Slack,
//      ServiceNow, Notion, Snowflake, Atlassian, Google Workspace)
//
// All marks are simplified, recognizable SVG logos drawn here. We
// duplicate each row so it can crawl linearly via translateX(-50%)
// for a seamless loop.

// ─── Logos ──────────────────────────────────────────────────────
const FoundationLogos = {
  Anthropic: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width="28" height="28" viewBox="0 0 64 64" fill="#181818">
        <path d="M20.5 12 L31.5 12 L43.5 52 L33.5 52 L31 43.5 L21 43.5 L18.5 52 L8.5 52 L20.5 12 Z M23 35.5 L29 35.5 L26 24 L23 35.5 Z" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>Anthropic</span>
    </div>,

  OpenAI: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width="28" height="28" viewBox="0 0 32 32" fill="#181818">
        <path d="M28.9 13.1c.7-2 .5-4.2-.7-6-1.6-2.6-4.7-3.8-7.6-3 -.7-.8-1.6-1.4-2.5-1.8 -.9-.3-1.9-.5-3-.5 -2.9 0-5.5 1.8-6.4 4.5 -2 .4-3.7 1.6-4.8 3.3 -1.6 2.6-1.2 5.9.9 8.1 -.7 2 -.5 4.2.7 6 1.6 2.6 4.7 3.8 7.6 3 1.3 1.5 3.2 2.3 5.2 2.3 2.9 0 5.5-1.8 6.4-4.5 2-.4 3.7-1.6 4.8-3.3 1.6-2.6 1.2-5.9-.9-8.1zm-9.6 13.5c-1.2 0-2.3-.4-3.2-1.1l.2-.1 5.4-3.1c.3-.2.4-.5.4-.8v-7.6l2.3 1.3v6.3c0 2.8-2.3 5.1-5.1 5.1zm-11-4.7c-.6-1-.8-2.2-.6-3.4l.2.1 5.4 3.1c.3.2.6.2.9 0l6.6-3.8v2.6l-5.5 3.2c-1 .6-2.1.8-3.2.6 -1.6-.4-3-1.5-3.8-2.4zm-1.5-12c.6-1 1.5-1.8 2.6-2.2v6.4c0 .3.2.6.4.8l6.6 3.8 -2.3 1.3 -5.4-3.1c-2.5-1.4-3.3-4.6-1.9-7zm18.8 4.4l-6.6-3.8 2.3-1.3 5.4 3.1c2.5 1.4 3.3 4.6 1.9 7 -.6 1-1.5 1.8-2.6 2.2v-6.4c0-.3-.1-.6-.4-.8zm2.3-3.5l-.2-.1 -5.4-3.1c-.3-.2-.6-.2-.9 0l-6.6 3.8v-2.6l5.5-3.2c2.5-1.4 5.6-.5 7 1.9 .5 1 .8 2.2.6 3.3zm-14.3 4.8l-2.3-1.3v-6.3c0-2.8 2.3-5.1 5.1-5.1 1.2 0 2.3.4 3.2 1.1l-.2.1 -5.4 3.1c-.3.2-.4.5-.4.8v7.6zm1.2-2.6L16 11.5l2.9 1.7v3.4L16 18.3l-2.9-1.7v-3.4z" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>OpenAI</span>
    </div>,

  Gemini: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none">
        <defs>
          <linearGradient id="gemHero" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#4796E3" />
            <stop offset="35%" stopColor="#1B72E8" />
            <stop offset="70%" stopColor="#8054D9" />
            <stop offset="100%" stopColor="#D8639B" />
          </linearGradient>
        </defs>
        <path d="M16 2 C16 11 21 14 30 16 C21 18 16 21 16 30 C16 21 11 18 2 16 C11 14 16 11 16 2 Z" fill="url(#gemHero)" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 30, color: "#181818", letterSpacing: "-0.02em" }}>Gemini</span>
    </div>,

  Meta: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="40" height="28" viewBox="0 0 40 28" fill="none">
        <defs>
          <linearGradient id="metaG" x1="0%" y1="50%" x2="100%" y2="50%">
            <stop offset="0%" stopColor="#0064E1" />
            <stop offset="100%" stopColor="#0082FB" />
          </linearGradient>
        </defs>
        <path d="M6 22 C2 22 1 17 4 11 C6 7 9 5 12 5 C15 5 17 8 20 13 C23 8 25 5 28 5 C31 5 34 7 36 11 C39 17 38 22 34 22 C30 22 27 16 25 12 C24 10 23 9 22 9 C21 9 20 10 19 11 C18 13 16 17 15 19 C13 21 10 22 6 22 Z M9 9 C7 9 5 12 5 16 C5 18 6 19 7 19 C9 19 11 16 13 13 C12 11 10 9 9 9 Z M30 9 C29 9 27 11 26 13 C28 16 30 19 32 19 C33 19 34 18 34 16 C34 12 32 9 30 9 Z" fill="url(#metaG)" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 30, color: "#181818", letterSpacing: "-0.02em" }}>Meta</span>
    </div>,

  Mistral: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="32" height="28" viewBox="0 0 32 28" fill="none">
        {/* Stylized Mistral mark — gradient steps from yellow to red */}
        <rect x="2" y="4" width="4" height="20" fill="#000000" />
        <rect x="6" y="4" width="4" height="4" fill="#F7D046" />
        <rect x="10" y="4" width="4" height="20" fill="#000000" />
        <rect x="14" y="8" width="4" height="4" fill="#F2A73B" />
        <rect x="18" y="4" width="4" height="20" fill="#000000" />
        <rect x="22" y="12" width="4" height="4" fill="#EE792F" />
        <rect x="26" y="4" width="4" height="20" fill="#000000" />
        <rect x="6" y="20" width="4" height="4" fill="#EB5829" />
        <rect x="14" y="20" width="4" height="4" fill="#E84228" />
        <rect x="22" y="20" width="4" height="4" fill="#E12424" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>Mistral AI</span>
    </div>,

  Cohere: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none">
        <circle cx="16" cy="16" r="12" fill="#39594D" />
        <path d="M11 20 C13.5 20 16 18 18 16 C20 14 22.5 12 25 12" stroke="#FF7759" strokeWidth="3" strokeLinecap="round" fill="none" />
        <circle cx="11" cy="20" r="2.4" fill="#FF7759" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>cohere</span>
    </div>,

  xAI: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="28" height="28" viewBox="0 0 32 32" fill="#181818">
        <path d="M5 5 L11 5 L16 12 L21 5 L27 5 L19 16 L27 27 L21 27 L16 20 L11 27 L5 27 L13 16 Z" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>xAI</span>
    </div>,

  DeepSeek: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none">
        <circle cx="16" cy="16" r="12" fill="#4D6BFE" />
        <path d="M10 16 Q14 9 22 11 Q18 16 22 21 Q14 23 10 16 Z" fill="white" />
        <circle cx="14" cy="15" r="1.4" fill="#4D6BFE" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>DeepSeek</span>
    </div>,

  Bedrock: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width="32" height="28" viewBox="0 0 32 28" fill="none">
        <path d="M16 2 L28 8 L28 20 L16 26 L4 20 L4 8 Z" fill="none" stroke="#FF9900" strokeWidth="2" strokeLinejoin="round" />
        <path d="M16 8 L22 11 L22 17 L16 20 L10 17 L10 11 Z" fill="#FF9900" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>AWS Bedrock</span>
    </div>,

  AzureOpenAI: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="28" viewBox="0 0 32 28" fill="none">
        <path d="M14 4 L26 4 L20 24 L8 24 Z" fill="#0078D4" />
        <path d="M3 24 L13 8 L18 14 L9 24 Z" fill="#50E6FF" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>Azure OpenAI</span>
    </div>

};

const SystemLogos = {
  M365: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none">
        <rect x="3" y="3" width="12" height="12" fill="#F25022" />
        <rect x="17" y="3" width="12" height="12" fill="#7FBA00" />
        <rect x="3" y="17" width="12" height="12" fill="#00A4EF" />
        <rect x="17" y="17" width="12" height="12" fill="#FFB900" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>Microsoft 365</span>
    </div>,

  Salesforce: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="44" height="32" viewBox="0 0 44 32" fill="#00A1E0">
        <path d="M18 7c1.5-1.6 3.6-2.6 5.9-2.6 3.1 0 5.7 1.7 7.1 4.2 1.3-.6 2.7-.9 4.2-.9 5.4 0 9.8 4.4 9.8 9.9 0 5.4-4.4 9.8-9.8 9.8-.7 0-1.3-.1-1.9-.2-1.2 2.2-3.5 3.7-6.2 3.7-1.1 0-2.2-.3-3.2-.7-1.2 2.7-3.9 4.7-7.1 4.7-3.4 0-6.2-2.1-7.3-5.1-.5.1-1 .2-1.6.2C3.6 30.7 0 27.1 0 22.6 0 19.6 1.6 17 4 15.6c-.5-1.1-.8-2.4-.8-3.7C3.2 6.8 7.1 3 11.7 3c2.7 0 5.1 1.3 6.6 3.4l-.3.6z" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 30, color: "#00A1E0", letterSpacing: "-0.01em" }}>salesforce</span>
    </div>,

  HubSpot: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width="30" height="32" viewBox="0 0 30 32" fill="#FF7A59">
        <path d="M22 12.5V8.4c1.1-.5 1.9-1.6 1.9-2.9 0-1.8-1.4-3.2-3.2-3.2-1.8 0-3.2 1.4-3.2 3.2 0 1.3.8 2.4 1.9 2.9v4.1c-1.6.2-3.1.9-4.3 1.9L4.8 7.4c.1-.3.2-.5.2-.8 0-1.8-1.4-3.2-3.2-3.2-1.8 0-3.2 1.4-3.2 3.2C-1.4 8.4 0 9.8 1.8 9.8c.6 0 1.1-.2 1.6-.5l10.1 7.9c-.9 1.3-1.4 2.9-1.4 4.6 0 1.8.6 3.5 1.5 4.8L10.6 30c-.2-.1-.5-.1-.7-.1-1.5 0-2.7 1.2-2.7 2.7 0 1.5 1.2 2.7 2.7 2.7s2.7-1.2 2.7-2.7c0-.3 0-.5-.1-.7l3-3.4c1.4 1 3.1 1.7 5 1.7 4.5 0 8.2-3.7 8.2-8.2 0-4-2.8-7.3-6.6-8zm-1.4 12.4c-2.4 0-4.2-1.9-4.2-4.2 0-2.3 1.9-4.2 4.2-4.2 2.3 0 4.2 1.9 4.2 4.2.1 2.3-1.8 4.2-4.2 4.2z" transform="translate(2,0)" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#33475B", letterSpacing: "-0.01em" }}>HubSp<span style={{ color: "#FF7A59" }}>o</span>t</span>
    </div>,

  SharePoint: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
        <circle cx="11" cy="11" r="7" fill="#0078D4" />
        <circle cx="19" cy="17" r="6" fill="#28A8EA" />
        <circle cx="22" cy="24" r="4.5" fill="#50D9FF" />
        <text x="11" y="14.5" fontFamily="var(--font-display)" fontWeight="700" fontSize="9" fill="white" textAnchor="middle">S</text>
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 28, color: "#181818", letterSpacing: "-0.01em" }}>SharePoint</span>
    </div>,

  Slack: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none">
        <rect x="4" y="13" width="9" height="6" rx="3" fill="#36C5F0" />
        <rect x="13" y="4" width="6" height="9" rx="3" fill="#2EB67D" />
        <rect x="19" y="13" width="9" height="6" rx="3" fill="#ECB22E" />
        <rect x="13" y="19" width="6" height="9" rx="3" fill="#E01E5A" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>slack</span>
    </div>,

  ServiceNow: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="#62D84E">
        <circle cx="16" cy="16" r="13" />
        <circle cx="16" cy="16" r="6" fill="white" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>ServiceNow</span>
    </div>,

  Notion: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
        <rect x="4" y="4" width="24" height="24" rx="3" fill="white" stroke="#181818" strokeWidth="1.5" />
        <path d="M10 9 L10 23 M10 9 L20 22 M22 9 L22 23" stroke="#181818" strokeWidth="2.4" strokeLinecap="round" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>Notion</span>
    </div>,

  Snowflake: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none" stroke="#29B5E8" strokeWidth="2.4" strokeLinecap="round">
        <line x1="16" y1="3" x2="16" y2="29" />
        <line x1="3" y1="16" x2="29" y2="16" />
        <line x1="6.5" y1="6.5" x2="25.5" y2="25.5" />
        <line x1="25.5" y1="6.5" x2="6.5" y2="25.5" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>Snowflake</span>
    </div>,

  Atlassian: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="32" height="30" viewBox="0 0 32 30" fill="none">
        <defs>
          <linearGradient id="atlG" x1="50%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#0052CC" />
            <stop offset="100%" stopColor="#2684FF" />
          </linearGradient>
        </defs>
        <path d="M9 14 L1 28 L17 28 Z" fill="url(#atlG)" />
        <path d="M16 3 C13 8 14 16 22 26 L30 26 C23 14 19 6 17 3 Z" fill="#2684FF" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, color: "#181818", letterSpacing: "-0.02em" }}>Atlassian</span>
    </div>,

  Workspace: () =>
  <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width="32" height="30" viewBox="0 0 32 30" fill="none">
        <circle cx="9" cy="15" r="5" fill="#4285F4" />
        <circle cx="20" cy="9" r="5" fill="#EA4335" />
        <circle cx="23" cy="20" r="5" fill="#FBBC04" />
        <circle cx="14" cy="23" r="4.5" fill="#34A853" />
      </svg>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 28, color: "#181818", letterSpacing: "-0.01em" }}>Google Workspace</span>
    </div>

};

// ─── Marquee row ─────────────────────────────────────────────────
function MarqueeRow({ items, duration = 50, reverse = false }) {
  // Duplicate the array so a -50% translation produces a seamless loop.
  const loop = [...items, ...items];
  return (
    <div className="aj-marquee" style={{
      position: "relative",
      overflow: "hidden",
      // Mask the edges so logos fade in/out instead of popping
      WebkitMaskImage: "linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)",
      maskImage: "linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)"
    }}>
      <div className={`aj-marquee-track ${reverse ? "aj-rev" : ""}`} style={{
        display: "flex",
        gap: 80,
        width: "max-content",
        animationDuration: `${duration}s`
      }}>
        {loop.map((Logo, i) =>
        <div key={i} style={{
          display: "flex", alignItems: "center", justifyContent: "center",
          flex: "0 0 auto", height: 72,
          opacity: 0.92
        }}>
            <Logo />
          </div>
        )}
      </div>
    </div>);

}

// ─── The section itself ─────────────────────────────────────────
function FoundationMarqueeSection() {
  const foundation = [
  FoundationLogos.Anthropic,
  FoundationLogos.OpenAI,
  FoundationLogos.Gemini,
  FoundationLogos.Meta,
  FoundationLogos.Mistral,
  FoundationLogos.Cohere,
  FoundationLogos.xAI,
  FoundationLogos.DeepSeek,
  FoundationLogos.Bedrock,
  FoundationLogos.AzureOpenAI];

  const systems = [
  SystemLogos.M365,
  SystemLogos.Salesforce,
  SystemLogos.HubSpot,
  SystemLogos.SharePoint,
  SystemLogos.Slack,
  SystemLogos.ServiceNow,
  SystemLogos.Notion,
  SystemLogos.Snowflake,
  SystemLogos.Atlassian,
  SystemLogos.Workspace];


  return (
    <section style={{
      background: "var(--paper)",
      paddingTop: 88,
      paddingBottom: 88,
      borderTop: "1px solid rgba(0,29,107,0.06)",
      borderBottom: "1px solid rgba(0,29,107,0.06)"
    }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 72 }}>
        {/* Section heading */}
        <div className="reveal" style={{ textAlign: "center", maxWidth: 880, margin: "0 auto" }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "6px 14px",
            background: "rgba(0,29,107,0.05)",
            border: "1px solid rgba(0,29,107,0.10)",
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--ink-900)", letterSpacing: "0.18em", textTransform: "uppercase",
            fontWeight: 600, borderRadius: "0px"
          }}>
            <span style={{
              width: 6, height: 6, background: "var(--sky-400)",
              boxShadow: "0 0 8px var(--sky-400)", borderRadius: "9px"
            }} />
            Platforms we train on
          </div>
          <h2 style={{
            marginTop: 18,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.025em",
            color: "var(--ink-900)", textWrap: "balance"
          }}>
            Enterprise AI Strategy &amp; Integration<br />
            <span style={{ color: "var(--sky-500)" }}>Across the World's Leading Platforms</span>
          </h2>
        </div>

        {/* Row 1 — Foundation models */}
        <div>
          <div className="reveal" style={{
            textAlign: "center",
            fontFamily: "var(--font-sans)", fontSize: 13,
            color: "var(--ink-900)", fontWeight: 700,
            letterSpacing: "0.18em", textTransform: "uppercase",
            marginBottom: 40
          }}>
            The world's leading foundation models <span style={{ color: "rgba(0,29,107,0.55)", fontWeight: 500 }}>— strategically deployed and governed</span>
          </div>
          <MarqueeRow items={foundation} duration={55} />
        </div>

        {/* Row 2 — Operations systems (reverse direction so they feel connected) */}
        <div>
          <div className="reveal" style={{
            textAlign: "center",
            fontFamily: "var(--font-sans)", fontSize: 13,
            color: "var(--ink-900)", fontWeight: 700,
            letterSpacing: "0.18em", textTransform: "uppercase",
            marginBottom: 40
          }}>
            AI expertise across the systems <span style={{ color: "rgba(0,29,107,0.55)", fontWeight: 500 }}>that power your operations</span>
          </div>
          <MarqueeRow items={systems} duration={60} reverse />
        </div>
      </div>

      <style>{`
        @keyframes ajMarquee     { from { transform: translateX(0) }    to { transform: translateX(-50%) } }
        @keyframes ajMarqueeRev  { from { transform: translateX(-50%) } to { transform: translateX(0) } }
        .aj-marquee-track { animation: ajMarquee linear infinite; will-change: transform; }
        .aj-marquee-track.aj-rev { animation-name: ajMarqueeRev; }
        @media (prefers-reduced-motion: reduce) {
          .aj-marquee-track { animation: none; transform: translateX(0) !important; }
        }
        @media (max-width: 640px) {
          .aj-marquee-track { gap: 56px !important; }
          .aj-marquee-track > div { height: 56px !important; }
          .aj-marquee-track svg { width: 26px !important; height: 26px !important; }
          .aj-marquee-track span { font-size: 22px !important; }
        }
      `}</style>
    </section>);

}

Object.assign(window, { FoundationMarqueeSection });