Fastshot Landing

# Fastshot — Single-Screen Landing Hero

## Goal
Recreate this page as ONE self-contained HTML file (inline CSS + JS). Match it pixel-faithfully. Do not invent extra sections, extra pages, extra copy, or a different visual language. The entire website is this single full-viewport hero.

`<title>Fastshot — Describe an app. We'll build it.</title>`
`<meta name="description" content="Fastshot turns a written description into a working app.">`
viewport: `width=device-width, initial-scale=1, viewport-fit=cover`

## CRITICAL — Composer Right Cluster
This is where one-shot generations fail. The bottom of the prompt card is ONE toolbar row. Left: three chips. Right: "Sonnet 4.5", a paperclip, an orange send circle.

Do NOT do any of the following:
- wrap model + attach + send in a flex row with `align-items:center`
- give the send button the same height as the chips
- vertically centre the send circle with the "Sonnet 4.5" text
- put the send button on its own row or in the card's vertical centre
- add padding or a min-size around the paperclip (it is a raw SVG, not a padded icon button)
- use `gap: 8px / 12px / 16px` guesses between those three controls

Desktop MUST use absolute coordinates inside the toolbar, copied from the measured 1560×1008 frame.

Card (absolute frame coords): x=425, y=413, w=708, h=143, radius=26.
Toolbar strip (`.tools`) inside the card: `left = 444 − 425 = 19u`, `top = 505 − 413 = 92u`, `height = 30u` (the chip-row height), `right = calc((425 + 708 − 1134)*var(--u))` which is −1u.

Chips fill that 30u strip. The send circle is TALLER than the chips and is NOT centred on them.

`.right` is `position:absolute; inset:0; pointer-events:none`, and each child is `position:absolute; pointer-events:auto`. Left offsets are relative to `.tools`, whose left edge is frame-x 444.

- **Model "Sonnet 4.5" + chevron** — `left: 510.2u`, `top: 15.5u`, font-size 10.4u, weight 400, colour `#98999C`, line-height 1, `display:inline-flex; align-items:center; gap: 6.2u`, chevron SVG width 6.8u. The 10.4u text sits in the LOWER-MIDDLE of the 30u chip row (15.5 + 10.4 = 25.9), above the chip baseline — not vertically centred with the 35u send.
- **Attach paperclip** — `left: 599.15u`, `top: 10.14u`, colour `#A9AAAD`, SVG width 19.79u. No button padding, no background, no 32px hit box. Hover `#fff`.
- **Send circle** — `left: 640u`, `top: 2u`, 35 × 35u, `border-radius: 50%`. Send top is 2u below the chip-row top; send bottom is at 37u, which HANGS 7u BELOW the 30u chip row. Right padding: card right (1133) − send right (1119) = 14u from the card's inner right edge.
- Horizontal gaps (do not invent others): attach right ≈ 618.94u, send left = 640u, gap attach→send ≈ 21.06u. The model starts at 510.2u; leave the natural width of "Sonnet 4.5" + 6.2u + chevron — do not stretch it.

**Visual check (desktop):** all three chips, the model label, the paperclip and the send circle share one horizontal band near the BOTTOM of the glass card. Placeholder text is a separate band near the TOP (33u from card top). Two bands, not one. The orange circle is the largest control on that band. "Sonnet 4.5" is small muted text left of the paperclip, aligned to the chip TEXT rather than the send circle's centre. The paperclip sits between the model label and the send circle, slightly higher than the model text, lower than the send's top.

## Background Video
Required, this exact URL, no substitute and no still image:
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260826_124724_bc041163-d651-425f-aea3-2acc1efc2c96.mp4`

A `<video>` covering the full viewport: `autoplay muted loop playsinline`, `object-fit:cover`, z-index 0. Page behind it `#0a0d12`; `html`/`body` height 100%; `body { overflow:hidden }`. The video is a dawn lake-and-mountains landscape — CSS must not pan, zoom or Ken-Burns it. UI sits on top.

## Fonts
Google Fonts Inter variable: `opsz 14..32`, `wght 100..900`, `font-display:block`.
`--font-text: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`
`--font-display: Inter, var(--font-text)`
Display roles carry `font-variation-settings: "opsz" 32`.
`body`: `font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision`.
Weights actually used — do not synthesize others: 400, display 410, proof 480, brand/labels 500, CTA 520.

## Reference Layout (Desktop)
Frame 1560 × 1008; 1 unit (`--u`) = 1 reference px.
```css
:root{
  --u: min(0.06410256vw, 0.12400794vh);
  --vu: 0.09920635vh;
  --inset-top: 41; --inset-bottom: 106;
}
@supports (height:100dvh){
  :root{ --u: min(0.06410256vw, 0.12400794dvh); --vu: 0.09920635dvh; }
}
@media (min-width:1561px){ :root{ --inset-top:27; --inset-bottom:74; } }
```
The composition scales as one block and is never clipped. The video always covers the viewport, with no letterboxing.

## CSS Variables (copy exactly)
Nav: `--brand-x:225; --brand-y:45; --mark:34; --brand-gap:12; --brand-fs:18.49; --links-y:50.5; --links-gap:50; --links-fs:21.69; --cta-x:1195; --cta-y:42; --cta-w:140; --cta-h:43; --cta-r:12; --cta-fs:15.70; --cta-dy:2;`
Hero: `--hero-gap:51; --h1-y:323; --h1-fs:36.25; --display-ls:0.0018em; --nav-ls:-0.0115em; --brand-ls:-0.0154em; --cta-ls:-0.0127em; --body-ls:0.007em; --label-ls:normal; --model-ls:normal; --proof-ls:0.0065em; --w-regular:400; --w-display-wght:410; --w-medium:500; --w-semibold:600; --w-display:var(--w-display-wght); --w-nav:400; --w-brand:500; --w-cta:520; --w-body:var(--w-regular); --w-label:var(--w-medium); --w-model:var(--w-regular); --w-proof:480;`
Composer: `--card-x:425; --card-y:413; --card-w:708; --card-h:143; --card-r:26; --ph-x:452; --ph-y:446; --ph-fs:9.97; --chips-x:444; --chips-y:505; --chip-h:30; --chip-r:9; --chip-fs:9.0; --chip-gap:5.5; --son-fs:10.4; --son-top:15.5; --chev-gap:6.2; --chev-x:1013.5; --chev-y:522.3; --att-x:1043.2; --att-y:515.1; --send-x:1084; --send-y:507; --send-d:35;`
Footer: `--by-y:799; --by-fs:14.01; --logo-y:867; --logo-gap:62;`

## Page Structure
`.stage` (`position:fixed; inset:0; overflow:hidden; background:#0a0d12`)
- `.stage-video` (absolute; inset:0; 100%/100%; `object-fit:cover`; z-index 0)
- `.frame` (absolute; inset:0; z-index 1; flex column), padding `calc(var(--inset-top)*var(--vu)) calc(225*var(--u)) calc(var(--inset-bottom)*var(--vu))`, containing a hidden checkbox `#menu`, `header.nav` (height `calc(43*var(--u))`, flex, space-between), `.sheet` (mobile menu, `display:none` on desktop), `main.hero` (flex:1, column, centred, gap `calc(var(--hero-gap)*var(--vu))`, padding-bottom `calc(4*var(--vu))`), and `footer.proof` (flex:none, column, centred, gap `calc(52.3*var(--vu))`).

**Nav left — brand.** Link "Fastshot", `aria-label="Fastshot home"`. Mark 34×34: circle `#9C86CE` r=17, circle `#FFFFFF` r=8.6, circle `#151519` r=3.7. Wordmark Inter 18.49u weight 500, letter-spacing −0.0154em, `translateY(1u)`, opsz 32, `text-shadow: 0 1u 10u rgba(0,0,0,.30)`, gap 12u.

**Nav centre — absolutely centred.** `position:absolute; left:50%; transform:translateX(-50%); top: calc((50.5 − 41)*var(--u))`, gap 50u. Features · Examples · Pricing · Docs, all `href="#"`. 21.69u, weight 400, letter-spacing −0.0115em, line-height 1.2, white, `text-shadow: 0 1u 12u rgba(0,0,0,.32)`. Hover opacity .72, transition `opacity .18s ease`.

**Nav right — Get Started.** 140×43u, radius 12u, Inter 15.70u weight 520, letter-spacing −0.0127em. `align-self:flex-start; margin-top: calc((42 − 41)*var(--u))`. Background `linear-gradient(180deg,#3d3d3f 0%,#1d1d20 100%)`, `box-shadow: inset 0 1u 0 rgba(255,255,255,.10), 0 2u 14u rgba(0,0,0,.28)`. Inner span `translateY(2u)`. Hover `filter:brightness(1.16)`; active `translateY(1px)`.

**Headline.** "Describe an app. We'll build it." Inter 36.25u weight 410, line-height 1.10, letter-spacing 0.0018em, white, opsz 32, `text-shadow: 0 2u 22u rgba(0,0,0,.30)`.

**Composer card.** `<form class="card" onsubmit="return false">`, 708×143u, radius 26u, `margin-right:3u`, background `rgba(41,41,43,.955)`, `backdrop-filter: blur(26u) saturate(112%)`, `box-shadow: inset 0 0 0 1px rgba(214,228,255,.14), 0 22u 60u rgba(0,0,0,.30)`, `position:relative` (required so `.ph` and `.tools` can be absolutely placed).

**Placeholder** is a `<p>`, not an input: "Build a fintech tracking app with bank level privacy and..." — `position:absolute`, left 27u, top 33u, right 24u, colour `#8B8C8E`, 9.97u weight 400, line-height 1.35, letter-spacing 0.007em, `white-space:nowrap; overflow:hidden`.

**Chips** (left side of the 30u toolbar): `.chips { display:flex; align-items:center; gap:5.5u }`. Each chip height 30u, radius 9u, font 9.0u weight 500, colour `#909093`, line-height 1, background `linear-gradient(180deg, rgba(255,255,255,.088) 0%, rgba(255,255,255,.050) 45%, rgba(255,255,255,.038) 100%)`, border `1px solid rgba(255,255,255,.05)`. Hover `linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07))` with colour `#c8c8cb`. Label span `translateY(2u)`.
- Chip 1 "Attach Screens" `style="--cw:107;--pl:12;--ig:3.7"`, icon width 15.06u
- Chip 2 "Attach a Figma" `style="--cw:108;--pl:16;--ig:3.9"`, icon width 11.8u
- Chip 3 "Today's Theme" `style="--cw:107;--pl:15.8;--ig:2.9"`, icon width 12.13u

Icons are FILLED `currentColor` blob paths, not outline/stroke icons.

**Send styling.** Background `linear-gradient(163deg, #FBBC94 0%, #F49D70 46%, #E88654 100%)`, `box-shadow: 0 3u 12u rgba(210,110,60,.34)`, a white filled UP-arrow SVG of width 11.66u flex-centred in the circle, `aria-label="Build it"`. Hover `brightness(1.07)`; active `scale(.95)`.

**Footer.** "Built by engineers from" — Inter 14.01u weight 480, letter-spacing 0.0065em, colour `rgba(255,255,255,.95)`, opsz 32, `text-shadow: 0 1u 12u rgba(0,0,0,.35)`. Three white wordmark SVGs, gap 62u, `drop-shadow(0 1u 10u rgba(0,0,0,.30))`: Google 96.84u · Cisco 67.29u · Adobe 88.68u, filled `currentColor` wordmarks.

**Focus & reset.** `:focus-visible { outline: 2px solid #F8B285; outline-offset: 3px; border-radius: 4px; }`. Reset `*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }`, `button,input,textarea { font:inherit; color:inherit; background:none; border:0 }`, `img,svg { display:block }`.

**Mobile menu.** Burger 38×38, radius 11, background `rgba(255,255,255,.10)`, border `1px solid rgba(255,255,255,.14)`, two-bar icon 17×12. CSS-only: hidden checkbox `#menu` plus `label.burger`. `.sheet` uses `grid-template-rows: 0fr → 1fr` over `0.32s cubic-bezier(.4,0,.2,1)`. Panel `rgba(24,24,27,.86)`, blur 20px, radius 16, border `rgba(255,255,255,.09)`. Links 15px; Get Started height 40, radius 11, font 15.

## Responsive — implement all three architectures
**1) Desktop (default)** — the unit-scaled 1560×1008 composition above. `.burger` and `.sheet { display:none }`. Absolute toolbar as specified.

**2) Tablet** — `@media (min-width:600px) and (max-width:1180px) and (min-height:600px)`, `--u: 1px`. Fluid desktop, not phone. One-line headline. ONE-ROW toolbar (chips left, controls right). This is the ONLY place the right cluster becomes flex:
```css
.right { position:static; display:flex; align-items:center; margin-left:auto; gap:0 }
.right > * { position:static }
.attach { margin-left: clamp(9px, 1.4vw, 20px) }
.send   { margin-left: clamp(9px, 1.3vw, 18px); width/height: clamp(32px, 3.5vw, 38px) }
```
Do not wrap the send onto a second row. `.frame` padding `clamp(24px,3.4vh,44px) clamp(28px,4.2vw,60px) clamp(26px,4.4vh,56px)`. Nav stays horizontal with all four links and Get Started visible. `.h1: clamp(27px,4.3vw,44px)`, line-height 1.12. `.card`: width `min(100%, clamp(516px,74vw,760px))`, height auto, margin-right 0, padding `clamp(15px,1.9vw,24px)`, radius `clamp(17px,2.1vw,26px)`, flex column, gap `clamp(20px,3.2vh,44px)`. `.ph`: `position:static; white-space:normal; clamp(11px,1.35vw,14px)`, line-height 1.4. `.tools`: static, height auto, flex row wrap, gap `clamp(10px,1.4vw,18px)`. `.chips`: nowrap, gap `clamp(6px,0.85vw,10px)`. `.chip`: width auto, height `clamp(29px,3.4vh,34px)`, padding `0 clamp(7px,1vw,13px)`, font `clamp(9.6px,1.12vw,12.5px)`. `.model`: `clamp(9.8px,1.12vw,12.5px)`. Proof gap `clamp(15px,2.5vh,30px)`.

**3) Compact** — `@media (max-width:599px), (max-height:599px) and (max-width:1180px)`, `--u: 1px`. Padding uses `env(safe-area-inset-*)` maxed against `clamp(18px,5.2vw,40px)` sides, 18px top, 20px bottom. Hide `.links` and the header `.cta`; show the burger; brand mark 30px. `.h1`: width 100%, `max-width:15ch`, `clamp(29px,7.6vw,50px)`, line-height 1.14, letter-spacing −.012em. `.card`: width 100%, max-width 600px, height auto, column, gap `clamp(16px,4.6vh,34px)`, padding `clamp(13px,3.4vw,18px)`. `.ph`: nowrap ellipsis, `clamp(9.4px,2.95vw,14px)`.
```css
.tools { flex-direction:column; align-items:stretch; gap:12px }  /* chips wrap on row 1 */
.right { position:static; display:flex; align-items:center; justify-content:flex-start }
.attach { margin-left:auto }   /* paperclip + send hug the right; model stays left */
.send { margin-left:14px; width:40px; height:40px }
```
Still not a centred send. Model left, attach + send right, same second row.
Extra short: `@media (max-width:1180px) and (max-height:560px) { .hero gap 16px; .h1 clamp(24px,5.4vh,34px); .proof gap 10px; padding-top 10px }`

## Entrance (once on first paint; never loops; not scroll-bound)
Head script: `document.documentElement.classList.add('anim')`. Only under `prefers-reduced-motion: no-preference`.
`--e-primary: cubic-bezier(.16,1,.3,1)`; `--e-soft: cubic-bezier(.22,1,.36,1)`.

Keyframes: `e-settle-down` (opacity 0, translateY(−5u) → none); `e-settle-up` (opacity 0, translateY(6u) → none); `e-mark` (scale(.9) → none); `e-focus` (opacity 0, translateY(14u), blur(6u) → none / blur 0 — headline only); `e-panel` (opacity 0, translateY(18u) scale(.985) → none); `e-populate` (opacity 0, translateY(4u) → none); `e-send` (scale(.82) → none). `animation-fill-mode: both`.

| Target | Animation | Duration | Easing | Delay |
|---|---|---|---|---|
| brand | e-settle-down | .58s | soft | .06s |
| mark | e-mark | .62s | primary | .06s |
| nav links | e-settle-down | .50s | soft | .16 / .21 / .26 / .31s |
| Get Started | e-settle-down | .55s | soft | .34s |
| headline | e-focus | 1.00s | primary | .30s |
| composer | e-panel | .90s | primary | .62s |
| placeholder | e-populate | .50s | soft | .88s |
| chip row | e-populate | .50s | soft | .94s |
| `.right` | e-populate | .50s | soft | 1.00s |
| `.send` | e-send | .50s | primary | 1.00s |
| proof caption | e-settle-up | .55s | soft | 1.08s |
| logos | e-settle-up | .55s | soft | 1.16 / 1.22 / 1.28s |

`will-change: transform, opacity` on `.h1` and `.card` while animating. After the last logo's `animationend` OR a 2600ms timeout, remove the class `anim` from `<html>`. Under `prefers-reduced-motion: reduce`, animation and transition durations drop to .01ms.

## Interaction
Chips, model, attach and send are presentational. The form does not submit. Links are `#`. No JS except the anim class and its teardown. The mobile menu is the checkbox.

## Output
One HTML file. Dark full-bleed hero. Match colours, radii, shadows, letter-spacing, and all three responsive architectures. Do not add a second section below the fold. Desktop composer uses the absolute toolbar; the right cluster is NOT a flex-centred group.