Create a high-quality, responsive marketing landing page for a physical hardware product called "Bookmarkr". The design should be elegant, literary, and modern, using a specific "Paper and Ink" aesthetic.
1. Design System & Styling:
- Background: Off-white "Paper" color (#fdfbf7).
- Text: Dark "Ink" color (#2d2a26).
- Primary Accent: "Leather" Brown (#8c5e3c) for buttons and icons.
- Typography: Use "Libre Baskerville" (Serif) for Headings and "Inter" (Sans-serif) for body text.
- Framework: Tailwind CSS.
2. Layout Structure:
A. Navigation Bar:
- Logo on left: A Book icon + text "Bookmarkr".
- Center links: Features, How it Works, Pricing.
- Right button: "Pre-Order Now" (Dark background, white text, pill shape).
B. Hero Section (Split Layout):
- Left Column (Text):
- A small badge pill at the top: "New: Advanced AI Integration" (Light orange background).
- H1 Heading (Serif, Large): "Your Ultimate Reading Companion".
- Subtext: "Bookmarkr transforms any physical book into a smart, interactive experience. Clip it on, speak your thoughts, and track your reading journey instantly."
- Primary CTA Button: "Pre-order Device ($49)" (Leather brown background, white text, arrow icon on right).
- Right Column (Image):
C. Features Grid (Below Hero):
- A 3-column grid of cards. Each card should have a white background, rounded corners, and a subtle border.
- Card 1: Mic Icon (Blue accent). Title: "Voice Notes". Text: "Speak your thoughts while you read. Bookmarkr listens, transcribes, and tags your notes to the exact page number."
- Card 2: Brain Icon (Purple accent). Title: "Contextual AI". Text: "Forgot a character? Confused by a theme? Just ask. Bookmarkr uses AI to answer questions about your specific book."
- Card 3: Book Icon (Amber accent). Title: "Smart Sync". Text: "Your physical reading progress is instantly synced to your digital library. Never lose your page again."
