Offset 2027.

# Build a website in the "Offset 2027" design

You are a senior web designer and front-end engineer. Build one responsive, accessible landing page as a single self-contained HTML file (inline CSS and JavaScript, no frameworks, no build step; Google Fonts is the only allowed external request). Follow the design specification below closely: layout, type, palette, section structure and motion. Replace the demo brand with the business described here.

## The business
- Name: not given; invent a short, credible name and say so at the top of your reply
- What it offers: not given; ask one short question, or infer from the name
- Audience: not given; write for a smart, busy visitor
- Tone of voice: Confident and plain-spoken
- Sections: keep the design's own sequence (Hero, Speakers, Schedule, Venue, Tickets, FAQ, Footer) and rename each section for this business

## Design: Offset 2027 (events)
A conference page with a centred giant headline over blurred light trails, a live countdown, and a warm gradient used only as fills.

A dark, high-energy landing page: blurred stage lights sit behind a huge centred OFFSET headline, with a live countdown and a stats bar. Below it, speakers become a mosaic of one large photo and bright gradient initials tiles, and the schedule is a keyboard-accessible three-day tab set.

Theme: dark. Palette: background #09080c, text #f4f1f7, secondary text #aaa4b3, accent #ff5c39. Typefaces: Space Grotesk.

Dark, saturated, energetic. One typeface (Space Grotesk, weights 400 to 700) carries everything.

Palette
- Page #09080c, panels #141219 and #1b1822, text #f4f1f7, muted #aaa4b3, hairlines rgba(244,241,247,.16).
- Accents #ff5c39 (orange) and #ff3d8b (pink), used as a 100 degree gradient. Gradients are fills for buttons, tiles, the featured ticket and the active tab, always with #09080c text (about 6:1). Gradient text is used only for large headline words on the dark page.

Type
- Headlines 700, letter-spacing -.045em to -.06em, line-height .85 to .95. Hero OFFSET clamp(84px, 17vw, 300px) uppercase; second line ROTTERDAM 2027 at .4 of that. Section h2 clamp(46px, 7vw, 110px) with one gradient word.
- Body 17 to 19px. Eyebrows and labels 13px uppercase tracked .14em.

Hero (min 100svh)
- Blurred light-trail photo full-bleed, slowly drifting (scale 1.12 to 1.2, 22s alternate). A radial dark scrim behind the text plus a bottom gradient keep white text above 7:1 while the colour still shows at the edges.
- Centred stack: pill eyebrow, giant headline, one line of copy, gradient "View schedule" pill and outlined "Get tickets" pill, a live countdown (days, hours, min, sec, tabular figures, updates every second).
- Bottom bar in a 5-column grid with hairline dividers: dates, venue, then three big figures (3 days, 24 speakers, 1,400 attendees) on a blurred dark strip.
- Entrance: eyebrow, OFFSET (rises 60px), second line, copy, buttons, countdown, bar in a 120 to 160ms stagger, 1 to 1.2s, cubic-bezier(.22,1,.36,1).

Sections
- Speakers: 4-column grid, gap 14px, 20px radius. One 2x2 tile holds the photograph with a bottom gradient and name and talk; the other tiles alternate gradient, orange, pink and dark panels with huge initials, name, role and talk title. Tiles lift 6px on hover.
- Schedule: role=tablist pills (Day 1 to 3) with roving tabindex, arrow keys, Home and End; the selected tab is a gradient pill. Panels list time (orange-tinted), title with speaker, and a room chip.
- Venue: a 28px-radius photo card with a dark bottom scrim, description and four facts overlaid.
- Tickets: three cards; the middle one is a full gradient card with a badge. Price at 52 to 76px.
- FAQ: real details/summary, the plus icon rotates 45 degrees and fills with the gradient when open.
- Footer: giant OFFSET 2027 with the year in gradient, three link columns.

Responsive
- Under 980px the nav becomes a Menu button with a full-screen list in 44px type; the stat bar wraps to two rows; speakers become two columns then one; tickets and FAQ stack.
- prefers-reduced-motion stops the drift, entrance and tab animation.

## Images
The design uses full-bleed photography. Use placeholder <img> elements with descriptive alt text and file names under img/ (for example img/hero.jpg), sized with width and height attributes and object-fit: cover, and list every image you need at the end of the file in an HTML comment: file name, aspect ratio, and a one-line photo brief in the style of the design, so they can be shot or generated later.

## Requirements
- Copy: real, specific sentences for this business. No lorem ipsum. Short headlines, concrete claims, one clear call to action repeated at the end.
- Accessibility: WCAG AA contrast measured against the actual background (add a scrim under text on photos), body text at least 16px, visible keyboard focus, semantic landmarks, one h1, alt text, labelled form fields.
- Responsive: designed at 1440, 1024 and 390 pixels wide with no horizontal scrolling; the navigation collapses to a working menu button on small screens.
- Motion: one orchestrated hero entrance plus motion that answers the visitor; respect prefers-reduced-motion.
- Forms do not submit anywhere: prevent the default and show an inline confirmation.

## Before you answer
- Check the first screen at 1440x900 and 390x844 reads as a finished, premium page.
- Check every text colour against its background.
- Return the complete HTML file in one code block, then the image list, and nothing else.