Build a premium, airy 4-page marketing website for a copywriting subscription agency called "Quill". Follow this spec exactly, then apply MY BRIEF at the bottom (it overrides names, copy, prices and colours).

WHAT IT IS
A light-grey editorial agency site: huge tight-tracked sans headlines with one italic serif accent word, white rounded cards on #F7F7F7, near-black dark sections, a glossy 3D blue-violet-pink ribbon image, pill buttons and tags, marquees and soft scroll reveals. Pages: Home "/", Pricing "/pricing", Blog "/blog", Blog post "/blog/:slug", plus a full-screen menu overlay and a 404 page for any other URL. Illustrations, logos and mockups are drawn in code (CSS/SVG). People are round illustrated portraits of fictional people (256x256 WebP in public/avatars/, DiceBear "Lorelei" style, CC0 1.0, soft pastel backgrounds; see docs/ASSETS.md). No real brand logos.

STACK
Vite + React 18 + TypeScript (strict) + Tailwind CSS v3, Node 18+. Only these dependencies: react-router-dom (v6), lucide-react, @fontsource/inter-tight (400/500/600/700), @fontsource/newsreader (500 and 600 italic). No UI kits, no animation libraries.

DESIGN TOKENS
Store colours as CSS variables in "R G B" form in src/index.css and map them in tailwind.config.js as rgb(var(--name) / <alpha-value>). Never use raw hex in components.
Light (default, :root): canvas #F7F7F7 (page), surface #FFFFFF (cards), surface-2 #EEEEEE (insets, menu overlay), line #E5E5E5, ink #171717 (text), muted #636363 (secondary text), night #0A0A0A (dark sections), night-2 #111111 (dark cards), night-3 #1F1F1F (dark insets), night-line #262626, on-night #FAFAFA, on-night-muted #A3A3A3, accent-a #2563EB (blue), accent-c #4F46E5 (indigo), accent-b #D946EF (magenta), accent #2563EB (link text), accent-solid #2563EB (fill behind white text), success #16A34A (availability dot). Ribbon artwork palette (documented as tokens): ribbon-sky #5B9BF0, ribbon-royal #2E63DE, ribbon-navy #1E2FA0, ribbon-core #0A1478, ribbon-violet #5B21B6, ribbon-pink #E88BE0, ribbon-lilac #C084FC.
Dark ([data-theme="dark"] on <html>): canvas #0A0A0A, surface #171717, surface-2 #1F1F1F, line #2E2E2E, ink #FAFAFA, muted #A3A3A3, night #000000, night-line #2E2E2E, accent #60A5FA. Everything else unchanged.
Accent gradient: linear 135deg from accent-a through accent-c to accent-b.
Fonts: sans "Inter Tight" (headings 700, buttons and tags 600, body 400-500 in muted grey); accent "Newsreader" italic 600 at 1.06em, used for one or two words per headline (500 italic for blockquotes).
Type classes (clamp, weight 700 headings): t-display 46-96px (lh 0.98, -0.045em), t-h1 38-72px (1.0, -0.04em), t-h2 32-56px (1.02, -0.04em), t-h3 19-24px (1.2, -0.025em), t-num 40-60px, t-lead 17-20px (1.55), t-body 16px (1.6), t-small 14px, t-micro 12px, t-eyebrow 12px, t-menu 36-72px (clamp(36px, 6vw, 72px), 700), t-prose 16-17px (article body), t-quote serif italic 24-32px. Body max ~60ch.
Radii: cards 24px, inner tiles 16px, pricing shell 32px, buttons and tags 9999px. Shadow: 0 4px 24px rgb(0 0 0 / .04); lift 0 12px 40px rgb(0 0 0 / .08).
Spacing: 8px scale. Container max 1200px, wide container 1320px, gutters 24px mobile / 32px from 1024px, 12-column grid. Sections sit clamp(96px, 12vw, 192px) apart (each section pads half top and bottom).

LAYOUT
Floating transparent header fixed at the top (72px, 84px from 768px): italic serif wordmark "Quill" with a small sans asterisk on the left, drawn with mix-blend-difference so it reads on light and dark; on the right a sun/moon theme pill (sliding black knob; shown when theme.showToggle) and a white pill "Menu" button with a chevron. Main content, then the dark footer. Breakpoints 640/768/1024/1280/1440. Card grids go 3 columns to 2 at 768px to 1 on phones. No sideways scroll at 390, 360 or 320px.

SCREENS / PAGES
Home, in order:
1. Hero (full height, overflow hidden): right ~50% a glossy satin 3D ribbon built from five stacked transparent WebP layers (public/hero/ribbon-body, -core, -violet, -sheen, -pink .webp; body and pink also at 1000px via srcset): crisp S-curve left edge with a lit sky-blue rim, royal-to-navy core, violet top, pink/lilac lobe lower right, soft dissolve at the bottom. The stack (aspect 1800/2025) is positioned absolute, bleeding off the top and right, inside a wrapper with an eased bottom mask-image fade. It flows: the stack drifts (13s) and each layer has its own CSS loop (translate 2-6%, rotate 2.5-5deg, scale up to 1.1, 9-12s, alternate ease-in-out, will-change: transform), so the shape visibly morphs; a 0.12x scroll parallax on the stack; loops pause off screen; fully static for reduced motion. Same image on light and dark backgrounds. On phones it sits above the headline (never behind text). Left: marquee of white service pills; t-display H1 "Words that work, on demand." ("work" italic serif, superscript asterisk); muted sub-copy; black pill "See Pricing" + white pill with the host's portrait, "Book a 15-min intro call" and a pulsing green "Available now" dot.
2. Logo cloud: small muted label "Trusted by teams who care how they sound" left, marquee of 8 invented wordmarks with tiny SVG glyphs at 45% ink opacity.
3. How it works: pill overtitle, H2 "A calmer way to get copy written.", three white cards with a 264px grey tile then title and body: Subscribe (mini plan card: "Popular", $2,995/month, black "Join today"), Request (three columns of tags scrolling vertically like a slot machine under a black "Q" tile), Receive (SVG folder with a gradient sheet).
4. Social proof: 12 circular portraits (white ring, lift shadow, max-width none) arranged on a semicircle arc, gently floating; H2 "120+ brands sounding sharper, sooner." inside the arc; the booking pill below.
5. Dark gallery (night): a row of large rounded copy-sample mockups (landing hero, email, gradient headline, product copy, ad hooks, brand voice) that slides sideways as the page scrolls down.
6. Features: overtitle, H2 "All the craft, none of the overhead.", 3x2 grid of white cards each with a black rounded icon tile (lucide icons), bold title, one-line muted copy; then a reverse marquee of tags.
7. Testimonials: overtitle, H2, carousel of 3 white cards (2 tablet, 1 phone: portrait, name, role, quote), 5 dots in a white pill (active = black bar), 6s autoplay paused on hover, swipe.
8. Pricing: overtitle, H2 "One plan. Unlimited requests.", a massive near-black card (32px radius, 10px padding) with two panels: left a colourful mockup (the flattened ribbon image, static, with a tilted white "Homepage v3" doc card and a small dark comment bubble), right a night-2 panel: wordmark, blurb, top-right switch "Additional active task +$995", large price $2,995 /month that becomes $3,990 when the switch is on, 5 bullets with white check circles (bullet 2 becomes "Two active tasks at a time" when on), full-width white "Join today" button.
9. Blog teaser: overtitle, H2 "Field notes on writing that sells.", a large featured card (cover left; tag, title, excerpt, read time, author portrait + name + role right) and a 3-column grid of smaller cards (cover with tag, title, excerpt, author portrait, date, arrow).
10. FAQ split: left (sticky on desktop) overtitle "FAQs", H2 "Frequently asked questions", email with icon and black "Get in touch"; right 7 white accordion cards with a round "+" that rotates to "x" and turns black when open; first item open.
Footer (all pages, night): wordmark, t-h1 "Good copy shouldn't be hard to get.", sub-copy, white "See Pricing"; right a self-built dark booking calendar (month, prev/next, Sun-Sat grid, open weekdays as tiles, selected day white, time slots, 12h/24h switch, white "Confirm" button); bottom row: copyright, "Thank you", "Privacy Policy", "Terms", then a small "Made by Vibe Templates" badge pill (white pill, lift shadow, round accent-gradient mark with a white V, 14px 600 label in night; in dark theme a night-3 pill with on-night text and a night-line ring; opens site.badge.href in a new tab with rel="noopener noreferrer"; wraps below the links on phones, never overlaps them; hidden when site.badge.enabled is false).
Pricing page: overtitle, H1 "Simple pricing, no surprises.", sub-copy, the same pricing card centred (max 1040px), the logo cloud, the first 5 FAQs, footer.
Blog page: overtitle, H1 "Practical reads for sharper copy.", sub-copy, featured card, grid of the other 6 posts, newsletter card (email field and black "Subscribe"), footer.
Blog post page: back link, date, big H1, lead, author portrait with name and role, large 16:9 rounded drawn cover, then a 720px reading column (H2s, paragraphs, gradient-bullet lists, italic serif blockquote), author row again at the end, "Keep reading" grid of 3.
Menu overlay: full screen #EEEEEE, wordmark and white "Close" pill on top, theme pill + white "Close" pill top right, centred t-menu links Home, Pricing, Blog, 404 staggering in (inactive muted, current ink with a small gradient dot, same weight), copyright at bottom centre. Escape closes, focus trapped.
404: giant gradient "404", H2 "This page is off-script.", sub-copy, black "Back to home".

SHARED COMPONENTS
Header, MenuOverlay, Footer, BookingCalendar, Loader (wordmark flips in on the X axis with blur, under 900ms, skipped for reduced motion), Marquee (pure CSS, content twice, copy aria-hidden, edge fade), Reveal (IntersectionObserver fade + rise), SectionHeading, Segments, Avatar (portrait img from site.avatars, initials fallback) + AuthorChip, ThemeToggle, BookingPill, PricingCard, PostCards, PostCover (7 drawn covers), GalleryCard, HeroRibbon, FolderIcon, Newsletter, MadeByBadge.

DATA AND SEAMS
src/config/site.ts holds all copy, links and switches (brand, sections, loader, theme {default: 'light' (template default) | 'dark' | 'system', showToggle}, avatars (name -> 'avatars/file.webp'), nav, booking, services, hero (incl. ribbon {src, layers [{name, src, srcSmall?}], hue, parallax}), logos, howItWorks, socialProof, features, testimonials, pricing, blog, faq, footer, badge {enabled, label, href}, notFound). Headlines are arrays of { text, accent } segments.
src/data/posts.ts: 7 posts with slug, title, excerpt, date, readTime, tag, author (one of site.blog.authors), cover, featured, body blocks (p, h2, quote, list). src/data/gallery.ts: gallery mockups.
src/lib/integrations.ts seams: requestBooking({date,time,timezone}) -> {ok,message,redirectUrl?}; getCheckoutUrl({withAddOn}) -> payment link; subscribeNewsletter(email) -> {ok,message}. Default stubs send nothing. src/lib/storage.ts wraps every localStorage call in try/catch; src/lib/theme.ts sets data-theme, follows prefers-color-scheme when theme.default is 'system', and remembers a clicked choice. public/_redirects contains "/* /index.html 200".

QUALITY RULES
Zero build errors, no console errors. One H1 per page, skip link, visible 2px focus ring, aria-expanded on accordion and menu, role="switch" on the toggle, aria-pressed on calendar days and slots. Every text pair at least 4.5:1 in both themes. Reduced motion: no loader, marquees stop, reveals show instantly, gallery becomes a native scroller.

MY BRIEF (fill in the brackets; anything left in brackets keeps the default)
Replace every `[bracketed value]`. Leave a line as it is to keep the template default (shown after "default:").

## Agency
- Agency name: [Your Agency] (default: Quill)
- Wordmark mark after the name: [*] (default: *)
- Tagline: [Conversion copy on subscription]
- One-sentence pitch for the hero: [A monthly copywriting subscription for founders, marketers and studios.]
- Hero headline, with ONE word in the italic serif accent: [Words that *work*, on demand.]
- Contact email: [hello@youragency.com]
- Website URL (for meta tags): [https://youragency.com]

## Services (8 to 12 short tags, used in the marquees)
- [Landing Pages], [Email Sequences], [Product Copy], [Brand Voice], [Sales Pages], [Ad Scripts], [Onboarding Emails], [Website Rewrites], [Case Studies], [Taglines]

## Offer and pricing
- Plan price per month: [2995]
- Currency symbol: [$]
- Add-on name and price: [Additional active task] / [995]
- Five plan bullets: [Unlimited copy requests] / [One active task at a time] / [First drafts in two business days] / [Editable docs and every revision] / [Pause or cancel anytime]
- Bullet that replaces bullet 2 when the add-on is on: [Two active tasks at a time]
- Payment link for "Join today" (Stripe Payment Link or similar, public URL): [https://buy.stripe.com/your-link]

## Brand look
- Accent gradient start (blue in the template): [#2563EB]
- Accent gradient middle: [#4F46E5]
- Accent gradient end (magenta in the template): [#D946EF]
- Default theme: [light] (light, dark, or system = follow the visitor's OS)
- Show the light/dark toggle in the header: [yes]
- Intro loader on first visit: [on]

## Booking
- Intro call label: [Book a 15-min intro call]
- Booking link (Cal.com, Calendly, SavvyCal): [https://cal.com/your-name/intro]
- Host name and role shown under the calendar: [Nadia Brooks], [Head of copy]
- Time zone label: [GMT]
- Days with availability: [Mon–Fri]

## Social proof
- Claim under the avatar arc, one word in italic: [120+ brands sounding *sharper*, sooner.]
- Trusted-by names (6 to 8, only real clients if you have permission): [Fernhill], [Northpine], [Orbitly], [Tidewell], [Marlowe], [Kestrel], [Ashgrove], [Halcyon]

## Testimonials (7; real, permissioned quotes only)
1. [Name], [Role, Company]: "[Quote]"
2. [Name], [Role, Company]: "[Quote]"
3. [Name], [Role, Company]: "[Quote]"
4. [Name], [Role, Company]: "[Quote]"
5. [Name], [Role, Company]: "[Quote]"
6. [Name], [Role, Company]: "[Quote]"
7. [Name], [Role, Company]: "[Quote]"

## FAQ (6 to 8)
- [Question] — [Answer]
- [Question] — [Answer]
- [Question] — [Answer]
- [Question] — [Answer]
- [Question] — [Answer]
- [Question] — [Answer]

## Footer
- Footer headline, one word italic: [Good copy *shouldn't* be hard to get.]
- Footer sub-copy: [Book a quick call for a clear look at how we work.]
- Privacy Policy URL: [https://youragency.com/privacy]
- Terms URL: [https://youragency.com/terms]
- "Made by Vibe Templates" footer badge: [on] (on / off)

## Blog
- Keep the 7 sample posts: [yes / no — if no, list titles to write]
- Author label on cards: [Your Agency]
- Newsletter card on /blog: [on]
