# Landing Page

A professional, high-performance landing page designed for a dual-purpose automotive business (parts retail and mechanical servicing). The site features a clean, "Inter" font-driven aesthetic with a bold red-and-dark-grey color palette.

## Core Features

 * Bilingual Support (RO/EN): Full site translation between Romanian and English using a data-attribute-driven JavaScript system.
 * Smart Language Detection: Automatically detects the user’s browser language on first visit and remembers preferences via localStorage.
 * Optimized Mobile Experience: Fully responsive grid system that collapses into a single-column stack for mobile devices.
 * Conversion-Focused UI:
    * Prominent Hero CTA buttons.
    * Custom-built Phone Selection Modal to direct users to specific service lines.
    * "Tap-to-call" and "Tap-to-email" integration for mobile users.
    * Dynamic Elements: Auto-updating copyright year and smooth "fade-in" transitions for translated text to prevent "Flash of Unstyled Content" (FOUC).

## Technical Stack

 * HTML5/CSS3: Utilizes CSS Variables for easy branding updates and a CSS Grid/Flexbox layout.
 * JavaScript (Vanilla): Lightweight script handles the modal logic and the translation engine without external dependencies.
 * Google Fonts: Integrated "Inter" typeface with multiple weights (400, 700, 900).

## File Structure

 * [index.html](index.html): The semantic structure containing both English and Romanian strings in data- attributes.
 * [style.css](style.css): Modern styling including a "glassmorphism" modal overlay and responsive media queries.
 * [assets/](assets/): Recommended directory for the company logo and favicon.

## Setup & Customization

 1. Map Integration: Update the iframe src attributes in the contact-info section with your specific Google Maps embed codes.
 2. Contact Details: Replace the phone numbers and email address in both the contact-details and modal-overlay sections.
 3. Images: The hero background is currently linked to a high-quality Unsplash image; this can be swapped in style.css under the .hero class.