Galaxy

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Portfolio
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Galaxy (visual-style)
- Deep plum background with one static nebula near the illustration
- Large Syne display headings at 40-72px and readable DM Sans body text
- An elliptical orbital illustration with small star details
- Coral primary actions, lavender links, and restrained pale-gold details
- Opaque plum panels with varied widths and thin lavender borders
- Asymmetric composition with a clear mobile reading order

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #FFA18C, secondary #C4AEFF, accent #F8D983, background #110C23, text #FAF3FF
Typography: Syne for headings, DM Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #110C23;
  --tx-font-heading: "Syne", sans-serif;
  --tx-font-body: "DM Sans", sans-serif;
  --tx-surface-bg-image: radial-gradient(ellipse 35% 35% at 82% 22%, rgba(196,174,255,0.18), transparent 75%);
  --tx-card-bg: #211832;
  --tx-card-border: #68567E;
  --tx-card-border-width: 1px;
  --tx-card-radius: 1.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #C4AEFF;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #D5C5E5;
  --tx-text-subtle: #B9A4CC;
  --tx-link-color: #C4AEFF;
  --tx-button-radius: 0.75rem;
  --tx-input-bg: #110C23;
  --tx-input-border: #88709F;
  --tx-text: #FAF3FF;
  --tx-primary: #FFA18C;
  --tx-secondary: #C4AEFF;
  --tx-accent: #F8D983;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use an asymmetric two-column introduction with a large left-aligned heading and an orbital illustration on the right.
- Group work or features by importance. Use varied panel widths rather than repeating identical cards. Collapse to a continuous single-column reading order on phones.

## Interaction
- Use coral for primary actions and lavender for links. Keep controls on opaque surfaces and show keyboard focus with a clear outline.
- Limit slow rotation to the orbital illustration. Make motion optional and stop it for reduced motion. Use a static nebula background.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Galaxy: Dense operational dashboards, clinical interfaces, or long articles that need a neutral background.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.