| :root { |
| color-scheme: dark; |
| --bg: #020405; |
| --text: rgba(249, 252, 255, 0.94); |
| --muted: rgba(229, 238, 246, 0.62); |
| --dim: rgba(229, 238, 246, 0.34); |
| --line: rgba(255, 255, 255, 0.12); |
| --panel: rgba(8, 15, 22, 0.62); |
| --panel-strong: rgba(12, 22, 31, 0.86); |
| --aqua: #25f7c4; |
| --gold: #f5b64a; |
| --blue: #5bd3ff; |
| --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| --display: Georgia, "Times New Roman", serif; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html { scroll-behavior: smooth; } |
|
|
| body { |
| margin: 0; |
| overflow-x: hidden; |
| background: |
| radial-gradient(circle at 82% 12%, rgba(245, 182, 74, 0.12), transparent 28%), |
| radial-gradient(circle at 18% 32%, rgba(37, 247, 196, 0.14), transparent 32%), |
| var(--bg); |
| color: var(--text); |
| font: 16px/1.58 var(--body); |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| body::after { |
| content: ""; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| z-index: 5; |
| background: |
| linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); |
| background-size: 64px 64px; |
| mask-image: linear-gradient(to bottom, black 0%, transparent 78%); |
| } |
|
|
| a { color: inherit; text-decoration: none; } |
| button { font: inherit; color: inherit; } |
| img { display: block; max-width: 100%; } |
|
|
| #field { |
| position: fixed; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 0; |
| pointer-events: none; |
| } |
|
|
| main { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .screen { |
| min-height: 100svh; |
| position: relative; |
| width: min(1380px, calc(100vw - 44px)); |
| margin: 0 auto; |
| } |
|
|
| .hero { |
| display: grid; |
| align-items: start; |
| padding: 8svh 0 34px; |
| } |
|
|
| .asset-orbit { |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| perspective: 1100px; |
| } |
|
|
| .asset { |
| position: absolute; |
| border: 1px solid rgba(255,255,255,0.13); |
| border-radius: 14px; |
| background: rgba(2,4,5,0.45); |
| box-shadow: 0 30px 120px rgba(0,0,0,0.5); |
| object-fit: contain; |
| opacity: 0.86; |
| filter: saturate(1.08) contrast(1.05); |
| animation: float 10s ease-in-out infinite; |
| } |
|
|
| .asset-a { |
| width: min(54vw, 860px); |
| height: auto; |
| right: 5vw; |
| top: 17svh; |
| transform: rotateX(5deg) rotateY(-14deg) rotateZ(2deg); |
| } |
|
|
| .hero::after { |
| content: ""; |
| position: absolute; |
| inset: auto -40px 0; |
| height: 62%; |
| background: linear-gradient(to top, var(--bg) 0%, rgba(2,4,5,0.92) 24%, rgba(2,4,5,0.52) 68%, transparent 100%); |
| pointer-events: none; |
| } |
|
|
| .hero-copy { |
| position: relative; |
| z-index: 2; |
| max-width: 880px; |
| padding: 10svh 0 0; |
| } |
|
|
| .kicker { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| margin: 0 0 22px; |
| color: var(--aqua); |
| font: 700 11px/1 var(--mono); |
| letter-spacing: 0.22em; |
| text-transform: uppercase; |
| } |
|
|
| .kicker span { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--aqua); |
| box-shadow: 0 0 18px rgba(37, 247, 196, 0.8); |
| animation: pulse 2.2s ease-in-out infinite; |
| } |
|
|
| h1, h2, h3, p { margin-top: 0; } |
|
|
| h1 { |
| margin-bottom: 28px; |
| max-width: 12ch; |
| font: 400 clamp(50px, 8vw, 118px)/0.9 var(--display); |
| letter-spacing: 0; |
| text-shadow: 0 4px 54px #000; |
| } |
|
|
| h2 { |
| margin-bottom: 18px; |
| font: 400 clamp(42px, 6vw, 86px)/0.95 var(--display); |
| letter-spacing: 0; |
| } |
|
|
| h3 { |
| margin-bottom: 18px; |
| font-size: clamp(28px, 4vw, 56px); |
| line-height: 1; |
| letter-spacing: 0; |
| } |
|
|
| .lede { |
| max-width: 62ch; |
| margin-bottom: 28px; |
| color: var(--muted); |
| font-size: 17px; |
| } |
|
|
| .lede a { |
| color: var(--text); |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| } |
|
|
| .button, |
| .model-tabs button, |
| #copy-command { |
| min-height: 46px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| background: rgba(255,255,255,0.035); |
| color: var(--text); |
| padding: 0 18px; |
| font-size: 13px; |
| font-weight: 700; |
| cursor: pointer; |
| backdrop-filter: blur(14px); |
| transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; |
| } |
|
|
| .button:hover, |
| .model-tabs button:hover, |
| #copy-command:hover { |
| transform: translateY(-1px); |
| border-color: rgba(255,255,255,0.36); |
| } |
|
|
| .button.primary, |
| #copy-command { |
| border-color: rgba(37,247,196,0.8); |
| background: var(--aqua); |
| color: #00130d; |
| } |
|
|
| .hero-panel { |
| position: absolute; |
| z-index: 3; |
| right: 2vw; |
| bottom: 32px; |
| width: min(430px, 36vw); |
| border: 1px solid var(--line); |
| border-radius: 18px; |
| background: rgba(5, 10, 14, 0.72); |
| box-shadow: 0 22px 90px rgba(0,0,0,0.5); |
| backdrop-filter: blur(18px); |
| overflow: hidden; |
| } |
|
|
| .panel-bar { |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| padding: 12px 14px; |
| border-bottom: 1px solid var(--line); |
| color: var(--dim); |
| font: 700 10px/1 var(--mono); |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
|
|
| .panel-bar span { |
| width: 9px; |
| height: 9px; |
| border-radius: 50%; |
| background: var(--line); |
| } |
|
|
| .panel-bar span:first-child { background: var(--aqua); } |
| .panel-bar span:nth-child(2) { background: var(--gold); } |
| .panel-bar b { margin-left: auto; font-weight: 700; } |
|
|
| .ticker { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .ticker p { |
| margin: 0; |
| padding: 13px 14px; |
| border-right: 1px solid var(--line); |
| color: var(--muted); |
| font: 11px/1.3 var(--mono); |
| } |
|
|
| .ticker p:nth-child(even) { border-right: 0; } |
|
|
| pre { |
| min-height: 150px; |
| margin: 0; |
| padding: 16px; |
| color: #d6fff2; |
| white-space: pre-wrap; |
| font: 12px/1.7 var(--mono); |
| } |
|
|
| .scroll-cue { |
| position: absolute; |
| z-index: 3; |
| left: 50%; |
| bottom: 18px; |
| transform: translateX(-50%); |
| display: grid; |
| justify-items: center; |
| gap: 10px; |
| color: var(--dim); |
| font: 700 10px/1 var(--mono); |
| letter-spacing: 0.2em; |
| text-transform: uppercase; |
| } |
|
|
| .scroll-cue i { |
| width: 1px; |
| height: 34px; |
| background: var(--line); |
| overflow: hidden; |
| } |
|
|
| .scroll-cue i::after { |
| content: ""; |
| display: block; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(transparent, var(--aqua), transparent); |
| animation: drop 1.8s ease-in-out infinite; |
| } |
|
|
| .models, |
| .pipeline { |
| display: grid; |
| align-content: center; |
| gap: 32px; |
| padding: 72px 0; |
| } |
|
|
| .section-copy { |
| max-width: 860px; |
| } |
|
|
| .model-stage { |
| display: grid; |
| grid-template-columns: 260px minmax(0, 1fr); |
| gap: 18px; |
| } |
|
|
| .model-tabs { |
| display: grid; |
| gap: 10px; |
| align-content: start; |
| } |
|
|
| .model-tabs button { |
| justify-content: flex-start; |
| border-radius: 14px; |
| } |
|
|
| .model-tabs button.active { |
| border-color: rgba(37,247,196,0.8); |
| background: rgba(37,247,196,0.12); |
| } |
|
|
| .model-readout { |
| min-height: 470px; |
| display: grid; |
| align-content: space-between; |
| gap: 24px; |
| padding: clamp(22px, 4vw, 52px); |
| border: 1px solid var(--line); |
| border-radius: 22px; |
| background: |
| linear-gradient(135deg, rgba(37,247,196,0.10), transparent 36%), |
| linear-gradient(315deg, rgba(245,182,74,0.10), transparent 36%), |
| var(--panel-strong); |
| box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 30px 130px rgba(0,0,0,0.36); |
| } |
|
|
| .model-kind { |
| margin-bottom: 14px; |
| color: var(--aqua); |
| font: 700 11px/1 var(--mono); |
| letter-spacing: 0.2em; |
| text-transform: uppercase; |
| } |
|
|
| .model-readout p:not(.model-kind) { |
| max-width: 70ch; |
| color: var(--muted); |
| } |
|
|
| .demo-strip { |
| display: grid; |
| grid-template-columns: minmax(280px, 0.72fr) minmax(280px, 1fr); |
| gap: 18px; |
| align-items: center; |
| margin-top: 8px; |
| padding: 14px; |
| border: 1px solid var(--line); |
| border-radius: 22px; |
| background: rgba(8, 15, 22, 0.72); |
| box-shadow: 0 22px 90px rgba(0,0,0,0.32); |
| backdrop-filter: blur(16px); |
| } |
|
|
| .demo-strip img { |
| width: 100%; |
| aspect-ratio: 16 / 5.2; |
| object-fit: cover; |
| border: 1px solid var(--line); |
| border-radius: 16px; |
| } |
|
|
| .demo-strip span { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .demo-strip b { |
| font-size: clamp(28px, 4vw, 54px); |
| line-height: 0.95; |
| font-family: var(--display); |
| font-weight: 400; |
| } |
|
|
| .demo-strip em { |
| max-width: 54ch; |
| color: var(--muted); |
| font-style: normal; |
| } |
|
|
| .command-wrap { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: 12px; |
| align-items: center; |
| } |
|
|
| code { |
| display: block; |
| overflow-x: auto; |
| border: 1px solid var(--line); |
| border-radius: 16px; |
| background: rgba(0,0,0,0.42); |
| color: #d9fff3; |
| padding: 18px; |
| font: 12px/1.5 var(--mono); |
| white-space: nowrap; |
| } |
|
|
| .pipeline { |
| grid-template-columns: 0.82fr 1.18fr; |
| align-items: center; |
| } |
|
|
| .pipeline-copy { |
| max-width: 580px; |
| } |
|
|
| .pipeline-copy p { |
| color: var(--muted); |
| margin-bottom: 24px; |
| } |
|
|
| .pipeline-art { |
| min-height: 620px; |
| position: relative; |
| } |
|
|
| .pipeline-art img { |
| position: absolute; |
| border: 1px solid var(--line); |
| border-radius: 18px; |
| background: rgba(0,0,0,0.3); |
| box-shadow: 0 24px 110px rgba(0,0,0,0.46); |
| } |
|
|
| .pipeline-art img:nth-child(1) { |
| width: 72%; |
| right: 0; |
| top: 2%; |
| } |
|
|
| .pipeline-art img:nth-child(2) { |
| width: 58%; |
| left: 0; |
| top: 38%; |
| } |
|
|
| .pipeline-art img:nth-child(3) { |
| width: 34%; |
| right: 10%; |
| bottom: 0; |
| } |
|
|
| .site-footer { |
| width: min(1380px, calc(100vw - 44px)); |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| align-items: center; |
| margin: 0 auto; |
| padding: 30px 0 44px; |
| border-top: 1px solid var(--line); |
| color: var(--dim); |
| } |
|
|
| .site-footer p { |
| margin: 0; |
| color: var(--muted); |
| } |
|
|
| .site-footer nav { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| justify-content: flex-end; |
| } |
|
|
| .site-footer a { |
| min-height: 42px; |
| display: inline-flex; |
| align-items: center; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| background: rgba(255,255,255,0.035); |
| color: var(--text); |
| padding: 0 16px; |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .toast { |
| position: fixed; |
| z-index: 10; |
| right: 18px; |
| bottom: 18px; |
| transform: translateY(90px); |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| background: rgba(6,12,17,0.86); |
| color: var(--text); |
| padding: 12px 18px; |
| backdrop-filter: blur(14px); |
| transition: transform 180ms ease; |
| } |
|
|
| .toast.show { transform: translateY(0); } |
|
|
| @keyframes float { |
| 0%, 100% { translate: 0 0; } |
| 50% { translate: 0 -20px; } |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { transform: scale(1); opacity: 1; } |
| 50% { transform: scale(1.9); opacity: 0.55; } |
| } |
|
|
| @keyframes drop { |
| from { transform: translateY(-110%); } |
| to { transform: translateY(110%); } |
| } |
|
|
| @media (max-width: 980px) { |
| .screen { width: min(100vw - 28px, 1380px); } |
| .asset-a { width: 82vw; height: auto; right: -8vw; top: 9svh; opacity: 0.56; } |
| .hero-panel { position: relative; right: auto; bottom: auto; width: 100%; margin-bottom: 80px; } |
| .hero-copy { padding-bottom: 28px; } |
| .model-stage, .pipeline { grid-template-columns: 1fr; } |
| .demo-strip { grid-template-columns: 1fr; } |
| .model-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .pipeline-art { min-height: 520px; } |
| } |
|
|
| @media (max-width: 640px) { |
| h1 { font-size: clamp(48px, 17vw, 78px); } |
| .asset-a { width: 104vw; height: auto; right: -28vw; top: 10svh; opacity: 0.42; } |
| .command-wrap { grid-template-columns: 1fr; } |
| .model-tabs { grid-template-columns: 1fr; } |
| .pipeline-art { min-height: 420px; } |
| .pipeline-art img:nth-child(1) { width: 100%; } |
| .pipeline-art img:nth-child(2) { width: 82%; top: 42%; } |
| .pipeline-art img:nth-child(3) { width: 52%; } |
| .site-footer { align-items: flex-start; flex-direction: column; } |
| .site-footer nav { justify-content: flex-start; } |
| } |
|
|
