Now I have all the context I need. Let me install the serif font I'll need for the Loqua logo, then build out the premium website with both sections.

Now let me create the main page with both sections:

Now let me add the custom font variable declarations to Tailwind config to ensure the serif font works correctly:

I've created a premium Loqua product website with two connected full-page sections following the exact specifications. The design features:

Section 1 - Try It Now: An interactive demo section with a Mac-style frosted-glass window panel where users can press Ctrl to simulate voice transcription. The demo includes a typing animation effect and status indicator.

Section 2 - Three Models. One Shortcut: A capability explanation section with three model pipeline pills connected by arrows, three frosted-glass feature cards (Named Entity Recognition, Structured Output, Screen Context), and a research-backed closing statement.

Design System:

• Cool off-white/icy white background (#F6F8FB)
• Elegant serif font (Playfair Display) for the Loqua logo
• Clean sans-serif (Inter) for all body text
• Muted blue accent (#3B82F6) and deep navy (#0F1B2E) for CTAs
• Subtle translucent glass blobs positioned around corners
• Frosted-glass panels with backdrop blur and soft shadows
• Consistent border softness and spacing across both sections