/* FORGE - video-led customer landing */

// Hero word cycle. Keep this whole-word only: the landing page is often
// inspected from screenshots and recordings, where partial words read broken.
const FORGE_TYPE_WORDS = [
  "pump line",
  "rocket stack",
  "CNC floor",
  "pyrolysis skid",
  "cubesat program",
];
const FORGE_TYPE_HOLD_MS = 2200;

function useTypewriterCycle(words) {
  const [wordIdx, setWordIdx] = useState(0);

  useEffect(() => {
    if (typeof window === "undefined") return undefined;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return undefined;

    const timer = setTimeout(() => {
      setWordIdx((i) => (i + 1) % words.length);
    }, FORGE_TYPE_HOLD_MS);
    return () => clearTimeout(timer);
  }, [wordIdx, words]);

  return words[wordIdx % words.length] || "";
}

// Count-up animation — fires when [data-count] enters viewport.
// Uses tabular-nums + min-width to prevent layout shift mid-count.
function useCountUp(target, opts) {
  const ref = React.useRef(null);
  const [value, setValue] = useState(0);
  const [done, setDone] = useState(false);
  const duration = (opts && opts.duration) || 1400;

  useEffect(() => {
    if (typeof window === "undefined") return undefined;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setValue(target); setDone(true); return undefined; }
    const el = ref.current;
    if (!el) return undefined;
    let raf;
    let start = 0;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !done) {
          start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
            setValue(Math.round(target * eased));
            if (t < 1) raf = requestAnimationFrame(tick);
            else setDone(true);
          };
          raf = requestAnimationFrame(tick);
          observer.disconnect();
        }
      });
    }, { threshold: 0.35 });
    observer.observe(el);
    return () => { if (raf) cancelAnimationFrame(raf); observer.disconnect(); };
  }, [target, duration, done]);

  return [ref, value];
}

function CountUp({ target, suffix, prefix, className, format }) {
  const [ref, value] = useCountUp(target, { duration: 1400 });
  const display = format ? format(value) : String(value);
  return (
    <span ref={ref} className={"forge-countup " + (className || "")} aria-label={`${prefix || ""}${target}${suffix || ""}`}>
      {prefix || ""}{display}{suffix || ""}
    </span>
  );
}

function ScreenLanding({ onTryForge }) {
  const rootRef = React.useRef(null);
  const cyclingWord = useTypewriterCycle(FORGE_TYPE_WORDS);

  function go(path, tenantId) {
    if (tenantId && typeof setActiveTenant === "function") setActiveTenant(tenantId);
    if (typeof window !== "undefined" && typeof window.navigate === "function") {
      window.navigate(path);
    } else if (typeof window !== "undefined") {
      window.location.hash = path;
    } else if (path === "/forge/onboarding" && typeof onTryForge === "function") {
      onTryForge();
    }
  }

  function bookDemo() {
    if (typeof window !== "undefined") {
      window.location.href = "mailto:sankalp@transientlabs.ai?subject=Forge%20demo";
    }
  }

  useEffect(() => {
    if (typeof document === "undefined") return undefined;
    const meta = document.querySelector('meta[name="viewport"]');
    const original = meta && meta.getAttribute("content");
    if (meta) meta.setAttribute("content", "width=device-width, initial-scale=1");
    return () => {
      if (meta && original) meta.setAttribute("content", original);
    };
  }, []);

  useEffect(() => {
    if (typeof window === "undefined" || !rootRef.current) return undefined;
    const root = rootRef.current;

    const revealNodes = Array.from(root.querySelectorAll("[data-reveal]"));
    const observer = "IntersectionObserver" in window
      ? new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) entry.target.classList.add("is-visible");
          });
        }, { threshold: 0.14, rootMargin: "0px 0px -6% 0px" })
      : null;

    revealNodes.forEach((node) => {
      if (observer) observer.observe(node);
      else node.classList.add("is-visible");
    });

    const onMouseMove = (event) => {
      const rect = root.getBoundingClientRect();
      root.style.setProperty("--mx", ((event.clientX - rect.left) / Math.max(rect.width, 1)).toFixed(3));
      root.style.setProperty("--my", ((event.clientY - rect.top) / Math.max(rect.height, 1)).toFixed(3));
    };

    const onScroll = () => {
      const top = root.scrollTop || 0;
      root.style.setProperty("--scroll-y", String(top));
    };

    root.addEventListener("mousemove", onMouseMove);
    root.addEventListener("scroll", onScroll, { passive: true });
    onScroll();

    return () => {
      if (observer) observer.disconnect();
      root.removeEventListener("mousemove", onMouseMove);
      root.removeEventListener("scroll", onScroll);
    };
  }, []);

  const stats = [
    { k: "ECO cycle", v: "9d -> 3d", d: "receipt signed across four roles" },
    { k: "Go-live motion", v: "14 days", d: "pilot risk reversed" },
    { k: "Execution surface", v: "4 modes", d: "plan, build, line, traveler" },
  ];

  const surfaces = [
    {
      name: "Plan",
      title: "Change starts where PLM stops.",
      body: "Pull BOMs, routings, CTQs, alternates, and ECOs into one executable plan before the shop floor hears about the change.",
      route: "/plan/gantt",
      meta: "BOM / routing / ECO impact",
      video: "client/assets/forge-plan.mp4",
      poster: "client/assets/forge-plan-poster.jpg",
    },
    {
      name: "Build",
      title: "Turn engineering intent into gates.",
      body: "Forge resolves station work, quality checks, materials, tooling, and sign-off ladders before release.",
      route: "/build/mbom",
      meta: "MBOM / gates / CTQ proof",
      video: "client/assets/forge-build.mp4",
      poster: "client/assets/forge-build-poster.jpg",
    },
    {
      name: "Line",
      title: "Dispatch the floor from a signed source.",
      body: "Line leads see readiness, holds, tooling, crew, and station instructions without reconciling six tools at 7:30am.",
      route: "/line/readiness",
      meta: "stations / holds / crew",
      video: "client/assets/forge-line.mp4",
      poster: "client/assets/forge-line-poster.jpg",
    },
    {
      name: "Traveler",
      title: "Every scan becomes an audit trail.",
      body: "The operator executes the current spec, signs the receipt, and leaves behind a ledger event that quality can trust.",
      route: "/traveler/receiving",
      meta: "traveler / receipt / ledger",
      video: "client/assets/forge-traveler.mp4",
      poster: "client/assets/forge-traveler-poster.jpg",
    },
  ];

  const trustCards = [
    {
      t: "Deploys where production allows",
      b: "SaaS for pilots, single-tenant VPC for production, on-prem and air-gapped patterns for defense and space programs.",
      tags: ["AWS VPC", "Azure", "On-prem", "Air-gap"],
    },
    {
      t: "Connects to the stack you already run",
      b: "The onboarding promise only works if ERP, BI, and shop systems are already accounted for.",
      tags: ["SAP B1", "proALPHA", "Infor", "NetSuite"],
    },
    {
      t: "Signed by design",
      b: "Every release, station scan, exception, and traveler receipt can be chained to a tamper-evident event.",
      tags: ["Ed25519", "AS9100", "ISO 9001", "ITAR-ready"],
    },
  ];

  return (
    <div ref={rootRef} className="forge-lp" data-screen="landing">
      <LandingStyles />

      <header className="forge-lp-header">
        <button className="forge-brand" type="button" onClick={() => go("/forge/landing")}>
          <span className="forge-brand-mark" />
          <span className="forge-brand-copy">
            <strong>Forge</strong>
            <span>system of action</span>
          </span>
        </button>
        <nav className="forge-lp-nav" aria-label="Landing navigation">
          <a href="#/plan/gantt" onClick={(e) => { e.preventDefault(); go("/plan/gantt", "tritan"); }}>Plan</a>
          <a href="#/build/mbom" onClick={(e) => { e.preventDefault(); go("/build/mbom", "tritan"); }}>Build</a>
          <a href="#/line/readiness" onClick={(e) => { e.preventDefault(); go("/line/readiness", "tritan"); }}>Line</a>
          <a href="#/traveler/receiving" onClick={(e) => { e.preventDefault(); go("/traveler/receiving", "tritan"); }}>Traveler</a>
        </nav>
        <div className="forge-lp-header-actions">
          <a className="forge-ghost-link" href="#/forge/dashboard" onClick={(e) => { e.preventDefault(); go("/forge/dashboard", "tritan"); }}>Open demo</a>
          <button type="button" className="forge-top-cta" onClick={bookDemo}>Book 30 min</button>
        </div>
      </header>

      <main>
        <section className="forge-hero">
          <div className="forge-hero-media" aria-hidden="true">
            <video
              data-forge-video
              className="forge-hero-video"
              src="client/assets/borrowed/launch-vehicle.mp4"
              poster="client/assets/borrowed/launch-vehicle-poster.jpg"
              autoPlay
              muted
              loop
              playsInline
            />
            <div className="forge-hero-vignette" />
          </div>

          <div className="forge-hero-inner">
            <div className="forge-hero-copy" data-reveal>
              <h1>
                Make every change<br />
                executable on the<br />
                <span className="forge-type-line" aria-live="polite">
                  <span className="forge-type-wrap">
                    <span className="forge-type-word">{cyclingWord}</span>
                    <span className="forge-type-caret" aria-hidden="true">_</span>
                  </span>
                  <span className="forge-type-period">.</span>
                </span>
              </h1>
              <p>
                Forge is the system of action between PLM, ERP, and the station console.
                It turns ECOs, routings, quality gates, and traveler scans into one signed
                operating loop for complex hardware teams.
              </p>
              <div className="forge-hero-actions">
                <button type="button" className="forge-primary" onClick={() => go("/forge/dashboard", "tritan")}>
                  <span className="forge-btn-label">Run live Tritan demo</span>
                  <span className="forge-btn-arrow" aria-hidden="true">
                    <span className="forge-btn-arrow-glyph">→</span>
                    <span className="forge-btn-arrow-glyph forge-btn-arrow-ghost">→</span>
                  </span>
                </button>
                <button type="button" className="forge-secondary" onClick={bookDemo}>
                  <span className="forge-btn-label">Book 30 min</span>
                  <span className="forge-btn-arrow" aria-hidden="true">
                    <span className="forge-btn-arrow-glyph">→</span>
                    <span className="forge-btn-arrow-glyph forge-btn-arrow-ghost">→</span>
                  </span>
                </button>
              </div>
            </div>

            <div className="forge-hero-console" data-reveal>
              <div className="forge-console-head">
                <span>live line readiness</span>
                <b>M-27418</b>
              </div>
              <div className="forge-console-grid">
                {stats.map((s) => (
                  <div className="forge-console-stat" key={s.k}>
                    <span>{s.k}</span>
                    <strong>{s.v}</strong>
                    <small>{s.d}</small>
                  </div>
                ))}
              </div>
              <div className="forge-console-flow">
                {["PLM", "ERP", "Line", "Ledger"].map((label, i) => (
                  <span key={label} style={{ "--i": i }}>{label}</span>
                ))}
              </div>
            </div>
          </div>

          <div className="forge-proof-rail" data-reveal>
            <div className="forge-proof-copy">Visible proof for hardware teams that cannot ship on screenshots.</div>
            <a className="forge-logo-card" href="https://climitra.com" target="_blank" rel="noreferrer">
              <img src="client/assets/climitra-logo.svg" alt="Climitra" />
              <span>pyrolysis line</span>
            </a>
            <a className="forge-logo-card skyroot" href="https://skyroot.in" target="_blank" rel="noreferrer">
              <img src="client/assets/skyroot-logo.webp" alt="Skyroot Aerospace" />
              <span>space-grade workflow</span>
            </a>
          </div>
        </section>

        <section className="forge-marquee">
          <video
            data-forge-video
            className="forge-marquee-video"
            src="client/assets/forge-hero.mp4"
            poster="client/assets/forge-hero-poster.jpg"
            autoPlay
            muted
            loop
            playsInline
            aria-hidden="true"
          />
          <div className="forge-marquee-overlay" />
          <div className="forge-marquee-copy" data-reveal>
            <span className="forge-section-label">For what flies, drives, lifts</span>
            <h2>The floor that built it,<br />signed off the same hour.</h2>
            <p>
              Rockets, pumps, pyrolysis skids, machine tools. If it ships from a
              factory, Forge is the system of action between the engineer's intent
              and the operator's scan.
            </p>
          </div>
        </section>

        <section className="forge-section forge-video-section">
          <div className="forge-section-copy" data-reveal>
            <span className="forge-section-label">One signed flow</span>
            <h2>Collapse the Tuesday mess into one receipt.</h2>
            <p>
              The buyer does not need another dashboard. They need the change to move:
              from engineering release to ERP material reality to station instructions to
              a signed traveler that survives audit.
            </p>
          </div>
          <div className="forge-product-video-wrap" data-reveal>
            <video
              data-forge-video
              className="forge-product-video"
              src="client/assets/forge-signed-flow.mp4"
              poster="client/assets/forge-signed-flow-poster.jpg"
              autoPlay
              muted
              loop
              playsInline
            />
          </div>
        </section>

        <section className="forge-section forge-surfaces">
          <div className="forge-section-copy centered" data-reveal>
            <span className="forge-section-label">Plan -> Build -> Line -> Traveler</span>
            <h2>Four surfaces, one operating truth.</h2>
            <p>
              Each mode is a live route in the demo, not a marketing diagram. Hover, click,
              and the buyer goes straight into the working surface.
            </p>
          </div>
          <div className="forge-surface-grid">
            {surfaces.map((surface, i) => (
              <button
                key={surface.name}
                type="button"
                className="forge-surface-card"
                data-reveal
                style={{ "--reveal-i": i }}
                onClick={() => go(surface.route, "tritan")}
              >
                <div className="forge-surface-video">
                  <video
                    data-forge-video
                    src={surface.video}
                    poster={surface.poster}
                    autoPlay
                    muted
                    loop
                    playsInline
                    preload="metadata"
                    aria-hidden="true"
                  />
                </div>
                <div className="forge-surface-meta">
                  <span>{surface.name}</span>
                  <strong>{surface.title}</strong>
                  <p>{surface.body}</p>
                  <em>{surface.meta}</em>
                </div>
              </button>
            ))}
          </div>
        </section>

        <section className="forge-section forge-proof">
          <div className="forge-proof-panel forge-frame" data-reveal>
            <div>
              <span className="forge-section-label">Pilot scope</span>
              <h2>Prove one real change order in two weeks.</h2>
              <p>
                Bring your bills, routings, CTQs, quality gates, and the ugly
                spreadsheet that still runs the floor. Forge scopes the pilot around
                one representative ECO and shows the route, station console, traveler,
                and signed receipt before asking for a rollout.
              </p>
            </div>
            <div className="forge-proof-metrics">
              <div>
                <strong><CountUp target={14} suffix=" days" /></strong>
                <span>target for a working pilot review</span>
              </div>
              <div>
                <strong><CountUp target={1} suffix=" ECO" /></strong>
                <span>mapped from release to receipt</span>
              </div>
              <div>
                <strong><CountUp target={4} suffix=" surfaces" /></strong>
                <span>plan, build, line, traveler in one loop</span>
              </div>
            </div>
          </div>
        </section>

        <section className="forge-section forge-trust">
          <div className="forge-section-copy" data-reveal>
            <span className="forge-section-label">Trust, scale, sovereignty</span>
            <h2>Production buyers need deployment truth.</h2>
            <p>
              The page has to answer the questions that kill industrial software deals:
              where it runs, what it connects to, who signs, and how audit leaves the plant.
            </p>
          </div>
          <div className="forge-trust-grid">
            {trustCards.map((card, i) => (
              <article className="forge-trust-card forge-frame" key={card.t} data-reveal style={{ "--reveal-i": i }}>
                <h3>{card.t}</h3>
                <p>{card.b}</p>
                <div>
                  {card.tags.map((tag) => <span key={tag}>{tag}</span>)}
                </div>
              </article>
            ))}
          </div>
        </section>

        <section className="forge-final">
          <div className="forge-final-inner" data-reveal>
            <h2>The station console is the close.</h2>
            <p>
              If Forge cannot turn one representative ECO into a working route,
              traveler, and signed receipt, pause the rollout.
            </p>
            <div>
              <button type="button" className="forge-primary" onClick={bookDemo}>
                <span className="forge-btn-label">Book 30 min</span>
                <span className="forge-btn-arrow" aria-hidden="true">
                  <span className="forge-btn-arrow-glyph">→</span>
                  <span className="forge-btn-arrow-glyph forge-btn-arrow-ghost">→</span>
                </span>
              </button>
              <button type="button" className="forge-secondary light" onClick={() => go("/forge/dashboard", "tritan")}>
                <span className="forge-btn-label">Run Tritan now</span>
                <span className="forge-btn-arrow" aria-hidden="true">
                  <span className="forge-btn-arrow-glyph">→</span>
                  <span className="forge-btn-arrow-glyph forge-btn-arrow-ghost">→</span>
                </span>
              </button>
            </div>
          </div>
        </section>

        <footer className="forge-footer">
          <div className="forge-footer-inner">
            <div className="forge-footer-brand">
              <div className="forge-footer-mark">
                <span className="forge-footer-dot" />
                <span>FORGE</span>
              </div>
              <div className="forge-footer-tag">system of action</div>
              <p className="forge-footer-blurb">
                The operating system between PLM, ERP, and the station console.
                Pumps, cubesats, CNC mills, pyrolysis lines.
              </p>
            </div>
            <div className="forge-footer-cols">
              <div className="forge-footer-col">
                <div className="forge-footer-col-head">Product</div>
                <a href="#/forge/onboarding" onClick={(e) => { e.preventDefault(); go("/forge/onboarding"); }}>Onboarding</a>
                <a href="#/plan/gantt" onClick={(e) => { e.preventDefault(); go("/plan/gantt", "tritan"); }}>Plan</a>
                <a href="#/build/mbom" onClick={(e) => { e.preventDefault(); go("/build/mbom", "tritan"); }}>Build</a>
                <a href="#/line/readiness" onClick={(e) => { e.preventDefault(); go("/line/readiness", "tritan"); }}>Line</a>
                <a href="#/traveler/receiving" onClick={(e) => { e.preventDefault(); go("/traveler/receiving", "tritan"); }}>Traveler</a>
              </div>
              <div className="forge-footer-col">
                <div className="forge-footer-col-head">Tenants</div>
                <a href="#/forge/dashboard" onClick={(e) => { e.preventDefault(); go("/forge/dashboard", "tritan"); }}>Tritan · Pumps</a>
                <a href="#/forge/dashboard" onClick={(e) => { e.preventDefault(); go("/forge/dashboard", "mittelstand"); }}>Mittelstand</a>
                <a href="#/forge/dashboard" onClick={(e) => { e.preventDefault(); go("/forge/dashboard", "aetherion"); }}>Aetherion · Space</a>
              </div>
              <div className="forge-footer-col">
                <div className="forge-footer-col-head">Customers</div>
                <a href="https://climitra.com" target="_blank" rel="noreferrer noopener">Climitra</a>
                <a href="https://skyroot.in" target="_blank" rel="noreferrer noopener">Skyroot Aerospace</a>
                <a href="#" onClick={bookDemo}>Become one →</a>
              </div>
              <div className="forge-footer-col">
                <div className="forge-footer-col-head">Company</div>
                <a href="https://100xai.engineering" target="_blank" rel="noreferrer noopener">100xai.engineering</a>
                <a href="https://transientlabs.ai" target="_blank" rel="noreferrer noopener">transientlabs.ai</a>
                <a href="#" onClick={bookDemo}>Contact</a>
                <a href="#" onClick={bookDemo}>Careers</a>
              </div>
            </div>
          </div>
          <div className="forge-footer-bottom">
            <span>FORGE · system of action · © 2026 100xai · transient labs</span>
            <span>sankalp@transientlabs.ai</span>
          </div>
        </footer>
      </main>
    </div>
  );
}

function LandingStyles() {
  return (
    <style>{`
      .forge-lp {
        --paper: #f4f0e7;
        --paper-2: #ebe5d8;
        --ink: #f8f4ea;
        --ink-dark: #0b0c0e;
        --muted: rgba(248,244,234,.68);
        --muted-dark: rgba(11,12,14,.66);
        --line: rgba(248,244,234,.18);
        --line-dark: rgba(11,12,14,.16);
        --accent: #ff8a1f;
        --accent-2: #ffd15a;
        --ok: #5ee0a0;
        position: absolute;
        inset: 0;
        overflow-y: auto;
        overflow-x: hidden;
        background: #07080a;
        color: var(--ink);
        font-family: var(--font-ui);
        scroll-behavior: smooth;
      }

      .forge-lp * { box-sizing: border-box; }

      .forge-lp-header {
        position: sticky;
        top: 0;
        z-index: 20;
        height: 64px;
        display: grid;
        grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
        align-items: center;
        gap: 22px;
        padding: 0 clamp(18px, 4vw, 56px);
        background: rgba(7,8,10,.76);
        border-bottom: 1px solid rgba(248,244,234,.12);
        backdrop-filter: blur(18px);
      }

      .forge-brand,
      .forge-lp-nav button,
      .forge-ghost-link,
      .forge-top-cta,
      .forge-primary,
      .forge-secondary,
      .forge-surface-card {
        font: inherit;
      }

      .forge-brand {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--ink);
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
      }

      .forge-brand-mark {
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: var(--accent);
        box-shadow: 0 0 24px rgba(255,138,31,.72);
      }

      .forge-brand-copy {
        display: inline-flex;
        align-items: baseline;
        gap: 9px;
        text-transform: uppercase;
        font-family: var(--font-mono);
        letter-spacing: .08em;
        font-size: 12px;
      }

      .forge-brand-copy span { color: rgba(248,244,234,.66); }

      .forge-lp-nav {
        display: inline-flex;
        justify-content: center;
        gap: 4px;
        border: 1px solid rgba(248,244,234,.13);
        border-radius: 999px;
        padding: 4px;
        background: rgba(248,244,234,.06);
      }

      .forge-lp-nav button,
      .forge-lp-nav a,
      .forge-ghost-link {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 13px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: rgba(248,244,234,.72);
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: color .18s ease, background .18s ease, transform .18s ease;
      }

      .forge-lp-nav button:hover,
      .forge-lp-nav a:hover,
      .forge-ghost-link:hover {
        color: var(--ink);
        background: rgba(248,244,234,.09);
        transform: translateY(-1px);
      }

      .forge-lp-header-actions {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .forge-top-cta {
        height: 36px;
        padding: 0 15px;
        border-radius: 999px;
        border: 1px solid rgba(255,138,31,.7);
        background: var(--accent);
        color: #150d06;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: transform .18s ease, filter .18s ease;
      }

      .forge-top-cta:hover,
      .forge-primary:hover,
      .forge-secondary:hover {
        transform: translateY(-2px);
      }

      .forge-hero {
        position: relative;
        min-height: calc(92vh - 64px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
        isolation: isolate;
        padding: 92px clamp(18px, 4vw, 56px) 22px;
      }

      .forge-hero-media {
        position: absolute;
        inset: 0;
        z-index: -2;
        overflow: hidden;
        background: #07080a;
      }

      .forge-hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.08) translate3d(calc((var(--mx, .5) - .5) * -18px), calc((var(--my, .5) - .5) * -14px), 0);
        opacity: .92;
        filter: saturate(1.1) contrast(1.08);
      }

      .forge-hero-vignette {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 76% 40%, rgba(255,138,31,.20), transparent 34%),
          linear-gradient(90deg, rgba(7,8,10,.95) 0%, rgba(7,8,10,.78) 42%, rgba(7,8,10,.24) 78%, rgba(7,8,10,.76) 100%),
          linear-gradient(180deg, rgba(7,8,10,.40), rgba(7,8,10,.90));
      }

      .forge-hero-inner {
        width: min(1220px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
        gap: clamp(32px, 6vw, 86px);
        align-items: end;
      }

      .forge-hero-copy h1 {
        max-width: 820px;
        margin: 0;
        font-size: clamp(52px, 7.4vw, 110px);
        line-height: .88;
        letter-spacing: 0;
        font-weight: 700;
      }

      .forge-hero-copy p {
        max-width: 690px;
        margin: 28px 0 0;
        font-size: clamp(18px, 2.1vw, 24px);
        line-height: 1.38;
        color: var(--muted);
      }

      .forge-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin-top: 34px;
      }

      .forge-primary,
      .forge-secondary {
        min-height: 46px;
        border-radius: 999px;
        padding: 0 20px;
        cursor: pointer;
        transition: transform .18s ease, background .18s ease, border-color .18s ease;
      }

      .forge-primary {
        background: var(--accent);
        border: 1px solid var(--accent);
        color: #150d06;
        font-weight: 700;
      }

      .forge-secondary {
        background: rgba(248,244,234,.08);
        border: 1px solid rgba(248,244,234,.22);
        color: var(--ink);
        font-weight: 700;
      }

      .forge-secondary.light {
        color: var(--ink-dark);
        border-color: rgba(11,12,14,.24);
        background: rgba(255,255,255,.68);
      }

      .forge-hero-console {
        position: relative;
        align-self: stretch;
        min-height: 420px;
        border: 1px solid rgba(248,244,234,.16);
        border-radius: 10px;
        background: rgba(7,8,10,.48);
        backdrop-filter: blur(18px);
        box-shadow: 0 40px 120px rgba(0,0,0,.35);
        overflow: hidden;
      }

      .forge-hero-console::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(248,244,234,.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(248,244,234,.05) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: linear-gradient(180deg, black, transparent 92%);
      }

      .forge-console-head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        padding: 0 16px;
        border-bottom: 1px solid rgba(248,244,234,.12);
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(248,244,234,.62);
      }

      .forge-console-head b {
        color: var(--accent-2);
        font-weight: 600;
      }

      .forge-console-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 22px;
      }

      .forge-console-stat {
        padding: 20px 0;
        border-bottom: 1px solid rgba(248,244,234,.13);
      }

      .forge-console-stat span,
      .forge-console-stat small {
        display: block;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(248,244,234,.64);
      }

      .forge-console-stat strong {
        display: block;
        margin: 8px 0 6px;
        font-family: var(--font-mono);
        font-size: clamp(24px, 3vw, 38px);
        font-weight: 500;
        color: var(--ink);
      }

      .forge-console-flow {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 24px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }

      .forge-console-flow span {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        border: 1px solid rgba(248,244,234,.16);
        background: rgba(248,244,234,.055);
        color: rgba(248,244,234,.72);
        font-family: var(--font-mono);
        font-size: 11px;
        animation: forgePulse 4s ease-in-out infinite;
        animation-delay: calc(var(--i) * .45s);
      }

      .forge-proof-rail {
        width: min(1220px, 100%);
        margin: clamp(32px, 6vh, 70px) auto 0;
        display: grid;
        grid-template-columns: minmax(260px, 1fr) 220px 250px;
        gap: 12px;
        align-items: stretch;
      }

      .forge-proof-copy,
      .forge-logo-card {
        min-height: 74px;
        border: 1px solid rgba(248,244,234,.10);
        background: rgba(248,244,234,.025);
        backdrop-filter: blur(16px);
        border-radius: 8px;
      }

      .forge-proof-copy {
        display: flex;
        align-items: center;
        padding: 0 22px;
        color: rgba(248,244,234,.76);
        font-size: 14px;
        line-height: 1.45;
      }

      /* Logo cards — dark, no white plates. Logos read in their own ink on
         the dark hero. Climitra and Skyroot are normalized to the same vertical
         optical size (~30px tall) so the rail looks like a real customer strip,
         not two unrelated cards. */
      .forge-logo-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: 16px 22px;
        text-decoration: none;
        color: var(--ink);
        transition: transform .22s cubic-bezier(.16,1,.3,1),
                    background .22s ease,
                    border-color .22s ease;
      }

      .forge-logo-card:hover {
        transform: translateY(-3px);
        background: rgba(248,244,234,.05);
        border-color: color-mix(in oklch, var(--accent) 35%, rgba(248,244,234,.18));
      }

      .forge-logo-card img {
        display: block;
        height: 30px;
        width: auto;
        max-width: 180px;
        object-fit: contain;
        opacity: .94;
        transition: opacity .22s ease;
      }

      .forge-logo-card:hover img { opacity: 1; }

      .forge-logo-card.skyroot img {
        /* Skyroot wordmark in the .webp is BLACK-ink-on-transparent (not
           white). On the dark hero card it would vanish — invert it so the
           ink reads as light, matching Climitra's #F8F4EA recolor. The kite +
           SKYROOT glyphs and the AEROSPACE subtext both flatten to white,
           giving the rail a single visual weight across both customers. */
        height: 34px;
        max-width: 180px;
        filter: brightness(0) invert(1);
      }

      .forge-logo-card span {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: .10em;
        text-transform: uppercase;
        color: rgba(248,244,234,.50);
      }

      .forge-section {
        padding: clamp(80px, 11vw, 150px) clamp(18px, 4vw, 56px);
      }

      .forge-section-copy {
        width: min(660px, 100%);
      }

      .forge-section-copy.centered {
        margin: 0 auto 42px;
        text-align: center;
      }

      .forge-section-label {
        display: block;
        margin-bottom: 14px;
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--accent);
      }

      .forge-section h2,
      .forge-final h2 {
        margin: 0;
        font-size: clamp(38px, 6vw, 76px);
        line-height: .96;
        letter-spacing: 0;
      }

      .forge-section p,
      .forge-final p {
        margin: 20px 0 0;
        font-size: clamp(16px, 1.7vw, 20px);
        line-height: 1.52;
        color: var(--muted);
      }

      /* Marquee — borrowed launch-vehicle footage. Full-width video panel
         with copy floated over the bottom-left, edge-to-edge to make the
         largest visual moment of the page. */
      .forge-marquee {
        position: relative;
        width: 100%;
        min-height: clamp(420px, 62vh, 720px);
        overflow: hidden;
        background: #050608;
        isolation: isolate;
      }
      .forge-marquee-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        opacity: .85;
        animation: forgeMarqueeKenBurns 22s ease-in-out infinite alternate;
      }
      @keyframes forgeMarqueeKenBurns {
        0%   { transform: scale(1.04) translate(0, 0); }
        100% { transform: scale(1.10) translate(-1.4%, -0.8%); }
      }
      .forge-marquee-overlay {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(5,6,8,.45) 0%, rgba(5,6,8,.20) 35%, rgba(5,6,8,.78) 100%),
          radial-gradient(60% 80% at 20% 100%, rgba(255,138,31,.18), transparent 60%);
        z-index: 1;
        pointer-events: none;
      }
      .forge-marquee-copy {
        position: relative;
        z-index: 2;
        max-width: 720px;
        margin: 0 auto;
        padding: clamp(78px, 14vw, 160px) clamp(24px, 6vw, 56px) clamp(72px, 11vw, 130px);
        color: var(--ink);
      }
      .forge-marquee-copy h2 {
        margin: 14px 0 0;
        font-size: clamp(40px, 6vw, 76px);
        line-height: .98;
        letter-spacing: -0.01em;
        font-weight: 700;
        text-wrap: balance;
      }
      .forge-marquee-copy p {
        margin: 18px 0 0;
        max-width: 560px;
        color: var(--muted);
        font-size: clamp(16px, 1.4vw, 18px);
        line-height: 1.55;
      }
      .forge-marquee-copy .forge-section-label {
        display: inline-flex;
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: var(--accent);
      }

      .forge-video-section {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
        gap: clamp(36px, 7vw, 96px);
        align-items: center;
        background: #0c0d10;
      }

      .forge-product-video-wrap {
        position: relative;
        border: 1px solid rgba(248,244,234,.15);
        border-radius: 12px;
        overflow: hidden;
        background: #141414;
        box-shadow: 0 30px 100px rgba(0,0,0,.34);
      }

      .forge-product-video {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      .forge-surfaces {
        background: var(--paper);
        color: var(--ink-dark);
      }

      .forge-surfaces .forge-section-label { color: #b95a0e; }
      .forge-surfaces .forge-section-copy p { color: var(--muted-dark); }

      .forge-surface-grid {
        width: min(1220px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }

      .forge-surface-card {
        position: relative;
        min-height: 580px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border: 1px solid var(--line-dark);
        border-radius: 12px;
        background: rgba(255,255,255,.44);
        color: var(--ink-dark);
        text-align: left;
        cursor: pointer;
        overflow: hidden;
        transition: transform .26s cubic-bezier(.16,1,.3,1),
                    background .22s ease,
                    border-color .22s ease,
                    box-shadow .26s ease;
      }

      /* Product-UI video frame — the live, animated half of each card.
         Sits at the top with a 16:10 ratio. The video loop is muted +
         autoplay so the card breathes; on hover the entire card lifts. */
      .forge-surface-video {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        background: var(--ink-dark);
        overflow: hidden;
        border-bottom: 1px solid var(--line-dark);
      }
      .forge-surface-video::after {
        /* Faint hazard-orange wash to tie video into accent palette */
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 0%, transparent 70%, rgba(11,12,14,.18) 100%);
        pointer-events: none;
      }
      .forge-surface-video video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
        transform: scale(1.02);
        transition: transform .42s cubic-bezier(.16,1,.3,1);
      }
      .forge-surface-card:hover .forge-surface-video video { transform: scale(1.05); }

      .forge-surface-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 22px 24px 26px;
        flex: 1;
      }

      .forge-surface-card::after {
        content: "";
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 22px;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), transparent);
        transform: scaleX(.18);
        transform-origin: left;
        transition: transform .32s cubic-bezier(.16,1,.3,1);
      }

      .forge-surface-card:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,.80);
        border-color: rgba(11,12,14,.28);
        box-shadow: 0 22px 40px -20px rgba(11,12,14,.22);
      }

      .forge-surface-card:hover::after { transform: scaleX(1); }

      .forge-surface-card span,
      .forge-surface-card em {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: rgba(11,12,14,.48);
        font-style: normal;
      }

      .forge-surface-card strong {
        font-size: 22px;
        line-height: 1.08;
        letter-spacing: 0;
      }

      .forge-surface-card p {
        margin: 0;
        color: rgba(11,12,14,.68);
        font-size: 14px;
        line-height: 1.5;
      }

      .forge-surface-card em {
        margin-top: auto;
        color: #a04d0c;
      }

      .forge-proof {
        background:
          linear-gradient(180deg, rgba(7,8,10,.96), rgba(7,8,10,.92)),
          #07080a;
      }

      .forge-proof-panel {
        width: min(1220px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, .95fr) minmax(320px, .75fr);
        gap: clamp(34px, 6vw, 74px);
        padding: clamp(30px, 5vw, 58px);
        border: 1px solid rgba(248,244,234,.14);
        border-radius: 14px;
        background:
          radial-gradient(circle at 85% 0%, rgba(255,138,31,.18), transparent 42%),
          rgba(248,244,234,.055);
      }

      .forge-proof-panel h2 {
        margin: 0;
        font-size: clamp(40px, 7vw, 88px);
        line-height: .92;
        letter-spacing: 0;
      }

      .forge-proof-panel p {
        margin: 22px 0 0;
        color: var(--muted);
        font-size: clamp(17px, 1.7vw, 21px);
        line-height: 1.5;
      }

      .forge-proof-metrics {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 18px;
      }

      .forge-proof-metrics div {
        border-top: 1px solid rgba(248,244,234,.16);
        padding-top: 18px;
      }

      .forge-proof-metrics strong {
        display: block;
        font-family: var(--font-mono);
        font-size: clamp(34px, 4vw, 54px);
        font-weight: 500;
      }

      .forge-proof-metrics span {
        display: block;
        margin-top: 6px;
        color: rgba(248,244,234,.58);
      }

      .forge-trust {
        background: #0f1013;
        display: grid;
        grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
        gap: clamp(34px, 6vw, 80px);
        align-items: start;
      }

      .forge-trust-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .forge-trust-card {
        padding: 24px;
        border: 1px solid rgba(248,244,234,.13);
        border-radius: 8px;
        background: rgba(248,244,234,.055);
      }

      .forge-trust-card h3 {
        margin: 0;
        font-size: 24px;
        letter-spacing: 0;
      }

      .forge-trust-card p {
        margin: 12px 0 0;
        color: rgba(248,244,234,.62);
        line-height: 1.52;
        font-size: 15px;
      }

      .forge-trust-card div {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 18px;
      }

      .forge-trust-card span {
        border: 1px solid rgba(248,244,234,.13);
        border-radius: 999px;
        padding: 5px 9px;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(248,244,234,.62);
      }

      .forge-final {
        padding: clamp(90px, 12vw, 170px) clamp(18px, 4vw, 56px);
        background: var(--paper);
        color: var(--ink-dark);
      }

      .forge-final-inner {
        width: min(1100px, 100%);
        margin: 0 auto;
        text-align: center;
      }

      .forge-final p {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        color: var(--muted-dark);
      }

      .forge-final-inner > div {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 30px;
      }

      .forge-footer {
        background: #07080a;
        color: var(--ink);
        border-top: 1px solid rgba(248,244,234,.10);
        padding: 64px 56px 30px;
      }

      .forge-footer-inner {
        max-width: 1240px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(220px, 320px) 1fr;
        gap: 56px;
        align-items: start;
      }

      .forge-footer-brand .forge-footer-mark {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-mono);
        font-size: 13px;
        letter-spacing: 0.08em;
        font-weight: 600;
      }

      .forge-footer-dot {
        width: 9px;
        height: 9px;
        border-radius: 9px;
        background: var(--accent);
        display: inline-block;
      }

      .forge-footer-tag {
        margin-top: 4px;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: var(--muted);
      }

      .forge-footer-blurb {
        margin: 14px 0 0;
        font-size: 13px;
        color: var(--muted);
        line-height: 1.55;
        max-width: 300px;
      }

      .forge-footer-cols {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
      }

      .forge-footer-col {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .forge-footer-col-head {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: rgba(248,244,234,.5);
        margin-bottom: 4px;
      }

      .forge-footer-col a {
        font-size: 13px;
        color: var(--muted);
        text-decoration: none;
        line-height: 1.55;
        transition: color .15s ease;
      }

      .forge-footer-col a:hover {
        color: var(--ink);
      }

      .forge-footer-bottom {
        max-width: 1240px;
        margin: 40px auto 0;
        padding-top: 20px;
        border-top: 1px solid rgba(248,244,234,.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(248,244,234,.42);
      }

      /* ============ MOTION LAYER — wave 1 ============ */

      /* Typewriter cycling word in hero H1 — pinned to its own line.
         The .forge-type-line wraps the entire third row (word + caret +
         period) and forces no-wrap so the row is always exactly one line.
         min-height locks the line's vertical space so even mid-deletion
         (empty word) the H1 doesn't collapse. */
      .forge-type-line {
        display: inline-flex;
        align-items: baseline;
        white-space: nowrap;
        max-width: 100%;
        min-height: 1em;
      }
      .forge-type-wrap {
        display: inline-flex;
        align-items: baseline;
        color: var(--accent);
      }
      .forge-type-word {
        font-style: italic;
        font-family: var(--font-serif);
        font-weight: 400;
        letter-spacing: -0.01em;
      }
      .forge-type-caret {
        margin-left: 2px;
        color: var(--accent);
        opacity: .7;
        font-weight: 400;
        font-family: var(--font-mono);
        font-size: .76em;
        line-height: 1;
        animation: forgeCaretBlink 1s steps(1) infinite;
      }
      .forge-type-period {
        color: inherit;
      }
      @keyframes forgeCaretBlink {
        0%, 50%   { opacity: .82; }
        50.01%, 100% { opacity: 0; }
      }

      /* CTA arrow slide-through — Revel pattern.
         Two arrows live in the same fixed-width mask. On hover the primary
         slides out the right, the ghost slides in from the left. */
      .forge-primary,
      .forge-secondary {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
      }
      .forge-btn-label { position: relative; z-index: 1; }
      .forge-btn-arrow {
        position: relative;
        display: inline-block;
        width: 14px;
        height: 14px;
        overflow: hidden;
      }
      .forge-btn-arrow-glyph {
        position: absolute;
        inset: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 14px;
        line-height: 1;
        transition: transform .42s cubic-bezier(.19, 1, .22, 1);
        will-change: transform;
      }
      .forge-btn-arrow-ghost { transform: translateX(-100%); }
      .forge-primary:hover .forge-btn-arrow-glyph,
      .forge-secondary:hover .forge-btn-arrow-glyph { transform: translateX(100%); }
      .forge-primary:hover .forge-btn-arrow-ghost,
      .forge-secondary:hover .forge-btn-arrow-ghost { transform: translateX(0); }

      /* CAD blueprint frame — hairlines draw on .is-visible.
         Top/left lines scaleX/scaleY from 0 -> 1 with 60ms intra-frame stagger,
         giving a "schematic finishing itself" feel. */
      .forge-frame {
        position: relative;
        isolation: isolate;
      }
      .forge-frame::before,
      .forge-frame::after {
        content: "";
        position: absolute;
        background: color-mix(in oklch, var(--accent) 70%, transparent);
        opacity: 0;
        transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity .35s ease;
        pointer-events: none;
        z-index: 0;
      }
      .forge-frame::before {
        top: -1px; left: -1px; right: -1px; height: 1.5px;
        transform: scaleX(0);
        transform-origin: left center;
      }
      .forge-frame::after {
        top: -1px; bottom: -1px; left: -1px; width: 1.5px;
        transform: scaleY(0);
        transform-origin: top center;
      }
      .forge-frame.is-visible::before { transform: scaleX(1); opacity: .85; transition-delay: 80ms; }
      .forge-frame.is-visible::after { transform: scaleY(1); opacity: .85; transition-delay: 0ms; }

      /* Count-up — keep stable width during animation so neighboring text
         doesn't reflow on every frame. */
      .forge-countup {
        font-variant-numeric: tabular-nums;
        display: inline-block;
      }

      /* Stagger on [data-reveal] cards. The CSS var --reveal-i gets set via
         inline style on each card; we translate that into animation-delay. */
      [data-reveal][style*="--reveal-i"] {
        transition-delay: calc(var(--reveal-i, 0) * 80ms);
      }

      /* Stripe underline trick — applied to footer links + nav ghost link.
         scaleX 0 -> 1 from left on hover; 1 -> 0 from right on leave. */
      .forge-footer-col a,
      .forge-ghost-link {
        position: relative;
        display: inline-block;
        padding-bottom: 2px;
      }
      .forge-footer-col a::after,
      .forge-ghost-link::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .32s cubic-bezier(.16,1,.3,1);
      }
      .forge-footer-col a:hover::after,
      .forge-ghost-link:hover::after {
        transform: scaleX(1);
        transform-origin: left center;
      }

      /* Hover lift on surface + trust cards — subtle elevation, brighter
         border, no scale to avoid jitter on tightly packed grids. */
      .forge-surface-card,
      .forge-trust-card {
        transition: transform .26s cubic-bezier(.16,1,.3,1),
                    border-color .26s ease,
                    background .26s ease;
      }
      .forge-surface-card:hover,
      .forge-trust-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in oklch, var(--accent) 35%, var(--line-dark));
      }

      /* ============ /MOTION LAYER ============ */

      [data-reveal] {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1);
      }

      [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      @keyframes forgePulse {
        0%, 100% { border-color: rgba(248,244,234,.16); background: rgba(248,244,234,.055); }
        45% { border-color: rgba(255,138,31,.72); background: rgba(255,138,31,.12); }
      }

      @media (prefers-reduced-motion: reduce) {
        .forge-lp,
        .forge-lp * {
          animation-duration: .01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: .01ms !important;
        }
      }

      @media (max-width: 1060px) {
        .forge-lp-header {
          grid-template-columns: 1fr auto;
        }
        .forge-lp-nav { display: none; }
        .forge-hero-inner,
        .forge-video-section,
        .forge-trust,
        .forge-proof-panel {
          grid-template-columns: 1fr;
        }
        .forge-hero-console {
          min-height: 360px;
        }
        .forge-proof-rail {
          grid-template-columns: 1fr 1fr;
        }
        .forge-proof-copy {
          grid-column: 1 / -1;
        }
        .forge-surface-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .forge-footer-inner {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .forge-footer-cols {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 720px) {
        .forge-lp-header {
          height: auto;
          min-height: 58px;
          padding: 10px 16px;
        }
        .forge-brand-copy span,
        .forge-ghost-link {
          display: none;
        }
        .forge-hero {
          padding: 70px 16px 18px;
          min-height: auto;
        }
        .forge-hero-inner {
          gap: 26px;
        }
        .forge-hero-copy h1 {
          font-size: clamp(44px, 13vw, 64px);
          line-height: .92;
        }
        .forge-hero-copy p {
          font-size: 17px;
        }
        .forge-hero-console {
          min-height: 0;
        }
        .forge-console-grid {
          padding: 18px 22px 0;
        }
        .forge-console-stat {
          padding: 16px 0;
        }
        .forge-console-stat strong {
          font-size: 28px;
        }
        .forge-console-flow {
          position: relative;
          left: auto;
          right: auto;
          bottom: auto;
          grid-template-columns: repeat(2, 1fr);
          margin: 12px 22px 22px;
        }
        .forge-proof-rail,
        .forge-surface-grid {
          grid-template-columns: 1fr;
        }
        .forge-section {
          padding: 74px 16px;
        }
        .forge-surface-card {
          min-height: 260px;
        }
        .forge-proof-panel {
          padding: 26px;
        }
        .forge-footer {
          padding: 48px 18px 26px;
        }
        .forge-footer-cols {
          grid-template-columns: 1fr;
          gap: 28px;
        }
      }
    `}</style>
  );
}

Object.assign(window, { ScreenLanding });