npm - agent-devkit - Versions diffs - 0.0.1 - Mend

agent-devkit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4610) hide show

package/runtime/vendor/plugins/open-design/_official/examples/aerocore/open-design.json ADDED Viewed

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-aerocore",
+  "title": "AeroCore — Cinematic Aerospace Engine Landing",
+  "title_i18n": {
+    "zh-CN": "AeroCore — 航天发动机电影感着陆页",
+    "zh-TW": "AeroCore — 航太發動機電影感著陸頁",
+    "ja": "AeroCore — シネマティックな航空宇宙エンジンのランディング",
+    "ko": "AeroCore — 시네마틱 항공우주 엔진 랜딩",
+    "de": "AeroCore — Cineastische Aerospace-Triebwerk-Landingpage",
+    "fr": "AeroCore — Page de destination cinématographique pour moteur aérospatial",
+    "ru": "AeroCore — кинематографичная посадочная страница аэрокосмического двигателя",
+    "es": "AeroCore — Página de destino cinematográfica de motores aeroespaciales",
+    "pt-BR": "AeroCore — Landing page cinematográfica de motores aeroespaciais",
+    "it": "AeroCore — Landing page cinematografica per motori aerospaziali",
+    "vi": "AeroCore — Trang đích điện ảnh cho động cơ hàng không vũ trụ",
+    "pl": "AeroCore — Filmowa strona docelowa silnika lotniczo-kosmicznego",
+    "id": "AeroCore — Halaman Arahan Sinematik Mesin Antariksa",
+    "nl": "AeroCore — Cinematische landingspagina voor ruimtevaartmotoren",
+    "ar": "AeroCore — صفحة هبوط سينمائية لمحركات الفضاء الجوي",
+    "tr": "AeroCore — Sinematik Havacılık-Uzay Motoru Açılış Sayfası",
+    "uk": "AeroCore — кінематографічна посадкова сторінка аерокосмічного двигуна",
+    "en": "AeroCore — Cinematic Aerospace Engine Landing"
+  },
+  "version": "0.1.0",
+  "description": "Premium scroll-cinematic aerospace propulsion marketing site: a blue-to-warm-white gradient hero with parallax wordmark and engine still, a mission thumbnail that grows into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart, a horizontal video-story rail, and a starfield footer.",
+  "description_i18n": {
+    "zh-CN": "高端电影感航天动力营销站：蓝转暖白渐变 Hero（视差大字 + 发动机静帧）、由缩略图放大为全屏粘性视频的展示、固定标签页 showcase、含循环视频卡与工具跑马灯的 bento 能力网格、深色动画数据图、横向视频故事轨与星点页脚。",
+    "zh-TW": "高端電影感航太動力行銷站：藍轉暖白漸層 Hero（視差大字 + 發動機靜幀）、由縮圖放大為全螢幕黏性影片的展示、固定標籤頁 showcase、含循環影片卡與工具跑馬燈的 bento 能力網格、深色動畫數據圖、橫向影片故事軌與星點頁尾。",
+    "ja": "プレミアムでスクロール連動のシネマティックな航空宇宙推進マーケティングサイト：パララックスのワードマークとエンジンの静止画を備えた青から暖白へのグラデーションヒーロー、サムネイルが全画面の固定動画へと拡大するミッション演出、固定タブの showcase、ループ動画カードとツールマーキーを備えた bento 機能グリッド、アニメーション付きのダークな統計チャート、横スクロールの動画ストーリーレール、そして星空のフッター。",
+    "ko": "프리미엄 스크롤 시네마틱 항공우주 추진 마케팅 사이트: 패럴랙스 워드마크와 엔진 정지 이미지를 갖춘 파랑에서 따뜻한 흰색으로의 그라데이션 히어로, 썸네일이 전체 화면 고정 영상으로 확대되는 미션 연출, 고정 탭 쇼케이스, 반복 영상 카드와 도구 마키가 있는 벤토 역량 그리드, 애니메이션 다크 통계 차트, 가로형 영상 스토리 레일, 그리고 별이 흩뿌려진 푸터.",
+    "de": "Hochwertige scroll-cineastische Marketing-Site für Aerospace-Antriebe: ein Hero mit Verlauf von Blau zu warmem Weiß mit Parallax-Wortmarke und Triebwerks-Standbild, ein Missions-Thumbnail, das zu einem bildschirmfüllenden Sticky-Video heranwächst, ein fixiertes Tab-Showcase, ein Bento-Fähigkeitenraster mit Loop-Videokarten und einer Werkzeug-Marquee, ein animiertes dunkles Statistik-Diagramm, ein horizontales Video-Story-Rail und ein Sternenfeld-Footer.",
+    "fr": "Site marketing premium, cinématographique et piloté par le défilement, dédié à la propulsion aérospatiale : un hero en dégradé du bleu au blanc chaud avec un wordmark en parallaxe et une image fixe de moteur, une vignette de mission qui s'agrandit en une vidéo sticky plein écran, une vitrine à onglets épinglée, une grille de capacités bento avec des cartes vidéo en boucle et un marquee d'outils, un graphique de statistiques sombre animé, un rail d'histoires vidéo horizontal et un pied de page en champ d'étoiles.",
+    "ru": "Премиальный кинематографичный маркетинговый сайт об аэрокосмических двигателях с прокруткой: герой с градиентом от синего к тёплому белому, параллакс-логотипом и стоп-кадром двигателя, миниатюра миссии, разрастающаяся в полноэкранное закреплённое видео, закреплённая витрина с вкладками, bento-сетка возможностей с зацикленными видеокарточками и бегущей строкой инструментов, анимированная тёмная диаграмма статистики, горизонтальная лента видеоисторий и футер со звёздным полем.",
+    "es": "Sitio de marketing premium, cinematográfico e impulsado por el scroll para propulsión aeroespacial: un hero con degradado de azul a blanco cálido con wordmark en parallax e imagen fija del motor, una miniatura de misión que crece hasta un vídeo sticky a pantalla completa, un escaparate con pestañas fijado, una cuadrícula de capacidades bento con tarjetas de vídeo en bucle y un marquee de herramientas, un gráfico de estadísticas oscuro animado, un carril horizontal de historias en vídeo y un pie de página de campo de estrellas.",
+    "pt-BR": "Site de marketing premium, cinematográfico e movido por rolagem para propulsão aeroespacial: um hero com gradiente de azul a branco quente com wordmark em parallax e still do motor, uma miniatura de missão que cresce em um vídeo sticky em tela cheia, uma vitrine com abas fixada, uma grade de capacidades bento com cards de vídeo em loop e um marquee de ferramentas, um gráfico de estatísticas escuro animado, um trilho horizontal de histórias em vídeo e um rodapé de campo de estrelas.",
+    "it": "Sito di marketing premium, cinematografico e guidato dallo scroll per la propulsione aerospaziale: un hero con gradiente dal blu al bianco caldo con wordmark in parallasse e fermo immagine del motore, una miniatura di missione che cresce fino a un video sticky a tutto schermo, una vetrina a schede ancorata, una griglia di capacità bento con card video in loop e un marquee di strumenti, un grafico di statistiche scuro animato, un binario orizzontale di video-storie e un footer a campo stellato.",
+    "vi": "Trang marketing động cơ hàng không vũ trụ cao cấp, điện ảnh và điều khiển theo cuộn: hero gradient từ xanh sang trắng ấm với wordmark parallax và ảnh tĩnh động cơ, hình thu nhỏ nhiệm vụ phóng to thành video sticky toàn màn hình, showcase dạng tab được ghim, lưới năng lực bento với thẻ video lặp và marquee công cụ, biểu đồ thống kê tối có hoạt ảnh, dải câu chuyện video nằm ngang và footer trường sao.",
+    "pl": "Premium, filmowa i sterowana przewijaniem strona marketingowa napędu lotniczo-kosmicznego: hero z gradientem od niebieskiego do ciepłej bieli z paralaksowym wordmarkiem i kadrem silnika, miniatura misji rozrastająca się w pełnoekranowe przyklejone wideo, przypięta witryna z zakładkami, siatka możliwości bento z zapętlonymi kartami wideo i marquee narzędzi, animowany ciemny wykres statystyk, poziomy tor historii wideo oraz stopka z polem gwiazd.",
+    "id": "Situs pemasaran propulsi antariksa premium yang sinematik dan digerakkan oleh scroll: hero gradien dari biru ke putih hangat dengan wordmark parallax dan still mesin, thumbnail misi yang membesar menjadi video sticky layar penuh, showcase bertab yang dipasang tetap, kisi kemampuan bento dengan kartu video berulang dan marquee perkakas, grafik statistik gelap beranimasi, rel cerita video horizontal, dan footer ladang bintang.",
+    "nl": "Premium scroll-cinematische marketingsite voor ruimtevaartaandrijving: een hero met verloop van blauw naar warm wit met parallax-woordmerk en motorstilstand, een missie-thumbnail die uitgroeit tot een schermvullende sticky video, een vastgezette getabde showcase, een bento-vaardighedenraster met loopende videokaarten en een gereedschaps-marquee, een geanimeerde donkere statistiekgrafiek, een horizontale video-verhaalrail en een sterrenveld-footer.",
+    "ar": "موقع تسويقي فاخر سينمائي يتحرك بالتمرير لأنظمة الدفع في الفضاء الجوي: قسم بطل بتدرّج من الأزرق إلى الأبيض الدافئ مع علامة نصية بتأثير parallax وصورة ثابتة للمحرك، وصورة مصغّرة لمهمة تتوسّع إلى فيديو ثابت بملء الشاشة، ومعرض تبويبات مثبّت، وشبكة قدرات bento ببطاقات فيديو متكرّرة وشريط أدوات متحرك، ومخطّط إحصاءات داكن متحرّك، ومسار قصص فيديو أفقي، وتذييل بحقل نجوم.",
+    "tr": "Premium, kaydırmayla ilerleyen sinematik havacılık-uzay itki pazarlama sitesi: paralaks logo ve motor durağan görseliyle maviden sıcak beyaza geçen gradyan hero, tam ekran yapışkan videoya büyüyen bir görev küçük resmi, sabitlenmiş sekmeli vitrin, döngülü video kartları ve araç marquee'si içeren bento yetenek ızgarası, animasyonlu koyu istatistik grafiği, yatay video-hikâye rayı ve yıldız alanı altbilgisi.",
+    "uk": "Преміальний кінематографічний маркетинговий сайт про аерокосмічні двигуни, керований прокруткою: герой із градієнтом від синього до теплого білого з паралакс-логотипом і стоп-кадром двигуна, мініатюра місії, що розростається до повноекранного закріпленого відео, закріплена вітрина з вкладками, bento-сітка можливостей із зацикленими відеокартками та стрічкою інструментів, анімована темна діаграма статистики, горизонтальна стрічка відеоісторій і футер зі зоряним полем.",
+    "en": "Premium scroll-cinematic aerospace propulsion marketing site: a blue-to-warm-white gradient hero with parallax wordmark and engine still, a mission thumbnail that grows into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart, a horizontal video-story rail, and a starfield footer."
+  },
+  "license": "CC-BY-4.0",
+  "author": {
+    "name": "Eli"
+  },
+  "homepage": "https://motionsites.ai/sections",
+  "tags": [
+    "example",
+    "first-party",
+    "prototype",
+    "design",
+    "web",
+    "desktop",
+    "aerospace",
+    "landing-page",
+    "scroll-animation",
+    "cinematic"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "prototype",
+    "platform": "desktop",
+    "scenario": "design",
+    "surface": "web",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta\n      name=\"description\"\n      content=\"EngineTech designs and manufactures custom propulsion systems for aerospace programs.\"\n    />\n    <title>EngineTech | Custom Aerospace Engines</title>\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css\" />\n    <style>\n:root {\n  color-scheme: light;\n  --font-sans: \"Geist\", \"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --geist-background: #ffffff;\n  --geist-foreground: #0a0a0a;\n  --geist-muted: #666666;\n  --hero-blue: #7191d0;\n  --hero-blue-soft: #aab8d5;\n  --hero-cloud: #ece9e6;\n  --hero-bg-bottom: linear-gradient(180deg, var(--hero-blue) 0%, var(--hero-blue-soft) 55%, var(--hero-cloud) 100%);\n  --hero-bg-top: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.12));\n  --hero-max-width: 1820px;\n}\n\n- {\nbox-sizing: border-box;\n}\n\nhtml,\nbody {\n  min-height: 100%;\n}\n\nbody {\n  margin: 0;\n  background: var(--geist-background);\n  color: var(--geist-foreground);\n  font-family: var(--font-sans);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: geometricPrecision;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n.mission {\n  position: relative;\n  z-index: 40;\n  min-height: 100vh;\n  margin-top: -12vh;\n  background: #ffffff;\n  color: #161616;\n}\n\n.mission__inner {\n  display: grid;\n  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 2fr);\n  grid-template-rows: auto minmax(360px, 1fr);\n  column-gap: clamp(56px, 8vw, 170px);\n  row-gap: clamp(76px, 5vw, 104px);\n  width: min(100% - 96px, var(--hero-max-width));\n  min-height: 100vh;\n  margin: 0 auto;\n  padding: clamp(34px, 3vw, 54px) 0 clamp(32px, 4vw, 62px);\n}\n\n.mission__eyebrow {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: start;\n  margin: 0;\n  color: #202020;\n  font-size: clamp(13px, 0.9vw, 16.8px);\n  font-weight: 700;\n  line-height: 1.22;\n  letter-spacing: 0;\n}\n\n.mission__statement {\n  grid-column: 2;\n  grid-row: 1;\n  align-self: start;\n  max-width: 1180px;\n}\n\n.mission__statement h2 {\n  margin: 0;\n  color: #141414;\n  font-size: clamp(29px, 1.95vw, 41.3px);\n  font-weight: 260;\n  line-height: 1.18;\n  letter-spacing: 0;\n}\n\n.mission__button {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: clamp(46px, 3.3vw, 72px);\n  color: #171717;\n  font-size: clamp(13.8px, 1vw, 18.3px);\n  font-weight: 700;\n  line-height: 1;\n}\n\n.mission__button span:last-child {\n  display: inline-flex;\n  align-items: center;\n  min-height: clamp(58px, 3.65vw, 72px);\n  padding: 0 clamp(18px, 1.35vw, 26px);\n  border: 1px solid #c6c6c6;\n  border-radius: 5px;\n  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.04);\n}\n\n.mission__button-icon {\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  width: clamp(58px, 3.65vw, 72px);\n  aspect-ratio: 1;\n  border-radius: 5px;\n  background: #d8e8ff;\n  transition:\n    background 180ms ease,\n    transform 180ms ease;\n}\n\n.mission__button-icon .ph {\n  font-size: clamp(22px, 1.5vw, 28px);\n  color: currentColor;\n  display: block;\n}\n\n.mission__button:hover .mission__button-icon {\n  background: #c7dcfb;\n  transform: translate(2px, 2px);\n}\n\n.mission__support {\n  grid-column: 1;\n  grid-row: 2;\n  align-self: start;\n  max-width: 520px;\n  margin: 0;\n  color: #5f5f5f;\n  font-size: clamp(23.7px, 1.56vw, 30.6px);\n  font-weight: 370;\n  line-height: 1.18;\n  letter-spacing: 0;\n}\n\n.mission__media {\n  grid-column: 2;\n  grid-row: 2;\n  align-self: start;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  background: transparent;\n}\n\n.hero {\n  position: relative;\n  height: 180vh;\n  min-height: 1238px;\n  overflow: clip;\n  background: var(--hero-blue);\n}\n\n.hero__background {\n  position: sticky;\n  top: 0;\n  z-index: 0;\n  height: 100vh;\n  overflow: hidden;\n  background:\n    linear-gradient(\n      180deg,\n      var(--hero-top, #7191d0) 0%,\n      var(--hero-mid, #aab8d5) 55%,\n      var(--hero-bottom, #ece9e6) 100%\n    );\n}\n\n.hero__bg-layer {\n  position: absolute;\n  inset: 0;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: none;\n}\n\n.hero__bg-layer--bottom {\n  background:\n    radial-gradient(circle at 52% 26%, rgb(255 255 255 / 0.22), transparent 35%),\n    linear-gradient(180deg, rgb(70 100 170 / 0.14), rgb(255 255 255 / 0));\n}\n\n.hero__bg-layer--top {\n  z-index: 1;\n  background: var(--hero-bg-top);\n  mix-blend-mode: screen;\n}\n\n.hero__stars {\n  position: absolute;\n  inset: 0 0 auto;\n  z-index: 2;\n  height: 210px;\n  pointer-events: none;\n  background-image:\n    radial-gradient(circle, rgb(255 255 255 / 0.78) 0 1px, transparent 1.8px),\n    radial-gradient(circle, rgb(255 255 255 / 0.58) 0 1px, transparent 1.6px),\n    radial-gradient(circle, rgb(255 255 255 / 0.68) 0 1px, transparent 1.7px);\n  background-position:\n    10% 24%,\n    38% 16%,\n    76% 32%;\n  background-size:\n    180px 94px,\n    260px 120px,\n    340px 150px;\n  opacity: 0.45;\n  animation: hero-stars-twinkle 4.8s ease-in-out infinite alternate;\n}\n\n@keyframes hero-stars-twinkle {\n  0% { opacity: 0.18; filter: brightness(0.92); }\n  50% { opacity: 0.58; filter: brightness(1.12); }\n  100% { opacity: 0.34; filter: brightness(1); }\n}\n\n.hero__nav {\n  position: fixed;\n  top: 0;\n  left: 50%;\n  z-index: 100;\n  display: grid;\n  grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 1fr);\n  align-items: center;\n  gap: 32px;\n  width: min(100% - 96px, var(--hero-max-width));\n  margin: 0;\n  padding: 27px 16px 16px;\n  color: #ffffff;\n  transform: translate3d(-50%, 0, 0);\n  transition:\n    background-color 300ms ease,\n    color 300ms ease,\n    transform 300ms ease,\n    box-shadow 300ms ease,\n    border-color 300ms ease,\n    padding 300ms ease,\n    top 300ms ease;\n  border: 1px solid transparent;\n  border-radius: 0;\n}\n\n.hero__nav.nav--scroll-down {\n  transform: translate3d(-50%, 16px, 0);\n  background-color: rgba(255, 255, 255, 0.88);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  color: #111111;\n  padding: 14px 24px;\n  border-radius: 40px;\n  border-color: rgba(0, 0, 0, 0.08);\n  box-shadow:\n    0 12px 30px -10px rgba(0, 0, 0, 0.08),\n    0 4px 12px -5px rgba(0, 0, 0, 0.03);\n}\n\n.hero__nav.nav--scroll-down .brand__name { color: #111111; }\n.hero__nav.nav--scroll-down .brand__mark { background: #111111; }\n.hero__nav.nav--scroll-down .hero__links { color: rgba(17, 17, 17, 0.8); }\n.hero__nav.nav--scroll-down .hero__links a { color: inherit; }\n.hero__nav.nav--scroll-down .hero__links a:hover { color: #111111; }\n.hero__nav.nav--scroll-down .hero__cta { background: #111111; color: #ffffff; box-shadow: none; }\n\n.hero__nav.nav--scroll-up {\n  transform: translate3d(-50%, -100px, 0);\n  pointer-events: none;\n}\n\n.brand {\n  display: inline-flex;\n  align-items: center;\n  justify-self: start;\n  gap: 7px;\n  min-width: 0;\n}\n\n.brand__mark {\n  position: relative;\n  display: grid;\n  place-items: center;\n  width: 29px;\n  aspect-ratio: 1;\n  overflow: hidden;\n  border-radius: 50%;\n  background: #ffffff;\n  transition: background-color 300ms ease;\n}\n\n.brand__mark::before {\n  content: \"\";\n  position: absolute;\n  inset: -8px;\n  background: var(--hero-blue);\n  clip-path: polygon(0 20%, 100% 8%, 100% 19%, 0 31%, 0 43%, 100% 31%, 100% 42%, 0 54%, 0 66%, 100% 54%, 100% 65%, 0 77%);\n}\n\n.brand__mark span { display: none; }\n\n.brand__name {\n  color: #ffffff;\n  font-size: 24px;\n  font-weight: 560;\n  line-height: 1;\n  letter-spacing: 0;\n  transition: color 300ms ease;\n}\n\n.hero__links {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: clamp(22px, 2.55vw, 44px);\n  color: rgb(255 255 255 / 0.9);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  white-space: nowrap;\n  transition: color 300ms ease;\n}\n\n.hero__links a { transition: color 160ms ease; }\n.hero__links a:hover { color: #ffffff; }\n\n.hero__cta {\n  justify-self: end;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 122px;\n  min-height: 46px;\n  padding: 0 17px;\n  border-radius: 6px;\n  background: rgb(233 240 255 / 0.9);\n  color: #111111;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.42);\n  transition:\n    background 160ms ease,\n    transform 160ms ease,\n    color 160ms ease;\n}\n\n.hero__cta:hover { background: #ffffff; transform: translateY(-1px); }\n\n.hero__content {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  display: grid;\n  place-items: center;\n  height: 100vh;\n  width: min(100%, var(--hero-max-width));\n  margin: 0 auto;\n  pointer-events: none;\n}\n\n.hero__title {\n  position: fixed;\n  top: calc(50% - 56px - clamp(82px, 8vw, 126px));\n  left: 4%;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0;\n  width: 96vw;\n  color: #ffffff;\n  font-weight: 200;\n  letter-spacing: 0;\n  line-height: 0.88;\n  pointer-events: none;\n  transform: translate3d(0, var(--scroll-y, 0px), 0);\n  will-change: transform, opacity;\n}\n\n.hero__title-line {\n  display: block;\n  font-size: clamp(144px, 18vw, 285px);\n  white-space: nowrap;\n}\n\n.hero__title-line--one { position: relative; z-index: 10; }\n\n.hero__title-row {\n  position: fixed;\n  top: calc(50% - 56px + clamp(50px, 4.5vw, 90px));\n  left: 4%;\n  z-index: 2;\n  display: flex;\n  align-items: baseline;\n  gap: clamp(112px, 12vw, 224px);\n  color: #ffffff;\n  font-weight: 200;\n  pointer-events: none;\n  transform: translate3d(15vw, var(--scroll-y, 0px), 0);\n  will-change: transform, opacity;\n}\n\n.hero__title-line--two,\n.hero__title-line--three { position: relative; }\n.hero__title-line--three { transform: translateX(112px); }\n\n.engine-visual {\n  position: fixed;\n  z-index: 3;\n  left: 50%;\n  top: -15px;\n  width: auto;\n  height: calc((100% + 15px) * 1.4);\n  max-width: calc(100vw - 96px);\n  max-height: 1023px;\n  aspect-ratio: 2 / 3;\n  transform: translate3d(-50%, var(--scroll-y, 0px), 0);\n  will-change: transform, opacity;\n  filter: drop-shadow(0 28px 34px rgb(26 31 42 / 0.22));\n}\n\n.engine-visual__asset {\n  display: block;\n  width: auto;\n  height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: center bottom;\n}\n\n.hero__caption {\n  position: fixed;\n  z-index: 4;\n  left: clamp(24px, 3.85vw, 78px);\n  bottom: 28px;\n  display: inline-flex;\n  align-items: center;\n  gap: 24px;\n  max-width: min(170px, calc(50vw - 112px));\n  margin: 0;\n  color: rgb(42 42 42 / 0.58);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22px;\n  letter-spacing: 0;\n  transform: translate3d(0, var(--scroll-y, 0px), 0);\n  will-change: transform, opacity;\n}\n\n.hero__caption::before {\n  content: \"\";\n  display: block;\n  width: 1px;\n  height: 44px;\n  background: rgb(42 42 42 / 0.32);\n}\n\n.hero.is-past .hero__title,\n.hero.is-past .hero__title-row,\n.hero.is-past .hero__caption,\n.hero.is-past .engine-visual {\n  opacity: 0;\n  pointer-events: none;\n}\n\n@media (max-width: 1180px) {\n  .mission__inner {\n    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.7fr);\n    column-gap: clamp(36px, 5vw, 72px);\n    width: min(100% - 48px, var(--hero-max-width));\n  }\n  .mission__statement h2 { font-size: clamp(26px, 3.37vw, 38.2px); }\n  .mission__support { font-size: clamp(20.6px, 2.3vw, 26px); }\n  .hero__nav {\n    grid-template-columns: auto 1fr auto;\n    width: min(100% - 48px, var(--hero-max-width));\n  }\n  .hero__links { gap: 20px; font-size: 14px; }\n  .brand__name { font-size: 22px; }\n  .hero__cta { min-width: 122px; min-height: 46px; font-size: 14px; }\n}\n\n@media (max-width: 860px) {\n  .mission { margin-top: -8vh; }\n  .mission__inner {\n    display: flex;\n    flex-direction: column;\n    gap: 44px;\n    width: min(100% - 48px, var(--hero-max-width));\n    min-height: auto;\n    padding: 34px 0 40px;\n  }\n  .mission__statement { max-width: none; }\n  .mission__statement h2 { font-size: clamp(26px, 7.65vw, 39.8px); line-height: 1.1; }\n  .mission__button { margin-top: 34px; font-size: 13.8px; }\n  .mission__button-icon { width: 56px; }\n  .mission__support { max-width: 640px; margin: 52px 0 0; font-size: clamp(19.9px, 5.35vw, 26px); }\n  .mission__media { margin-top: 8px; }\n  .hero { height: 180vh; min-height: 1238px; }\n  .hero__nav { grid-template-columns: 1fr auto; padding-top: 22px; }\n  .hero__links { display: none; }\n  .hero__content { height: 100vh; }\n  .hero__title-line { font-size: clamp(102px, 31.5vw, 192px); }\n  .hero__title { top: calc(50% - 56px - clamp(58px, 14vw, 90px)); left: 5%; }\n  .hero__title-row { top: calc(50% - 56px + clamp(32px, 9vw, 63px)); left: 5%; transform: translate3d(10vw, var(--scroll-y, 0px), 0); }\n  .engine-visual { top: -19px; height: calc((100% + 19px) * 1.4); max-height: 868px; }\n  .hero__caption { right: 24px; bottom: 24px; max-width: min(170px, calc(100vw - 48px)); font-size: 16px; line-height: 22px; }\n}\n\n@media (max-width: 560px) {\n  .mission__inner { width: min(100% - 32px, var(--hero-max-width)); }\n  .mission__eyebrow { max-width: 240px; font-size: 12.2px; }\n  .mission__statement h2 { font-size: clamp(23.7px, 7.19vw, 32.1px); }\n  .mission__support { font-size: clamp(18.3px, 5.97vw, 23.7px); }\n  .mission__media { aspect-ratio: 4 / 3; }\n  .hero__nav { width: min(100% - 32px, var(--hero-max-width)); gap: 16px; }\n  .brand__mark { width: 24px; }\n  .brand__name { font-size: 17px; }\n  .hero__cta { min-width: auto; min-height: 38px; padding: 0 12px; font-size: 13px; }\n  .hero__title-line { font-size: clamp(111px, 38.4vw, 185px); }\n  .hero__title-row { gap: clamp(72px, 20vw, 128px); transform: translate3d(10vw, var(--scroll-y, 0px), 0); }\n  .hero__caption { display: none; }\n}\n\n.showcase-film {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  z-index: 45;\n  overflow: hidden;\n  background: #d7dde4;\n  opacity: 0;\n  pointer-events: none;\n  will-change: top, left, width, height, border-radius, opacity;\n}\n\n.showcase-film__video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.showcase-film__overlay {\n  position: absolute;\n  inset: 0;\n  background: #000;\n  pointer-events: none;\n}\n\n.showcase {\n  position: relative;\n  z-index: 50;\n  height: 600vh;\n}\n\n.showcase__sticky {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  background: transparent;\n  overflow: visible;\n}\n\n.showcase__ui {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: end;\n  padding: clamp(32px, 4vw, 72px) clamp(32px, 4.5vw, 80px);\n  pointer-events: none;\n  will-change: opacity;\n}\n\n.showcase__panels {\n  grid-column: 1;\n  position: relative;\n  min-height: clamp(200px, 30vh, 400px);\n  max-width: 640px;\n}\n\n.showcase__panel {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transform: translateY(16px);\n  transition:\n    opacity 460ms cubic-bezier(0.4, 0, 0.2, 1),\n    transform 460ms cubic-bezier(0.4, 0, 0.2, 1);\n  pointer-events: none;\n}\n\n.showcase__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }\n\n.showcase__panel-num {\n  display: block;\n  margin: 0 0 clamp(12px, 1.1vw, 22px);\n  color: rgb(255 255 255 / 0.42);\n  font-size: clamp(11px, 0.78vw, 14px);\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.showcase__panel-title {\n  margin: 0 0 clamp(14px, 1.3vw, 26px);\n  color: #ffffff;\n  font-size: clamp(38px, 4.4vw, 80px);\n  font-weight: 200;\n  line-height: 1.07;\n  letter-spacing: -0.022em;\n}\n\n.showcase__panel-desc {\n  max-width: 490px;\n  margin: 0;\n  color: rgb(255 255 255 / 0.58);\n  font-size: clamp(14px, 1.05vw, 18px);\n  font-weight: 400;\n  line-height: 1.6;\n}\n\n.showcase__tabs-nav {\n  grid-column: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: clamp(10px, 0.9vw, 20px);\n  padding-left: clamp(36px, 5vw, 120px);\n  pointer-events: auto;\n}\n\n.showcase__tab {\n  display: flex;\n  align-items: center;\n  gap: clamp(8px, 0.7vw, 14px);\n  color: rgb(255 255 255 / 0.28);\n  font-size: clamp(12px, 0.82vw, 15px);\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n  transition: color 320ms ease;\n}\n\n.showcase__tab.is-active { color: #ffffff; }\n\n.showcase__tab-bar {\n  display: block;\n  flex-shrink: 0;\n  width: 1px;\n  height: 14px;\n  background: currentColor;\n  opacity: 0;\n  transition: opacity 320ms ease;\n}\n\n.showcase__tab.is-active .showcase__tab-bar { opacity: 1; }\n.showcase__tab-name { transition: color 320ms ease; }\n\n.showcase__tab-num {\n  font-weight: 600;\n  font-size: clamp(11px, 0.72vw, 13px);\n  color: rgb(255 255 255 / 0.38);\n  transition: color 320ms ease;\n}\n\n.showcase__tab.is-active .showcase__tab-num { color: rgb(255 255 255 / 0.65); }\n\n@media (max-width: 860px) {\n  .showcase__ui { grid-template-columns: 1fr; }\n  .showcase__tabs-nav { display: none; }\n  .showcase__panel-title { font-size: clamp(30px, 8vw, 54px); }\n}\n\n@media (max-width: 560px) {\n  .showcase__ui { padding: 28px 24px; }\n  .showcase__panel-title { font-size: clamp(26px, 9vw, 42px); }\n  .showcase__panel-desc { font-size: 14px; }\n}\n\n.capabilities {\n  position: relative;\n  z-index: 70;\n  min-height: 100vh;\n  padding: clamp(34px, 4vw, 72px) clamp(16px, 3.8vw, 72px);\n  background: #f7f8f8;\n  color: #111111;\n}\n\n.capabilities__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 32px;\n  max-width: var(--hero-max-width);\n  margin: 0 auto clamp(24px, 3vw, 42px);\n}\n\n.capabilities__intro { max-width: 860px; }\n\n.capabilities__intro h2 {\n  max-width: 920px;\n  margin: 0;\n  color: #111111;\n  font-size: clamp(29px, 3.2vw, 54px);\n  font-weight: 300;\n  letter-spacing: 0;\n  line-height: 1.08;\n}\n\n.capabilities__intro p {\n  max-width: 760px;\n  margin: 18px 0 0;\n  color: #677070;\n  font-size: clamp(14px, 1vw, 17px);\n  font-weight: 400;\n  line-height: 1.62;\n}\n\n.capabilities__button {\n  flex: 0 0 auto;\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 0 20px;\n  border: 1px solid rgb(17 17 17 / 0.1);\n  border-radius: 999px;\n  background: rgb(255 255 255 / 0.78);\n  color: #111111;\n  font-size: 14px;\n  font-weight: 700;\n  box-shadow:\n    inset 0 1px 0 rgb(255 255 255 / 0.95),\n    0 18px 44px rgb(31 44 44 / 0.08);\n}\n\n.capabilities__button .ph { font-size: 18px; }\n\n.capabilities__grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n  gap: clamp(14px, 1.25vw, 22px);\n  max-width: var(--hero-max-width);\n  min-height: clamp(620px, 72vh, 780px);\n  margin: 0 auto;\n}\n\n.capabilities__stack {\n  display: grid;\n  grid-template-rows: minmax(210px, 0.74fr) minmax(270px, 1fr);\n  gap: clamp(14px, 1.25vw, 22px);\n  min-width: 0;\n}\n\n.capabilities__stack--systems { grid-template-rows: minmax(420px, 1.45fr) auto; }\n\n.cap-card {\n  position: relative;\n  overflow: hidden;\n  border: 1px solid rgb(18 35 35 / 0.09);\n  border-radius: 18px;\n  background: #ffffff;\n  box-shadow: 0 22px 60px rgb(21 34 34 / 0.08);\n}\n\n.cap-card--tall, .cap-card--metric, .cap-card--tools { min-height: 0; }\n.cap-card--media, .cap-card--metric { color: #ffffff; background: #dce3e3; }\n\n.cap-card__video {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  transform: scale(1.02);\n}\n\n.cap-card__shade {\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(180deg, rgb(5 12 14 / 0.3), transparent 34%),\n    linear-gradient(0deg, rgb(5 12 14 / 0.78), transparent 48%);\n}\n\n.cap-card__light {\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(135deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.34)),\n    linear-gradient(0deg, rgb(247 248 248 / 0.36), transparent 62%);\n}\n\n.cap-card__label {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  color: rgb(255 255 255 / 0.78);\n  font-size: 11px;\n  font-weight: 760;\n  letter-spacing: 0.18em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.cap-card__label--left { justify-content: flex-start; padding: 0; color: #758080; }\n\n.cap-card__timeline {\n  position: absolute;\n  z-index: 1;\n  right: 20px;\n  bottom: 20px;\n  left: 20px;\n  display: grid;\n  gap: 12px;\n}\n\n.cap-card__timeline div {\n  display: grid;\n  grid-template-columns: 58px 16px minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 10px;\n  color: rgb(255 255 255 / 0.76);\n  font-size: 12px;\n  line-height: 1.2;\n}\n\n.cap-card__timeline b { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / 0.62); }\n.cap-card__timeline strong { min-width: 0; color: #ffffff; font-size: clamp(13px, 0.95vw, 15px); font-weight: 650; }\n.cap-card__timeline em { color: rgb(255 255 255 / 0.58); font-style: normal; white-space: nowrap; }\n\n.cap-card--quote,\n.cap-card--contact {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 24px;\n  background:\n    linear-gradient(135deg, rgb(255 255 255 / 0.72), rgb(238 244 244 / 0.86)),\n    #edf2f2;\n}\n\n.cap-card--video-panel > :not(.cap-card__video, .cap-card__light, .cap-card__shade) { position: relative; z-index: 1; }\n\n.cap-card--quote blockquote { margin: clamp(22px, 2.4vw, 34px) 0 20px; color: #263030; font-size: clamp(15px, 1vw, 18px); line-height: 1.62; }\n.cap-card--quote p, .cap-card--contact p { margin: 0; color: #6b7676; font-size: 14px; line-height: 1.5; }\n.cap-card--quote strong { display: block; color: #111111; font-size: 15px; }\n\n.cap-card--metric { display: block; min-height: 320px; }\n\n.cap-card__metric {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  text-shadow: 0 12px 32px rgb(0 0 0 / 0.3);\n}\n\n.cap-card__metric strong {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: clamp(82px, 7.4vw, 134px);\n  font-weight: 220;\n  letter-spacing: 0;\n  line-height: 0.9;\n  transform: translate(-50%, -50%);\n}\n\n.cap-card__metric span {\n  position: absolute;\n  right: 24px;\n  bottom: 24px;\n  left: 24px;\n  color: rgb(255 255 255 / 0.82);\n  font-size: clamp(14px, 1.05vw, 18px);\n  line-height: 1.4;\n}\n\n.cap-card--tools {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 0 0 clamp(20px, 2vw, 28px);\n  background:\n    linear-gradient(135deg, rgb(255 255 255 / 0.72), rgb(231 238 238 / 0.9)),\n    #eef3f3;\n}\n\n.cap-card--tools .cap-card__label { color: #758080; }\n.cap-card--tools-media { min-height: 420px; padding-bottom: 0; background: transparent; }\n.cap-card--tools-media .cap-card__label { color: rgb(255 255 255 / 0.82); }\n.cap-card--tools-media .cap-card__shade {\n  background:\n    linear-gradient(180deg, rgb(5 12 14 / 0.18), transparent 34%),\n    linear-gradient(0deg, rgb(5 12 14 / 0.32), transparent 56%);\n}\n\n.tool-marquee {\n  display: grid;\n  gap: 14px;\n  overflow: hidden;\n  padding: 26px 0 8px;\n  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);\n}\n\n.tool-marquee__row { display: flex; width: max-content; gap: 12px; }\n\n.tool-marquee__row span {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 54px;\n  padding: 0 16px;\n  border: 1px solid rgb(34 52 52 / 0.1);\n  border-radius: 14px;\n  background: rgb(255 255 255 / 0.78);\n  color: #2c3838;\n  font-size: 13px;\n  font-weight: 700;\n  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9);\n}\n\n.cap-card--tools-media .tool-marquee__row span {\n  border-color: rgb(255 255 255 / 0.2);\n  background: rgb(255 255 255 / 0.18);\n  color: #ffffff;\n  backdrop-filter: blur(10px);\n  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24);\n}\n\n.tool-marquee__row .ph { font-size: 20px; }\n.tool-marquee__row--left { animation: marquee-left 24s linear infinite; }\n.tool-marquee__row--right { animation: marquee-right 28s linear infinite; }\n\n@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }\n\n.cap-card--contact {\n  min-height: 118px;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 20px 76px 20px 24px;\n}\n\n.cap-card--contact a:not(.cap-card__icon-button) {\n  display: inline-block;\n  margin: 14px 0 6px;\n  color: #111111;\n  font-size: clamp(18px, 1.45vw, 24px);\n  font-weight: 360;\n  letter-spacing: 0;\n  line-height: 1.05;\n}\n\n.cap-card__icon-button {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  z-index: 2;\n  display: inline-grid;\n  place-items: center;\n  width: 42px;\n  height: 42px;\n  border: 1px solid rgb(17 17 17 / 0.1);\n  border-radius: 50%;\n  background: #111111;\n  color: #ffffff;\n  transform: translateY(-50%);\n}\n\n.cap-card__icon-button .ph { font-size: 19px; }\n\n@media (max-width: 1080px) {\n  .capabilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: auto; }\n  .cap-card--tall { min-height: 620px; }\n  .capabilities__stack:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(260px, 1fr); }\n}\n\n@media (max-width: 760px) {\n  .capabilities__header { flex-direction: column; }\n  .capabilities__button { width: 100%; }\n  .capabilities__grid, .capabilities__stack, .capabilities__stack:last-child { grid-template-columns: 1fr; grid-template-rows: auto; }\n  .cap-card--tall { min-height: 560px; }\n  .cap-card__timeline div { grid-template-columns: 52px 14px minmax(0, 1fr); }\n  .cap-card__timeline em { grid-column: 3; white-space: normal; }\n}\n\n.stats {\n  position: relative;\n  z-index: 80;\n  min-height: 100vh;\n  padding: clamp(44px, 5vw, 86px) clamp(16px, 3.8vw, 72px) clamp(54px, 5vw, 90px);\n  background:\n    radial-gradient(circle at 78% 18%, rgb(113 145 208 / 0.18), transparent 34%),\n    radial-gradient(circle at 18% 88%, rgb(170 184 213 / 0.11), transparent 28%),\n    linear-gradient(180deg, #111414 0%, #171a1a 100%);\n  color: #f7f8f8;\n}\n\n.stats__header {\n  display: grid;\n  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);\n  gap: clamp(32px, 6vw, 120px);\n  max-width: var(--hero-max-width);\n  margin: 0 auto clamp(34px, 4.5vw, 72px);\n}\n\n.stats__title-wrap h2 {\n  max-width: 920px;\n  margin: 0;\n  color: #f7f8f8;\n  font-size: clamp(29px, 3.2vw, 54px);\n  font-weight: 300;\n  letter-spacing: 0;\n  line-height: 1.08;\n}\n\n.stats__summary {\n  align-self: start;\n  margin: 0;\n  color: rgb(247 248 248 / 0.8);\n  font-size: clamp(18px, 1.65vw, 28px);\n  font-weight: 360;\n  line-height: 1.34;\n  opacity: 0;\n  transform: translateY(14px);\n  transition: opacity 420ms ease, transform 420ms ease;\n}\n\n.stats__summary.is-visible { opacity: 1; transform: none; }\n\n.stats__tabs {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 0;\n  max-width: var(--hero-max-width);\n  margin: 0 auto;\n  border-bottom: 1px solid rgb(255 255 255 / 0.14);\n}\n\n.stats__tab {\n  position: relative;\n  min-height: 58px;\n  padding: 0 20px 18px 0;\n  border: 0;\n  background: transparent;\n  color: rgb(247 248 248 / 0.5);\n  font: inherit;\n  font-size: clamp(14px, 1.22vw, 22px);\n  font-weight: 430;\n  letter-spacing: 0;\n  text-align: left;\n  cursor: pointer;\n  transition: color 220ms ease;\n}\n\n.stats__tab::after {\n  content: \"\";\n  position: absolute;\n  right: 16px;\n  bottom: -1px;\n  left: 0;\n  height: 4px;\n  background: linear-gradient(90deg, var(--hero-blue), #aab8d5);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.stats__tab.is-active { color: #ffffff; }\n.stats__tab.is-active::after { transform: scaleX(1); }\n\n.stats__chart {\n  position: relative;\n  max-width: var(--hero-max-width);\n  min-height: clamp(520px, 58vh, 680px);\n  margin: clamp(28px, 3vw, 48px) auto 0;\n  padding: 0 0 22px;\n  overflow: hidden;\n  border: 1px solid rgb(255 255 255 / 0.08);\n  border-radius: 20px;\n  background-color: rgb(255 255 255 / 0.025);\n  background-image:\n    repeating-linear-gradient(\n      to right,\n      transparent 0,\n      transparent calc(10% - 1px),\n      rgb(255 255 255 / 0.07) calc(10% - 1px),\n      rgb(255 255 255 / 0.07) 10%\n    );\n  box-shadow:\n    inset 0 1px 0 rgb(255 255 255 / 0.08),\n    0 24px 70px rgb(0 0 0 / 0.18);\n}\n\n.stats__chart-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding: clamp(18px, 2vw, 28px);\n  border-bottom: 1px solid rgb(255 255 255 / 0.08);\n  background: rgb(255 255 255 / 0.025);\n}\n\n.stats__chart-head span, .stats__chart-head strong { font-size: clamp(12px, 0.86vw, 14px); line-height: 1; text-transform: uppercase; }\n.stats__chart-head span { color: #ffffff; font-weight: 760; letter-spacing: 0.16em; }\n.stats__chart-head strong { color: rgb(247 248 248 / 0.48); font-weight: 620; letter-spacing: 0.12em; }\n\n.stats__axis {\n  display: grid;\n  grid-template-columns: minmax(180px, 0.27fr) minmax(0, 1fr);\n  gap: clamp(18px, 2vw, 34px);\n  padding: 14px clamp(24px, 2.4vw, 42px) 0;\n  color: rgb(247 248 248 / 0.42);\n  font-size: clamp(11px, 0.84vw, 14px);\n}\n\n.stats__axis div { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); }\n.stats__axis div span { text-align: left; }\n.stats__axis div span:last-child { text-align: right; }\n\n.stats__bars { display: grid; gap: clamp(16px, 2vh, 26px); padding: clamp(26px, 3vw, 48px) clamp(24px, 2.4vw, 42px) 0; }\n\n.stats__bar-row {\n  display: grid;\n  grid-template-columns: minmax(180px, 0.27fr) minmax(0, 1fr);\n  align-items: center;\n  gap: clamp(18px, 2vw, 34px);\n  opacity: 0;\n  transform: translateY(18px);\n}\n\n.stats__chart.is-ready .stats__bar-row { animation: stats-row-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--bar-delay); }\n\n.stats__bar-label strong, .stats__bar-label span { display: block; }\n.stats__bar-label strong { color: #ffffff; font-size: clamp(15px, 1.1vw, 19px); font-weight: 680; line-height: 1.2; }\n.stats__bar-label span { margin-top: 5px; color: rgb(247 248 248 / 0.48); font-size: clamp(12px, 0.86vw, 14px); line-height: 1.35; }\n\n.stats__track {\n  position: relative;\n  height: clamp(48px, 5.4vh, 64px);\n  overflow: hidden;\n  border-radius: 0;\n  background: rgb(255 255 255 / 0.055);\n  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.075), 0 12px 32px rgb(0 0 0 / 0.16);\n}\n\n.stats__range {\n  position: absolute;\n  top: 9px;\n  bottom: 9px;\n  left: var(--range-start);\n  width: var(--range-width);\n  border: 1px solid rgb(170 184 213 / 0.22);\n  background: linear-gradient(90deg, rgb(113 145 208 / 0.05), rgb(170 184 213 / 0.14), rgb(113 145 208 / 0.05));\n  opacity: 0;\n  transform: scaleX(0.6);\n  transform-origin: left;\n}\n\n.stats__chart.is-ready .stats__range { animation: stats-range-in 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--bar-delay) + 60ms); }\n\n.stats__bar {\n  position: relative;\n  z-index: 1;\n  width: var(--bar-value);\n  height: 100%;\n  background: linear-gradient(90deg, rgb(113 145 208 / 0.62) 0%, #8fb0ef 62%, #d6e3ff 100%);\n  box-shadow: 0 0 34px rgb(113 145 208 / 0.24);\n  transform: scaleX(0);\n  transform-origin: left;\n}\n\n.stats__chart.is-ready .stats__bar { animation: stats-fill 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--bar-delay) + 110ms); }\n\n.stats__value { position: absolute; z-index: 3; top: 50%; right: 18px; color: #ffffff; font-size: clamp(14px, 1vw, 18px); font-weight: 740; transform: translateY(-50%); }\n\n.stats__trace { position: absolute; inset: 0; z-index: 2; pointer-events: none; }\n\n.stats__trace i {\n  position: absolute;\n  top: var(--point-y);\n  left: var(--point-x);\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgb(255 255 255 / 0.95) 0 8%, rgb(214 227 255 / 0.42) 9% 22%, transparent 58%);\n  filter: blur(0.1px);\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0.2);\n}\n\n.stats__trace i::before, .stats__trace i::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  border-radius: 999px;\n  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.72), transparent);\n  transform: translate(-50%, -50%) rotate(var(--spark-rotate, 0deg));\n}\n\n.stats__trace i::before { width: 24px; height: 1px; }\n.stats__trace i::after { width: 1px; height: 18px; background: linear-gradient(180deg, transparent, rgb(170 184 213 / 0.62), transparent); }\n\n.stats__spark--1 { --spark-rotate: 22deg; width: 14px; height: 14px; }\n.stats__spark--2 { --spark-rotate: -18deg; width: 11px; height: 11px; }\n\n.stats__chart.is-ready .stats__trace i { animation: stats-point-in 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--bar-delay) + 260ms + var(--point-delay)); }\n\n@keyframes stats-row-in { to { opacity: 1; transform: none; } }\n@keyframes stats-fill { to { transform: scaleX(1); } }\n@keyframes stats-range-in { to { opacity: 1; transform: scaleX(1); } }\n@keyframes stats-point-in { to { opacity: 0.86; transform: translate(-50%, -50%) scale(1); } }\n\n@media (max-width: 980px) {\n  .stats__header { grid-template-columns: 1fr; }\n  .stats__tabs { display: flex; overflow-x: auto; }\n  .stats__tab { flex: 0 0 min(260px, 76vw); }\n  .stats__bar-row { grid-template-columns: 1fr; gap: 10px; }\n  .stats__axis { grid-template-columns: 1fr; }\n  .stats__axis > span { display: none; }\n}\n\n@media (max-width: 620px) {\n  .stats__title-wrap h2 { font-size: clamp(26px, 8vw, 42px); }\n  .stats__chart { min-height: auto; padding-bottom: 46px; }\n  .stats__axis div { grid-template-columns: repeat(6, 1fr); }\n  .stats__axis div span:nth-child(even) { display: none; }\n}\n\n.video-stories {\n  position: relative;\n  z-index: 90;\n  min-height: 100vh;\n  padding: clamp(46px, 5vw, 88px) 0 clamp(44px, 4vw, 74px);\n  overflow: hidden;\n  background: #f7f8f8;\n  color: #111111;\n}\n\n.video-stories__header { width: min(100% - 96px, 900px); margin: 0 auto clamp(38px, 4vw, 74px); }\n.video-stories__header h2 { margin: 0; color: #111111; font-size: clamp(38px, 4.4vw, 76px); font-weight: 300; letter-spacing: 0; line-height: 1.08; }\n.video-stories__header p { max-width: 720px; margin: 22px 0 0; color: #697272; font-size: clamp(16px, 1.25vw, 21px); font-weight: 420; line-height: 1.55; }\n\n.video-stories__rail {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(520px, 34vw);\n  gap: clamp(28px, 3vw, 54px);\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n  scroll-snap-type: x mandatory;\n  padding: 0 max(48px, calc((100vw - var(--hero-max-width)) / 2 + 48px)) 36px;\n  scrollbar-width: none;\n}\n\n.video-stories__rail::-webkit-scrollbar { display: none; }\n\n.story-card {\n  scroll-snap-align: center;\n  min-width: 0;\n  opacity: 0.54;\n  transform: translateY(10px);\n  transition: opacity 260ms ease, transform 260ms ease;\n}\n\n.story-card:hover, .story-card:focus-within { opacity: 1; transform: none; }\n\n.story-card__media {\n  display: block;\n  width: 100%;\n  height: auto;\n  aspect-ratio: 16 / 9;\n  border-radius: 12px;\n  background: #dfe5e6;\n  object-fit: cover;\n  object-position: center;\n  box-shadow: 0 18px 48px rgb(21 34 34 / 0.1);\n}\n\n.story-card__content { padding: 24px 28px 0; }\n.story-card__content p { margin: 0 0 12px; color: #111111; font-size: 15px; font-weight: 760; line-height: 1; }\n.story-card__content h3 { max-width: 680px; margin: 0; color: #252b2b; font-size: clamp(18px, 1.22vw, 24px); font-weight: 520; letter-spacing: 0; line-height: 1.38; }\n.story-card__content span { display: block; margin-top: 14px; color: #858d8d; font-size: 14px; line-height: 1.4; }\n\n.video-stories__footer { display: flex; align-items: center; gap: 8px; width: min(100% - 96px, 900px); margin: 28px auto 0; }\n.video-stories__footer span { display: block; width: 56px; height: 4px; border-radius: 999px; background: #cfd4d4; }\n.video-stories__footer span:nth-child(3) { width: 320px; background: #111111; }\n.video-stories__footer strong { margin-left: 18px; color: #7a8282; font-size: 14px; font-weight: 650; letter-spacing: 0.02em; }\n\n@media (max-width: 860px) {\n  .video-stories__header, .video-stories__footer { width: min(100% - 48px, 900px); }\n  .video-stories__rail { grid-auto-columns: minmax(320px, 82vw); padding: 0 24px 30px; }\n  .story-card { opacity: 1; transform: none; }\n}\n\n@media (max-width: 560px) {\n  .video-stories__header, .video-stories__footer { width: min(100% - 32px, 900px); }\n  .story-card__content { padding: 18px 4px 0; }\n  .video-stories__footer span:nth-child(3) { width: 150px; }\n}\n\n.site-footer { position: relative; z-index: 100; overflow: hidden; background: #000000; color: #ffffff; }\n\n.footer-dots { position: relative; height: 120px; overflow: hidden; background: #000000; }\n\n.footer-dots__line {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 200%;\n  height: 70px;\n  opacity: 0.75;\n  background-image:\n    radial-gradient(circle, rgb(255 255 255 / 0.55) 1.5px, transparent 2px),\n    radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px),\n    radial-gradient(circle, rgb(255 255 255 / 0.45) 1.2px, transparent 1.8px);\n  background-position: 0 8px, 24px 22px, 48px 14px;\n  background-size: 72px 38px, 110px 44px, 160px 52px;\n  animation: footerDotsMove 18s linear infinite;\n  transform: translateY(-50%);\n}\n\n@keyframes footerDotsMove { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } }\n\n.site-footer__inner { width: min(100% - 96px, var(--hero-max-width)); margin: 0 auto; padding: clamp(34px, 4vw, 66px) 0 clamp(18px, 2vw, 34px); }\n\n.site-footer__top {\n  display: grid;\n  grid-template-columns: minmax(320px, 1.25fr) repeat(3, minmax(150px, 0.42fr));\n  gap: clamp(28px, 4vw, 76px);\n  min-height: clamp(220px, 24vw, 330px);\n}\n\n.site-footer__top h2 { max-width: 680px; margin: 0; color: #ffffff; font-size: clamp(34px, 3.5vw, 62px); font-weight: 220; letter-spacing: 0; line-height: 1.06; }\n\n.site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.35vw, 22px); }\n.site-footer__nav a { color: rgb(255 255 255 / 0.88); font-size: 16px; font-weight: 650; line-height: 1.1; transition: color 180ms ease, transform 180ms ease; }\n.site-footer__nav a:hover { color: #ffffff; transform: translateX(3px); }\n\n.site-footer__brand-row { width: 100%; margin-top: clamp(18px, 3vw, 46px); }\n.site-footer__brand { display: flex; align-items: center; width: 100%; min-width: 0; color: #ffffff; }\n\n.site-footer__mark {\n  position: relative;\n  flex: 0 0 clamp(58px, 6.1vw, 118px);\n  aspect-ratio: 1;\n  margin-right: clamp(14px, 1.6vw, 28px);\n  overflow: hidden;\n  border-radius: 50%;\n  background: #ffffff;\n}\n\n.site-footer__mark::before {\n  content: \"\";\n  position: absolute;\n  inset: -18%;\n  background: #000000;\n  clip-path: polygon(0 20%, 100% 8%, 100% 19%, 0 31%, 0 43%, 100% 31%, 100% 42%, 0 54%, 0 66%, 100% 54%, 100% 65%, 0 77%);\n}\n\n.site-footer__brand span:last-child { display: block; flex: 1 1 auto; min-width: 0; font-size: clamp(58px, 11.1vw, 214px); font-weight: 760; letter-spacing: -0.055em; line-height: 0.78; white-space: nowrap; }\n\n.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 18px; margin-top: clamp(14px, 1.4vw, 24px); color: rgb(255 255 255 / 0.52); font-size: 9px; line-height: 1.35; }\n.site-footer__legal p { margin: 0; }\n.site-footer__legal a { color: inherit; }\n.site-footer__legal a:hover { color: #ffffff; }\n\n@media (max-width: 980px) {\n  .site-footer__inner { width: min(100% - 48px, var(--hero-max-width)); }\n  .site-footer__top { grid-template-columns: 1fr 1fr; }\n  .site-footer__top h2 { grid-column: 1 / -1; }\n}\n\n@media (max-width: 560px) {\n  .site-footer__inner { width: min(100% - 32px, var(--hero-max-width)); }\n  .site-footer__top { grid-template-columns: 1fr; min-height: auto; }\n  .site-footer__nav a { font-size: 15px; }\n  .site-footer__mark { flex-basis: clamp(38px, 12vw, 58px); }\n  .site-footer__brand span:last-child { font-size: clamp(45px, 18vw, 84px); }\n}\n    </style>\n  </head>\n  <body>\n    <main>\n      <engine-hero></engine-hero>\n\n      <section class=\"mission\" id=\"company\" aria-labelledby=\"mission-title\" data-section=\"mission\">\n        <div class=\"mission__inner\">\n          <p class=\"mission__eyebrow\">The Name Reflects Our Mission</p>\n\n          <div class=\"mission__statement\">\n            <h2 id=\"mission-title\">\n              Demand for resilient propulsion is rising as aerospace programs move faster, fly farther,\n              and require engines built with absolute precision.\n            </h2>\n\n            <a class=\"mission__button\" href=\"#technology\">\n              <span class=\"mission__button-icon\" aria-hidden=\"true\">\n                <i class=\"ph ph-arrow-elbow-down-right\"></i>\n              </span>\n              <span>Discover Our Story</span>\n            </a>\n          </div>\n\n          <p class=\"mission__support\">\n            Our name, EngineTech, reflects our commitment to moving advanced aircraft and spacecraft from\n            ambitious concepts to dependable flight-ready power.\n          </p>\n\n          <div class=\"mission__media\" aria-label=\"EngineTech propulsion systems in motion\"></div>\n        </div>\n      </section>\n\n      <section class=\"showcase\" id=\"technology\" aria-label=\"Technology highlights\"></section>\n\n      <section class=\"capabilities\" id=\"solutions\" aria-labelledby=\"capabilities-title\">\n        <div class=\"capabilities__header\">\n          <div class=\"capabilities__intro\">\n            <h2 id=\"capabilities-title\">Propulsion programs need a partner that can move from concept to certified hardware.</h2>\n            <p>\n              EngineTech combines precision manufacturing, hot-fire validation, materials engineering, and mission support\n              for aircraft and spacecraft programs that cannot afford uncertainty.\n            </p>\n          </div>\n\n          <a class=\"capabilities__button\" href=\"#contact\">\n            <span>Start a Program</span>\n            <i class=\"ph ph-arrow-up-right\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n\n        <div class=\"capabilities__grid\" aria-label=\"EngineTech capabilities and proof points\">\n          <article class=\"cap-card cap-card--tall cap-card--media\">\n            <video class=\"cap-card__video\" autoplay muted loop playsinline>\n              <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/45229-720-74e6d9.mp4\" type=\"video/mp4\" />\n            </video>\n            <div class=\"cap-card__shade\" aria-hidden=\"true\"></div>\n\n            <div class=\"cap-card__label\">\n              <span>Program Background</span>\n            </div>\n\n            <div class=\"cap-card__timeline\">\n              <div><span>2026</span><b aria-hidden=\"true\"></b><strong>Reusable upper-stage demonstrator</strong><em>Thermal qualification</em></div>\n              <div><span>2025</span><b aria-hidden=\"true\"></b><strong>Hybrid-electric aircraft platform</strong><em>Combustor redesign</em></div>\n              <div><span>2024</span><b aria-hidden=\"true\"></b><strong>Orbital transfer vehicle</strong><em>Flight article delivery</em></div>\n            </div>\n          </article>\n\n          <div class=\"capabilities__stack\">\n            <article class=\"cap-card cap-card--quote\">\n              <div class=\"cap-card__label cap-card__label--left\">\n                <span>Mission Voice</span>\n              </div>\n              <blockquote>\n                \"EngineTech brought the discipline we needed: clear design reviews, repeatable test data, and hardware\n                that arrived ready for integration.\"\n              </blockquote>\n              <p><strong>Dr. Lena Morris</strong> Propulsion Lead, Orbital Systems Group</p>\n            </article>\n\n            <article class=\"cap-card cap-card--metric cap-card--video-panel\">\n              <video class=\"cap-card__video\" autoplay muted loop playsinline>\n                <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/23211-720-e83442.mp4\" type=\"video/mp4\" />\n              </video>\n              <div class=\"cap-card__shade\" aria-hidden=\"true\"></div>\n              <div class=\"cap-card__metric\">\n                <strong>2K</strong>\n                <span>Highly Qualified Engineers</span>\n              </div>\n            </article>\n          </div>\n\n          <div class=\"capabilities__stack capabilities__stack--systems\">\n            <article class=\"cap-card cap-card--tools cap-card--tools-media cap-card--video-panel\">\n              <video class=\"cap-card__video\" autoplay muted loop playsinline>\n                <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/23843-720-35899f.mp4\" type=\"video/mp4\" />\n              </video>\n              <div class=\"cap-card__shade\" aria-hidden=\"true\"></div>\n\n              <div class=\"cap-card__label\">\n                <span>Core Systems</span>\n              </div>\n\n              <div class=\"tool-marquee\" aria-hidden=\"true\">\n                <div class=\"tool-marquee__row tool-marquee__row--left\">\n                  <span><i class=\"ph ph-gear-six\"></i> Turbopumps</span>\n                  <span><i class=\"ph ph-fire\"></i> Hot-fire</span>\n                  <span><i class=\"ph ph-gauge\"></i> Telemetry</span>\n                  <span><i class=\"ph ph-atom\"></i> Alloys</span>\n                  <span><i class=\"ph ph-wrench\"></i> Assembly</span>\n                  <span><i class=\"ph ph-gear-six\"></i> Turbopumps</span>\n                  <span><i class=\"ph ph-fire\"></i> Hot-fire</span>\n                  <span><i class=\"ph ph-gauge\"></i> Telemetry</span>\n                  <span><i class=\"ph ph-atom\"></i> Alloys</span>\n                  <span><i class=\"ph ph-wrench\"></i> Assembly</span>\n                </div>\n                <div class=\"tool-marquee__row tool-marquee__row--right\">\n                  <span><i class=\"ph ph-cpu\"></i> Controls</span>\n                  <span><i class=\"ph ph-wave-sine\"></i> Vibration</span>\n                  <span><i class=\"ph ph-shield-check\"></i> Certification</span>\n                  <span><i class=\"ph ph-rocket-launch\"></i> Launch</span>\n                  <span><i class=\"ph ph-chart-line-up\"></i> Analysis</span>\n                  <span><i class=\"ph ph-cpu\"></i> Controls</span>\n                  <span><i class=\"ph ph-wave-sine\"></i> Vibration</span>\n                  <span><i class=\"ph ph-shield-check\"></i> Certification</span>\n                  <span><i class=\"ph ph-rocket-launch\"></i> Launch</span>\n                  <span><i class=\"ph ph-chart-line-up\"></i> Analysis</span>\n                </div>\n              </div>\n            </article>\n\n            <article class=\"cap-card cap-card--contact\" id=\"contact\">\n              <div>\n                <div class=\"cap-card__label cap-card__label--left\">\n                  <span>Reach Engineering</span>\n                </div>\n                <a href=\"mailto:programs@enginetech.com\">programs@enginetech.com</a>\n                <p>+1 415 018 4270</p>\n              </div>\n              <a class=\"cap-card__icon-button\" href=\"mailto:programs@enginetech.com\" aria-label=\"Email EngineTech\">\n                <i class=\"ph ph-arrow-up-right\" aria-hidden=\"true\"></i>\n              </a>\n            </article>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"stats\" id=\"our-edge\" aria-labelledby=\"stats-title\">\n        <div class=\"stats__header\">\n          <div class=\"stats__title-wrap\">\n            <h2 id=\"stats-title\">Unmatched propulsion data across every flight-critical layer.</h2>\n          </div>\n          <p class=\"stats__summary\" data-stats-summary>\n            EngineTech maps thermal limits, production capacity, upstream readiness, and hydrogen pathways into\n            clear decisions for ambitious aerospace programs.\n          </p>\n        </div>\n\n        <div class=\"stats__tabs\" role=\"tablist\" aria-label=\"Statistics categories\">\n          <button class=\"stats__tab is-active\" type=\"button\" role=\"tab\" aria-selected=\"true\" data-stats-tab=\"cities\">\n            Cities & Infrastructure\n          </button>\n          <button class=\"stats__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" data-stats-tab=\"materials\">\n            Materials & Manufacturing\n          </button>\n          <button class=\"stats__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" data-stats-tab=\"fuels\">\n            Fuels & Upstream\n          </button>\n          <button class=\"stats__tab\" type=\"button\" role=\"tab\" aria-selected=\"false\" data-stats-tab=\"hydrogen\">\n            H2 Hydrogen\n          </button>\n        </div>\n\n        <div class=\"stats__chart\" data-stats-chart aria-live=\"polite\"></div>\n      </section>\n\n      <section class=\"video-stories\" id=\"our-team\" aria-labelledby=\"video-stories-title\">\n        <div class=\"video-stories__header\">\n          <h2 id=\"video-stories-title\">Program stories from the people building flight-ready power.</h2>\n          <p>\n            Short field notes from integration leads, test engineers, and manufacturing teams moving advanced\n            propulsion systems from requirement reviews to repeatable flight hardware.\n          </p>\n        </div>\n\n        <div class=\"video-stories__rail\" aria-label=\"EngineTech video previews\">\n          <article class=\"story-card\">\n            <video class=\"story-card__media\" autoplay muted loop playsinline>\n              <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/hf_20260324_032431_5e054107-51c0-4162-9f0f-3a40054761ef-424242.mp4\" type=\"video/mp4\" />\n            </video>\n            <div class=\"story-card__content\">\n              <p>Integration Review</p>\n              <h3>How a reusable upper-stage program moved from thermal risk to stable qualification.</h3>\n              <span>Reusable systems · 04:20</span>\n            </div>\n          </article>\n\n          <article class=\"story-card\">\n            <video class=\"story-card__media\" autoplay muted loop playsinline>\n              <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/hf_20260324_032535_4ccc152e-0cc8-4ee5-a698-e1a98cea8a1e-866873.mp4\" type=\"video/mp4\" />\n            </video>\n            <div class=\"story-card__content\">\n              <p>Hot-Fire Campaign</p>\n              <h3>Inside the test cell where telemetry, vibration, and injector response converge.</h3>\n              <span>Validation · 03:45</span>\n            </div>\n          </article>\n\n          <article class=\"story-card\">\n            <video class=\"story-card__media\" autoplay muted loop playsinline>\n              <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/hf_20260324_033707_b842a2ea-f223-4804-96d0-737ab67510fc-80dd35.mp4\" type=\"video/mp4\" />\n            </video>\n            <div class=\"story-card__content\">\n              <p>Manufacturing Floor</p>\n              <h3>Why sub-micron inspection changes the way aerospace teams plan reliability.</h3>\n              <span>Precision build · 05:10</span>\n            </div>\n          </article>\n\n          <article class=\"story-card\">\n            <video class=\"story-card__media\" autoplay muted loop playsinline>\n              <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/hf_20260324_032431_5e054107-51c0-4162-9f0f-3a40054761ef-424242.mp4\" type=\"video/mp4\" />\n            </video>\n            <div class=\"story-card__content\">\n              <p>Hydrogen Pathway</p>\n              <h3>Designing feed systems and ignition envelopes for hydrogen-ready propulsion.</h3>\n              <span>H2 systems · 04:55</span>\n            </div>\n          </article>\n\n          <article class=\"story-card\">\n            <video class=\"story-card__media\" autoplay muted loop playsinline>\n              <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/hf_20260324_032535_4ccc152e-0cc8-4ee5-a698-e1a98cea8a1e-866873.mp4\" type=\"video/mp4\" />\n            </video>\n            <div class=\"story-card__content\">\n              <p>Mission Support</p>\n              <h3>The operational cadence behind launch-window support and post-test analysis.</h3>\n              <span>Field readiness · 03:30</span>\n            </div>\n          </article>\n        </div>\n\n        <div class=\"video-stories__footer\" aria-hidden=\"true\">\n          <span></span>\n          <span></span>\n          <span></span>\n          <strong>05 / 05</strong>\n        </div>\n      </section>\n    </main>\n\n    <footer class=\"site-footer\">\n      <div class=\"footer-dots\" aria-hidden=\"true\">\n        <div class=\"footer-dots__line\"></div>\n      </div>\n\n      <div class=\"site-footer__inner\">\n        <div class=\"site-footer__top\">\n          <h2>Proven Advanced Propulsion Technology</h2>\n\n          <nav class=\"site-footer__nav\" aria-label=\"Footer navigation\">\n            <a href=\"#company\">Company</a>\n            <a href=\"#technology\">Technology</a>\n            <a href=\"#solutions\">Solutions</a>\n            <a href=\"#our-edge\">Our Edge</a>\n            <a href=\"#investors\">Investors</a>\n          </nav>\n\n          <nav class=\"site-footer__nav\" aria-label=\"Company links\">\n            <a href=\"#our-team\">Our Team</a>\n            <a href=\"#news\">News</a>\n            <a href=\"#careers\">Careers</a>\n            <a href=\"#contact\">Contact Us</a>\n          </nav>\n\n          <nav class=\"site-footer__nav\" aria-label=\"Social links\">\n            <a href=\"https://www.linkedin.com\" target=\"_blank\" rel=\"noreferrer\">LinkedIn</a>\n            <a href=\"https://x.com\" target=\"_blank\" rel=\"noreferrer\">Follow Us on X</a>\n          </nav>\n        </div>\n\n        <div class=\"site-footer__brand-row\">\n          <a class=\"site-footer__brand\" href=\"/\" aria-label=\"EngineTech home\">\n            <span class=\"site-footer__mark\" aria-hidden=\"true\"></span>\n            <span>EngineTech</span>\n          </a>\n        </div>\n\n        <div class=\"site-footer__legal\">\n          <p>© 2026 EngineTech. All rights reserved.</p>\n          <a href=\"#privacy\">Privacy Policy</a>\n          <a href=\"#terms\">Terms of Use</a>\n        </div>\n      </div>\n    </footer>\n\n    <script>\n// === Hero Section ===\nconst navItems = [\"Company\", \"Technology\", \"Solutions\", \"Our Edge\", \"Our Team\", \"Investors\", \"News\"];\n\nclass EngineHero extends HTMLElement {\n  scrollFrame = 0;\n  lastScrollY = 0;\n\n  connectedCallback() {\n    this.innerHTML = `\n      <section class=\"hero\" id=\"heroScroll\" aria-labelledby=\"hero-title\">\n        <div class=\"hero__background\" aria-hidden=\"true\">\n          <div class=\"hero__bg-layer hero__bg-layer--bottom\"></div>\n          <div class=\"hero__stars\"></div>\n          <div class=\"hero__bg-layer hero__bg-layer--top\"></div>\n        </div>\n\n        <header class=\"hero__nav\">\n          <a class=\"brand\" href=\"/\" aria-label=\"EngineTech home\">\n            <span class=\"brand__mark\" aria-hidden=\"true\">\n              <span></span><span></span><span></span><span></span>\n            </span>\n            <span class=\"brand__name\">EngineTech</span>\n          </a>\n\n          <nav class=\"hero__links\" aria-label=\"Primary navigation\">\n            {navItems.map((item) => `<a href=\"#{item.toLowerCase().replaceAll(\" \", \"-\")}\">${item}</a>`).join(\"\")}\n          </nav>\n\n          <a class=\"hero__cta\" href=\"#contact\">Get In Touch</a>\n        </header>\n\n        <div class=\"hero__content\">\n          <h1 id=\"hero-title\" class=\"hero__title\" aria-label=\"Powering the Ship\">\n            <span class=\"hero__title-line hero__title-line--one\">Powering</span>\n          </h1>\n\n          <div class=\"hero__title-row\" aria-hidden=\"true\">\n            <span class=\"hero__title-line hero__title-line--two\">the</span>\n            <span class=\"hero__title-line hero__title-line--three\">Ship</span>\n          </div>\n\n          <div class=\"engine-visual\" aria-hidden=\"true\">\n            <img class=\"engine-visual__asset\" src=\"https://plugin-assets.open-design.ai/plugins/aerocore/hero-engine_isebcf-b0bfea.webp\" alt=\"\" />\n          </div>\n        </div>\n\n        <p class=\"hero__caption\">\n          Precision engines for orbital-class vehicles.\n        </p>\n      </section>\n    `;\n\n    this.initScrollHero();\n  }\n\n  initScrollHero() {\n    const hero = this.querySelector(\".hero\");\n    const bg = this.querySelector(\".hero__background\");\n    const title = this.querySelector(\".hero__title\");\n    const titleRow = this.querySelector(\".hero__title-row\");\n    const caption = this.querySelector(\".hero__caption\");\n    const object = this.querySelector(\".engine-visual\");\n    if (!hero || !bg || !title || !titleRow || !caption || !object) return;\n\n    const lerp = (a, b, progress) => a + (b - a) * progress;\n    const colors = {\n      start: { top: [113, 145, 208], mid: [170, 184, 213], bottom: [236, 233, 230] },\n      end: { top: [240, 232, 220], mid: [238, 229, 216], bottom: [236, 226, 210] },\n    };\n\n    const mixColor = (from, to, progress) => {\n      const r = Math.round(lerp(from[0], to[0], progress));\n      const g = Math.round(lerp(from[1], to[1], progress));\n      const b = Math.round(lerp(from[2], to[2], progress));\n      return `rgb(${r}, ${g}, ${b})`;\n    };\n\n    const animate = () => {\n      const rect = hero.getBoundingClientRect();\n      const scrollLength = Math.max(hero.offsetHeight - window.innerHeight, 1);\n      const progress = Math.min(Math.max(Math.abs(rect.top) / scrollLength, 0), 1);\n      const scrollProgress = Math.max(Math.abs(rect.top) / scrollLength, 0);\n\n      const scrollY = Math.abs(rect.top);\n      const fadeStart = 0.9 * window.innerHeight;\n      const fadeEnd = 1.35 * window.innerHeight;\n      let fade = 1;\n      if (scrollY > fadeStart) {\n        fade = 1 - Math.min((scrollY - fadeStart) / (fadeEnd - fadeStart), 1);\n      }\n\n      const nav = this.querySelector(\".hero__nav\");\n      if (nav) {\n        if (scrollY === 0) {\n          nav.classList.add(\"nav--at-top\");\n          nav.classList.remove(\"nav--scroll-down\", \"nav--scroll-up\");\n        } else if (scrollY > this.lastScrollY) {\n          nav.classList.add(\"nav--scroll-down\");\n          nav.classList.remove(\"nav--at-top\", \"nav--scroll-up\");\n        } else if (scrollY < this.lastScrollY) {\n          nav.classList.add(\"nav--scroll-up\");\n          nav.classList.remove(\"nav--at-top\", \"nav--scroll-down\");\n        }\n      }\n      this.lastScrollY = scrollY;\n\n      bg.style.setProperty(\"--hero-top\", mixColor(colors.start.top, colors.end.top, progress));\n      bg.style.setProperty(\"--hero-mid\", mixColor(colors.start.mid, colors.end.mid, progress));\n      bg.style.setProperty(\"--hero-bottom\", mixColor(colors.start.bottom, colors.end.bottom, progress));\n\n      title.style.setProperty(\"--scroll-y\", `${(scrollProgress * -120).toFixed(2)}px`);\n      titleRow.style.setProperty(\"--scroll-y\", `${(scrollProgress * -120).toFixed(2)}px`);\n      caption.style.setProperty(\"--scroll-y\", `${(scrollProgress * -60).toFixed(2)}px`);\n      object.style.setProperty(\"--scroll-y\", `${(scrollProgress * -250).toFixed(2)}px`);\n\n      title.style.opacity = fade;\n      titleRow.style.opacity = fade;\n      caption.style.opacity = fade;\n      object.style.opacity = fade;\n\n      hero.classList.toggle(\"is-past\", rect.bottom <= 0);\n\n      this.scrollFrame = requestAnimationFrame(animate);\n    };\n\n    animate();\n  }\n\n  disconnectedCallback() {\n    cancelAnimationFrame(this.scrollFrame);\n  }\n}\n\ncustomElements.define(\"engine-hero\", EngineHero);\n\n// === Showcase Section ===\nconst TABS = [\n  { num: \"01\", label: \"Precision Manufacturing\", title: \"Built to Sub-Micron<br>Tolerances\", desc: \"Every component is machined and inspected in our ISO-certified facility, achieving tolerances that exceed aerospace standards by a factor of four.\" },\n  { num: \"02\", label: \"Advanced Materials\", title: \"Engineered for<br>Extreme Environments\", desc: \"Proprietary titanium and nickel superalloys withstand operating temperatures exceeding 1,600\\u00B0C while maintaining structural integrity across millions of thermal cycles.\" },\n  { num: \"03\", label: \"Thermal Testing\", title: \"10,000 Cycles<br>Before First Flight\", desc: \"Each engine variant undergoes a rigorous qualification program simulating the full range of flight conditions, from sea-level ignition to orbital thermal cycling.\" },\n  { num: \"04\", label: \"Mission Certified\", title: \"Flight-Proven<br>Propulsion\", desc: \"Our engines have powered missions across low-Earth orbit, polar orbit, and deep-space trajectories \\u2014 delivering zero in-flight anomalies across 47 consecutive launches.\" },\n];\n\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);\nconst easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);\nconst easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n\nclass ShowcaseSection {\n  frame = 0;\n  startRect = null;\n  isStartLocked = false;\n  expandStartScrollY = 0;\n\n  constructor() {\n    this.el = document.querySelector(\".showcase\");\n    this.missionMedia = document.querySelector(\".mission__media\");\n    if (!this.el) return;\n    this.createFilm();\n    this.renderUI();\n    this.loop();\n  }\n\n  createFilm() {\n    this.film = document.createElement(\"div\");\n    this.film.className = \"showcase-film\";\n    this.film.innerHTML = `      <video class=\"showcase-film__video\" autoplay muted loop playsinline poster=\"https://plugin-assets.open-design.ai/plugins/aerocore/hero-engine_isebcf-b0bfea.webp\">         <source src=\"https://plugin-assets.open-design.ai/plugins/aerocore/6853-720-41905c.mp4\" type=\"video/mp4\" />       </video>       <div class=\"showcase-film__overlay\"></div>    `;\n    document.body.appendChild(this.film);\n    this.filmOverlay = this.film.querySelector(\".showcase-film__overlay\");\n  }\n\n  renderUI() {\n    this.el.innerHTML = `      <div class=\"showcase__sticky\">         <div class=\"showcase__ui\" aria-live=\"polite\">           <div class=\"showcase__panels\">             ${TABS.map((t, i) =>`\n              <div class=\"showcase__panel{i === 0 ? \" is-active\" : \"\"}\" data-index=\"{i}\" aria-hidden=\"{i !== 0}\">                <span class=\"showcase__panel-num\">{t.num}</span>\n                <h2 class=\"showcase__panel-title\">{t.title}</h2>                <p class=\"showcase__panel-desc\">{t.desc}</p>\n              </div>`).join(\"\")}           </div>           <nav class=\"showcase__tabs-nav\" aria-label=\"Technology sections\">             ${TABS.map((t, i) => `\n              <div class=\"showcase__tab{i === 0 ? \" is-active\" : \"\"}\" data-index=\"{i}\" role=\"tab\" aria-selected=\"{i === 0}\">                <span class=\"showcase__tab-bar\" aria-hidden=\"true\"></span>                <span class=\"showcase__tab-name\">{t.label}</span>\n                <span class=\"showcase__tab-num\">${t.num}</span>\n              </div>`).join(\"\")}           </nav>         </div>       </div>     `;\n    this.ui = this.el.querySelector(\".showcase__ui\");\n    this.panels = this.el.querySelectorAll(\".showcase__panel\");\n    this.tabs = this.el.querySelectorAll(\".showcase__tab\");\n  }\n\n  cardToRect(mr) { return { top: mr.top, left: mr.left, width: mr.width, height: mr.height, radius: 0 }; }\n\n  applyRect(r) {\n    this.film.style.top = `${r.top.toFixed(2)}px`;\n    this.film.style.left = `${r.left.toFixed(2)}px`;\n    this.film.style.width = `${r.width.toFixed(2)}px`;\n    this.film.style.height = `${r.height.toFixed(2)}px`;\n    this.film.style.borderRadius = `${r.radius.toFixed(2)}px`;\n  }\n\n  loop = () => {\n    const { el, missionMedia, film, filmOverlay, ui, panels, tabs } = this;\n    const vh = window.innerHeight;\n    const rect = el.getBoundingClientRect();\n    const scrolled = -rect.top;\n    const totalScroll = Math.max(el.offsetHeight - vh, 1);\n    let missionMediaVisible = false;\n    let missionMediaPending = false;\n\n    if (rect.bottom <= 0) {\n      film.style.opacity = \"0\";\n      filmOverlay.style.opacity = \"0\";\n      ui.style.opacity = \"0\";\n      this.frame = requestAnimationFrame(this.loop);\n      return;\n    }\n\n    if (missionMedia) {\n      const mr = missionMedia.getBoundingClientRect();\n      missionMediaVisible = mr.width > 0 && mr.height > 0 && mr.bottom > 0 && mr.top < vh;\n      missionMediaPending = mr.width > 0 && mr.height > 0 && mr.top >= vh;\n\n      if (missionMediaVisible && scrolled <= 0) {\n        const mediaCenterY = mr.top + mr.height / 2;\n        if (mediaCenterY > vh / 2) { this.isStartLocked = false; this.expandStartScrollY = 0; }\n        if (mediaCenterY <= vh / 2 || this.isStartLocked) {\n          if (!this.isStartLocked) { this.expandStartScrollY = window.scrollY; }\n          this.isStartLocked = true;\n          this.startRect = this.cardToRect(mr);\n        } else {\n          this.startRect = this.cardToRect(mr);\n        }\n      }\n    }\n\n    if (!this.isStartLocked) {\n      if (missionMediaPending) { this.startRect = null; this.expandStartScrollY = 0; }\n      if (this.startRect) { this.applyRect(this.startRect); }\n      film.style.opacity = this.startRect ? \"1\" : \"0\";\n      filmOverlay.style.opacity = \"0\";\n      ui.style.opacity = \"0\";\n      this.frame = requestAnimationFrame(this.loop);\n      return;\n    }\n\n    const expandP = clamp((window.scrollY - this.expandStartScrollY) / vh, 0, 1);\n    const eased = easeOutCubic(expandP);\n    film.style.opacity = \"1\";\n\n    const sr = this.startRect || { top: vh * 0.21, left: window.innerWidth * 0.38, width: window.innerWidth * 0.58, height: vh * 0.58, radius: 0 };\n    this.applyRect({\n      top: lerp(sr.top, 0, eased),\n      left: lerp(sr.left, 0, eased),\n      width: lerp(sr.width, window.innerWidth, eased),\n      height: lerp(sr.height, vh, eased),\n      radius: lerp(sr.radius, 0, eased),\n    });\n\n    filmOverlay.style.opacity = String((eased * 0.22).toFixed(3));\n\n    if (expandP < 1) { ui.style.opacity = \"0\"; this.frame = requestAnimationFrame(this.loop); return; }\n\n    const progress = clamp(scrolled / totalScroll, 0, 1);\n    const uiP = clamp(progress / 0.08, 0, 1);\n    ui.style.opacity = String(easeInOutCubic(uiP).toFixed(3));\n\n    const TAB_START = 0.08;\n    const tabP = clamp((progress - TAB_START) / (1 - TAB_START), 0, 1);\n    const activeTab = clamp(Math.floor(tabP * TABS.length), 0, TABS.length - 1);\n\n    panels.forEach((p, i) => { const active = i === activeTab; p.classList.toggle(\"is-active\", active); p.setAttribute(\"aria-hidden\", String(!active)); });\n    tabs.forEach((t, i) => { const active = i === activeTab; t.classList.toggle(\"is-active\", active); t.setAttribute(\"aria-selected\", String(active)); });\n\n    this.frame = requestAnimationFrame(this.loop);\n  };\n\n  destroy() { cancelAnimationFrame(this.frame); this.film?.remove(); }\n}\n\nnew ShowcaseSection();\n\n// === Stats Section ===\nconst DATASETS = {\n  cities: {\n    title: \"Cities & Infrastructure\",\n    summary: \"Distributed aerospace infrastructure needs engines that can test, relight, and recover across dense launch corridors and remote operating bases.\",\n    bars: [\n      { label: \"Mobile integration bays\", value: 82, target: 88, rangeStart: 58, rangeEnd: 91, unit: \"%\", note: \"deployment coverage\", trace: [28, 42, 57, 63, 74, 82] },\n      { label: \"Airport-adjacent service cells\", value: 68, target: 74, rangeStart: 44, rangeEnd: 79, unit: \"%\", note: \"qualified workflows\", trace: [18, 36, 41, 55, 61, 68] },\n      { label: \"Remote launch support\", value: 54, target: 63, rangeStart: 30, rangeEnd: 70, unit: \"%\", note: \"field readiness\", trace: [14, 24, 39, 43, 48, 54] },\n      { label: \"Thermal recovery loops\", value: 76, target: 81, rangeStart: 50, rangeEnd: 84, unit: \"%\", note: \"heat reuse potential\", trace: [26, 38, 49, 66, 72, 76] },\n    ],\n  },\n  materials: {\n    title: \"Materials & Manufacturing\",\n    summary: \"EngineTech combines high-temperature alloys, additive tooling, and inspection data to compress the path from design lock to certified hardware.\",\n    bars: [\n      { label: \"Nickel superalloy margin\", value: 91, target: 94, rangeStart: 68, rangeEnd: 96, unit: \"%\", note: \"thermal headroom\", trace: [44, 61, 70, 79, 86, 91] },\n      { label: \"Additive chamber tooling\", value: 72, target: 80, rangeStart: 48, rangeEnd: 86, unit: \"%\", note: \"lead-time reduction\", trace: [19, 34, 48, 53, 67, 72] },\n      { label: \"Sub-micron inspection yield\", value: 96, target: 97, rangeStart: 82, rangeEnd: 99, unit: \"%\", note: \"accepted components\", trace: [71, 77, 84, 89, 94, 96] },\n      { label: \"Reusable test article cycles\", value: 84, target: 88, rangeStart: 62, rangeEnd: 91, unit: \"%\", note: \"qualification depth\", trace: [36, 52, 64, 71, 79, 84] },\n    ],\n  },\n  fuels: {\n    title: \"Fuels & Upstream\",\n    summary: \"Fuel-path analysis links propellant availability, storage constraints, and injector behavior before a program commits to flight architecture.\",\n    bars: [\n      { label: \"Methane supply compatibility\", value: 78, target: 83, rangeStart: 52, rangeEnd: 88, unit: \"%\", note: \"regional availability\", trace: [22, 31, 46, 58, 69, 78] },\n      { label: \"Kerosene retrofit readiness\", value: 64, target: 70, rangeStart: 40, rangeEnd: 74, unit: \"%\", note: \"legacy platforms\", trace: [28, 35, 39, 52, 57, 64] },\n      { label: \"Cryogenic storage stability\", value: 88, target: 92, rangeStart: 66, rangeEnd: 95, unit: \"%\", note: \"validated envelopes\", trace: [45, 56, 68, 74, 83, 88] },\n      { label: \"Injector response confidence\", value: 92, target: 94, rangeStart: 70, rangeEnd: 97, unit: \"%\", note: \"hot-fire data\", trace: [48, 62, 73, 85, 89, 92] },\n    ],\n  },\n  hydrogen: {\n    title: \"H2 Hydrogen\",\n    summary: \"Hydrogen programs require tight coordination between tankage, feed systems, ignition stability, and ultra-low-temperature operations.\",\n    bars: [\n      { label: \"Hydrogen-ready turbopumps\", value: 86, target: 90, rangeStart: 62, rangeEnd: 93, unit: \"%\", note: \"design maturity\", trace: [30, 46, 60, 71, 79, 86] },\n      { label: \"LH2 feedline conditioning\", value: 74, target: 82, rangeStart: 47, rangeEnd: 86, unit: \"%\", note: \"ground systems\", trace: [18, 29, 44, 58, 66, 74] },\n      { label: \"Ignition stability range\", value: 93, target: 95, rangeStart: 72, rangeEnd: 98, unit: \"%\", note: \"transient control\", trace: [54, 68, 75, 84, 90, 93] },\n      { label: \"Zero-carbon flight pathway\", value: 81, target: 87, rangeStart: 56, rangeEnd: 90, unit: \"%\", note: \"program fit\", trace: [24, 39, 55, 68, 76, 81] },\n    ],\n  },\n};\n\nclass StatsSection {\n  activeKey = \"cities\";\n\n  constructor() {\n    this.el = document.querySelector(\".stats\");\n    if (!this.el) return;\n    this.tabs = this.el.querySelectorAll(\"[data-stats-tab]\");\n    this.summary = this.el.querySelector(\"[data-stats-summary]\");\n    this.chart = this.el.querySelector(\"[data-stats-chart]\");\n    this.tabs.forEach((tab) => { tab.addEventListener(\"click\", () => this.setActive(tab.dataset.statsTab)); });\n    this.render();\n  }\n\n  setActive(key) {\n    if (!DATASETS[key] || key === this.activeKey) return;\n    this.activeKey = key;\n    this.tabs.forEach((tab) => { const active = tab.dataset.statsTab === key; tab.classList.toggle(\"is-active\", active); tab.setAttribute(\"aria-selected\", String(active)); });\n    this.render();\n  }\n\n  render() {\n    const data = DATASETS[this.activeKey];\n    this.summary.classList.remove(\"is-visible\");\n    this.chart.classList.remove(\"is-ready\");\n\n    window.setTimeout(() => {\n      this.summary.textContent = data.summary;\n      this.chart.innerHTML = `        <div class=\"stats__chart-head\">           <span>${data.title}</span>           <strong>Operating envelope</strong>         </div>         <div class=\"stats__bars\">           ${data.bars.map((bar, index) =>`\n            <article class=\"stats__bar-row\" style=\"--bar-value: {bar.value}%; --range-start: {bar.rangeStart}%; --range-width: {bar.rangeEnd - bar.rangeStart}%; --bar-delay: {index * 90}ms;\">\n              <div class=\"stats__bar-label\">\n                <strong>{bar.label}</strong>                <span>{bar.note}</span>\n              </div>\n              <div class=\"stats__track\" aria-hidden=\"true\">\n                <div class=\"stats__range\"></div>\n                <div class=\"stats__bar\"></div>\n                <span class=\"stats__value\">{bar.value}{bar.unit}</span>\n                <div class=\"stats__trace\">\n                  {bar.trace.map((point, pointIndex) => `<i class=\"stats__spark stats__spark--{pointIndex % 3}\" style=\"--point-x: {Math.min(point, bar.value - 3)}%; --point-y: {pointIndex % 2 === 0 ? 34 : 62}%; --point-delay: {pointIndex * 70}ms\"></i>`).join(\"\")}                </div>              </div>            </article>          `).join(\"\")}        </div>        <div class=\"stats__axis\" aria-hidden=\"true\">          <span></span>          <div>{Array.from({ length: 11 }, (_, i) => `<span>${i * 10}</span>`).join(\"\")}\n          </div>\n        </div>\n      `;\n\n      requestAnimationFrame(() => {\n        this.summary.classList.add(\"is-visible\");\n        this.chart.classList.add(\"is-ready\");\n      });\n    }, 140);\n  }\n}\n\nnew StatsSection();\n    </script>\n  </body>\n</html>\n",
+        "zh-CN": "构建 AeroCore 航天发动机电影感着陆页（完整规格见 en 字段，逐字遵循）。"
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "AeroCore — Cinematic Aerospace Engine Landing"
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "assets": [
+        "./example.html"
+      ]
+    },
+    "pipeline": {
+      "stages": [
+        {
+          "id": "generate",
+          "atoms": [
+            "file-write",
+            "live-artifact"
+          ]
+        }
+      ]
+    },
+    "capabilities": [
+      "prompt:inject",
+      "fs:write",
+      "network"
+    ]
+  }
+}

package/runtime/vendor/plugins/open-design/_official/examples/ai-designer-portfolio/SKILL.md ADDED Viewed

@@ -0,0 +1,163 @@
+---
+name: ai-designer-portfolio
+description: "Use this plugin when the user wants a premium single-page creative-studio / designer portfolio landing page on a white background: serif-accented hero, an infinite GIF marquee, parallax testimonial, two-card pricing, an auto-scrolling testimonial carousel, vertical project showcase, a mouse-trail partner CTA, and a fixed floating bottom nav. Invoke for 'designer portfolio', 'creative studio landing page', 'agency one-pager', or when the user references the Viktor Oddy / AI Designer Portfolio template."
+version: 0.1.0
+od:
+  mode: prototype
+  surface: web
+  scenario: design
+  preview:
+    type: html
+    entry: example.html
+  design_system:
+    requires: false
+---
+# AI Designer Portfolio — "Viktor Oddy" Creative Studio Landing
+Produce a premium **single-page creative-studio landing page** on a **white background throughout**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data only; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, section order, animations, button shadows, and responsive behavior described below.
+This is the authoritative build brief. Follow it exactly — the named colors, button shadows, fonts, section order, asset URLs, and animations are locked.
+## Stack
+- Default output: the single self-contained `example.html` seed. It already includes everything inline.
+- If the user explicitly asks for a React + TypeScript + Vite + Tailwind project, port the seed faithfully into the file structure below. Same tokens, same markup structure, `lucide-react` for icons. Do not change the design while porting.
+```
+src/App.tsx                          — hero, marquee, section composition
+src/components/Button.tsx            — primary/secondary/tertiary variants
+src/components/TestimonialSection.tsx — quote + parallax image
+src/components/PricingSection.tsx    — two pricing cards
+src/components/TestimonialCarousel.tsx — auto-scrolling cards
+src/components/ProjectsSection.tsx   — project showcase
+src/components/PartnerSection.tsx    — mouse-trail CTA
+src/components/Footer.tsx
+src/components/CopyrightBar.tsx
+src/components/BottomNav.tsx
+src/hooks/useInViewAnimation.ts      — IntersectionObserver scroll-trigger
+src/index.css                        — font faces, marquee + fade-in-up keyframes
+```
+## Fonts — locked
+Two custom fonts via `@font-face`:
+```css
+@font-face { font-family: 'PP Neue Montreal';
+  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype'); font-weight: 400; font-display: swap; }
+@font-face { font-family: 'PP Neue Montreal';
+  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
+@font-face { font-family: 'PP Mondwest';
+  src: url('/PPMondwest-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
+```
+- **Body default**: PP Neue Montreal with system fallbacks.
+- **Serif accent**: PP Mondwest — used for the logo, the highlighted words inside headings ("next wave", "bold way.", "Apple", "builders"), project names, the partner heading, and the "V" / "Viktor Oddy" wordmarks.
+- The seed also loads free near-equivalent web fonts (Space Grotesk / IBM Plex Mono / DM Serif Display) so the page renders cleanly when the commercial fonts are unreachable. Keep that fallback link — the real `@font-face` declarations win when reachable. Tagline uses a **monospace** font.
+## Color palette — locked
+```
+--dark:           #051A24   (primary dark, hero logo/heading, dark pricing card, buttons)
+--dark-2:         #0D212C   (secondary dark, large headings)
+--light-on-dark:  #F6FCFF   (text on dark)
+--light-on-dark-2:#E0EBF0   (muted text on dark)
+--body:           #051A24   (body text)
+--muted:          #273C46   (muted text, quote author)
+background:       #ffffff   throughout
+```
+Project descriptions use `rgba(5,26,36,0.7)`. Do not introduce other accent hues — there is no colored accent; the design is a near-monochrome dark-on-white.
+## Button shadows — critical for the design feel
+```
+Primary:   0 1px 2px 0 rgba(5,26,36,0.1), 0 4px 4px 0 rgba(5,26,36,0.09), 0 9px 6px 0 rgba(5,26,36,0.05),
+           0 17px 7px 0 rgba(5,26,36,0.01), 0 26px 7px 0 rgba(5,26,36,0), inset 0 2px 8px 0 rgba(255,255,255,0.5)
+Secondary: 0 0 0 0.5px rgba(0,0,0,0.05), 0 4px 30px rgba(0,0,0,0.08)
+Card:      0 4px 16px rgba(0,0,0,0.08)
+```
+- **Primary** button: `bg #051A24`, white text, `rounded-full`, `padding 12px 28px`, the multi-layer primary shadow incl. the inset highlight.
+- **Secondary**: white bg, `#051A24` text, no border, secondary shadow.
+- **Tertiary**: white bg, combined secondary + card shadow (used for Custom Project "Start a chat").
+## Section order (exact)
+1. **Hero** — centered narrow column `max-width:440px`, `padding:48px 24px 0` (`pt-12 md:pt-16`).
+   - Logo "Viktor Oddy" in **PP Mondwest serif**, `32 / 40 / 44px`, weight 600, `#051A24`, tracking-tight, `mb-4`, delay `.1s`.
+   - Tagline "The creative studio of Viktor Oddy" in **monospace**, `text-xs md:text-sm`, `#051A24`, `mb-2`, delay `.2s`.
+   - Heading two lines: "Build the next wave," / "the bold way." with **"wave,"** and **"bold way."** in serif. `32 / 40 / 44px`, `leading-[1.1]`, `#0D212C`, tracking-tight, `whitespace-nowrap`, delay `.3s`.
+   - Description: three paragraphs in `flex-col gap-6`, `text-sm md:text-base`, `#051A24`, `leading-relaxed`, `mt-5 md:mt-6`, delay `.4s`. (1) "I spent seven years at Apple…", (2) "The studio is deliberately small…", (3) "Projects start at $5,000 per month."
+   - Two buttons in `flex-col sm:flex-row`, gap 3/4, `mt-5 md:mt-6`, delay `.5s`: "Start a chat" (primary) + "View projects" (secondary).
+2. **Infinite marquee** — full width, `mt-16 md:mt-20 mb-16`. 8 GIFs **duplicated (16 total)** in a flex row, `animate-marquee` `translateX(0) → translateX(-50%)`, **30s linear infinite desktop / 10s mobile**. Images `h-[280px] md:h-[500px]`, `object-cover`, `mx-3`, `rounded-2xl`, `shadow-lg`. URLs (keep as remote — stable motionsites CDN):
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-space-voyage-preview-eECLH3Yc-475920.gif`
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-portfolio-cosmic-preview-BpvWJ3Nc-89ab29.gif`
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-velorah-preview-CJNTtbpd-626d83.gif`
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-asme-preview-B_nGDnTP-7fb29d.gif`
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-transform-data-preview-Cx5OU29N-910cf9.gif`
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-aethera-preview-DknSlcTa-097fee.gif`
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-orbit-web3-preview-BXt4OttD-f84442.gif`
+   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-nexora-preview-cx5HmUgo-d2d4a4.gif`
+3. **Testimonial quote** — `py-12 px-6`, `max-w-2xl`, centered.
+   - lucide `Quote` icon `w-6 h-6 text-slate-900`, delay `.1s`.
+   - Large quote "I left **Apple** to build the studio I always wanted to work with" ("Apple" serif), `32 / 40 / 44px`, `leading-[1.1]`, `#0D212C`, tracking-tight, delay `.2s`.
+   - Author "Viktor Oddy" italic, `text-sm`, `#273C46`, delay `.3s`.
+   - Three text logos: "Apple" (80px / 24px), "IDEO" (83px / 24px), "Polygon" (110px / 24px), `font-medium text-slate-900`, delay `.4s`.
+   - **Parallax image** below: `w-full max-w-xs rounded-2xl shadow-lg`, alt "Chris Halaska", delay `.5s`. Keep this URL (stable higgs CDN):
+     `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hf_20260330_103804_7aa5494f-4d5b-432e-9dc7-20715275f143-069da9.webp&w=1280&q=85`
+     Parallax = IntersectionObserver + passive scroll listener with `requestAnimationFrame`, max offset 200px.
+4. **Pricing** — full width, `py-12 px-6`. Two cards `grid-cols-1 md:grid-cols-2 gap-8`, right-aligned on desktop (`md:justify-end md:max-w-4xl`, container `margin-left:auto`). Each `rounded-[40px]`, `pl-10 pr-10 md:pr-24 pt-3 pb-10`.
+   - **Card 1 (dark)**, delay `.1s`: `bg #051A24`, inset shadow, text `#F6FCFF / #E0EBF0`. Title "Monthly Partnership" (`22px`, medium). Desc "A dedicated creative design team. / You work directly with Viktor." Price "$5,000" (`text-2xl`, `#F6FCFF`) + "Monthly". Buttons "Start a chat" (primary) + "How it works" (secondary), both → `https://halaskastudio.com/./book`.
+   - **Card 2 (light)**, delay `.2s`: `bg white`, card shadow. Title "Custom Project" (`22px`, medium). Desc "Fixed scope, fixed timeline. / Same team, same standards." Price "$5,000" (`text-2xl`, `#0D212C`) + "Minimum". One button "Start a chat" (tertiary).
+5. **Testimonial carousel** — full width, `py-20`. Header row (`md:max-w-4xl md:ml-auto`): title "What **builders** say" ("builders" serif, large heading size) left; right = 5 filled black `Star` icons (`w-5 h-5 fill-black`) + "Clutch 5/5". Auto-scroll **3s interval, pauses on hover**, prev/next circular buttons (`w-12 h-12 rounded-full border border-[#0D212C]/20`, lucide `ChevronLeft/ChevronRight`). Cards **427.5px wide desktop** (full width minus 48px mobile), `gap-6`, exit anim (opacity fade + scale down). Each card: `bg-white rounded-[32px] md:rounded-[40px]`, card shadow, `px-6 md:pl-10 md:pr-24 py-8`. Content: custom SVG quote mark, quote text (`text-base #0D212C leading-relaxed`), author row with circular avatar (`w-12 h-12`), name (`font-semibold text-sm`), role with `→` arrow prefix. **Testimonials tripled for infinite scroll**; transform `cubic-bezier(0.4,0,0.2,1)` `0.8s`.
+   - Marcus Anderson — CEO, Data.storage
+   - alexwu — Founder, Nexgate
+   - James Mitchell — VP Product, LaunchPad
+   - Rachel Foster — Co-founder, Nexus Labs
+   - David Zhang — Head of Design, Paradigm Labs
+6. **Projects** — `max-w-[1200px] px-6 py-12`, vertical stack of 3, `gap-16 md:gap-20`. Each: text block offset left (`ml-20 md:ml-28`) with project name in **serif** (`text-2xl md:text-3xl`, weight 600, `#051A24`) + description (`text-sm md:text-base`, `#051A24/70`); full-width image below (`rounded-2xl shadow-lg object-cover`). Each item fades in independently via IntersectionObserver.
+   - "evr" — "From idea to millions raised for a web3 AI product" — `…/hero-evr-ventures-preview-DZxeVFEX.gif`
+   - "Automation Machines" — "Streamlining industrial automation processes" — `…/hero-automation-machines-preview-DlTveRIN.gif`
+   - "xPortfolio" — "Modern portfolio management platform" — `…/hero-xportfolio-preview-D4A8maiC.gif`
+7. **Partner** — full width, `py-12 px-6`. Large white container `max-w-7xl py-48 rounded-[40px]` subtle shadow. On mouse hover, GIF thumbnails (from the marquee array) **spawn at cursor** with random rotation (−10..+10°), fade out over **1000ms** with scale-down, spawn no faster than **every 80ms**, cleaned up via timeout/rAF. Centered heading "Partner with us" in **serif**, `48 / 64 / 80px`, `#0D212C`, `mb-12`. CTA = dark pill with circular avatar + "Start chat with Viktor", primary shadow.
+8. **Footer** — `py-12 px-6 max-w-[1200px]`, flex row (`md:flex-row`). Left: "Start a chat" primary button. Right: lucide `ArrowUpRight`, then two columns: (1) Services, Work, About (anchors); (2) x.com, LinkedIn (`target="_blank"`). Links `text-base #051A24 hover:opacity-70`.
+9. **Copyright bar** — `max-w-[1200px] px-6 py-4`, flex `justify-between`: "Vortex Studio Limited" left, "Austin, USA" right. `text-sm #051A24`.
+10. **Fixed bottom nav** — `z-50`, fixed `bottom-6`, centered `left-1/2 -translate-x-1/2`. White bg, `rounded-full`, `px-8 py-2`, primary layered shadow. Contains "V" in serif (`text-2xl`, weight 600, `#051A24`) + "Start a chat" primary button.
+## Animations — locked
+```css
+@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
+.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
+@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+```
+- All sections use a `useInViewAnimation` hook (IntersectionObserver threshold 0.1, triggers once). Elements get `animate-fade-in-up` when in view, otherwise `opacity-0`. In the vanilla seed this is one IntersectionObserver that toggles an `.in-view` class on `.reveal` elements.
+- Each element within a section carries a **staggered `animationDelay`** (0.1s, 0.2s, 0.3s, …).
+- Parallax: passive scroll listener + `requestAnimationFrame`, max ±200px offset.
+- Partner mouse-trail: `mousemove` handler throttled to 80ms, random rotation, 1s fade+scale-down, removed on timeout.
+## Avatars (critical)
+`example.html` ships every avatar as an **inlined `data:image/svg+xml;base64,…` URI** generated from initials (colored circle + letters) — keep that approach. The prompt mentions Pexels avatars; do **not** fetch `i.pravatar.cc`, `api.dicebear.com`, Pexels, or any other remote avatar host — external avatar hosts rate-limit / 403 inside the preview sandbox and render as broken images. Generate small inline SVG data URIs instead. The large GIF previews (motionsites CDN) and the parallax still (images.higgs.ai) **stay as remote URLs** — they are large stable CDN media.
+## Responsive
+- `<768px`: single-column hero CTA, marquee duration 10s, carousel cards `calc(100vw - 48px)`.
+- `≥768px`: hero CTA row, marquee images 500px tall, pricing two columns, carousel header row, larger headings, footer row.
+- `≥1024px`: largest heading sizes (44px headings, 80px partner heading).
+## Start from the seed
+Copy `example.html` first. Only swap copy/data (studio name, testimonials, projects, prices). Do not rewrite the CSS variables, button shadows, fonts, section order, or animation logic — they are the fidelity anchor.