diff --git a/.superdesign/design_iterations/romfast_soft_professional.html b/.superdesign/design_iterations/romfast_soft_professional.html
new file mode 100644
index 0000000..f4755ba
--- /dev/null
+++ b/.superdesign/design_iterations/romfast_soft_professional.html
@@ -0,0 +1,793 @@
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Romfast - Program de Contabilitate, Gestiune, Resurse Umane, Imobilizari, Salarizare. Sisteme Informatice pentru Contabilitate.</title>
+    <meta name="description" content="Romfast produce si implementeaza ROA - Romfast Applications, un sistem informatic ERP pentru managementul afacerii: contabilitate, gestiune, salarizare, service auto, HORECA.">
+    <meta name="keywords" content="program service auto, program contabilitate, gestiune, salarii, facturare, mijloace fixe, productie, roa, romfast, soft contabilitate, sistem informatic erp, program restaurant, program hotel, suport tehnic, implementare erp">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <style>
+        /* Soft Professional Blue Theme - Gentle & Attenuated Colors */
+        :root {
+            /* Soft Professional Color Palette - Reduced Saturation 40-50% */
+            --executive-navy: #2c3e50;             /* Softer navy foundation */
+            --soft-professional-blue: #5288c4;    /* Much lighter than #1565c0 - primary soft blue */
+            --gentle-trust-blue: #4a7ba7;         /* Softer than #0d47a1 - gentle trust */
+            --muted-accent-red: #b85555;           /* Much softer than #c62828 - muted red */
+            --soft-executive-white: #fafbfc;      /* Clean background maintained */
+            
+            /* Soft Professional Design System */
+            --background: #fafbfc !important;                   /* Soft executive white background */
+            --foreground: #2c3e50 !important;                  /* Soft executive navy for text */
+            --card: #ffffff !important;                         /* Pure white cards */
+            --card-foreground: #2c3e50 !important;             /* Soft executive navy text */
+            --card-hover: #f8f9fa !important;                  /* Very light hover */
+            
+            --primary: #5288c4 !important;                     /* Soft professional blue primary */
+            --primary-foreground: #ffffff !important;          /* White text on primary */
+            --secondary: #4a7ba7 !important;                   /* Gentle trust blue secondary */
+            --secondary-foreground: #ffffff !important;        /* White text on secondary */
+            
+            --accent: #b85555 !important;                      /* Muted accent red for attention */
+            --accent-foreground: #ffffff !important;           /* White text on accent */
+            
+            --muted: #f5f6f7 !important;                       /* Light gray muted */
+            --muted-foreground: #2c3e50 !important;            /* Soft executive navy muted text */
+            
+            --border: #e8f2ff !important;                      /* Very light blue border */
+            --input: #ffffff !important;                       /* White input background */
+            --ring: #5288c4 !important;                        /* Soft professional blue focus ring */
+            
+            /* Soft Professional Gradients - Gentle & Muted */
+            --navbar-bg: linear-gradient(135deg, #2c3e50, #4a7ba7) !important;               /* Soft navy to gentle trust blue */
+            --hero-gradient: linear-gradient(180deg, #fafbfc, #ffffff) !important;           /* Soft executive white to pure white */
+            --button-gradient: linear-gradient(90deg, #5288c4, #4a7ba7) !important;          /* Soft professional blue to gentle trust blue */
+            --red-gradient: linear-gradient(90deg, #b85555, #c67b7b) !important;             /* Muted red accent gradient */
+            
+            /* Typography - Professional and trustworthy */
+            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+            --font-serif: 'Merriweather', Georgia, serif !important;
+            --font-mono: 'JetBrains Mono', monospace !important;
+            
+            /* Professional rounded corners */
+            --radius: 8px !important;
+            --radius-sm: 4px !important;
+            --radius-md: 6px !important;
+            --radius-lg: 12px !important;
+            --radius-xl: 16px !important;
+            
+            /* Soft professional shadows with reduced opacity - Gentle blue shadows */
+            --shadow-2xs: 0 1px 3px 0px rgba(82, 136, 196, 0.03) !important;
+            --shadow-xs: 0 2px 6px 0px rgba(82, 136, 196, 0.04) !important;
+            --shadow-sm: 0 3px 10px 0px rgba(82, 136, 196, 0.05), 0 1px 2px 0px rgba(82, 136, 196, 0.02) !important;
+            --shadow: 0 4px 16px 0px rgba(82, 136, 196, 0.06), 0 2px 4px 0px rgba(82, 136, 196, 0.03) !important;
+            --shadow-md: 0 6px 20px 0px rgba(82, 136, 196, 0.08), 0 3px 6px 0px rgba(82, 136, 196, 0.04) !important;
+            --shadow-lg: 0 8px 28px 0px rgba(82, 136, 196, 0.10), 0 4px 8px 0px rgba(82, 136, 196, 0.05) !important;
+            --shadow-xl: 0 12px 36px 0px rgba(82, 136, 196, 0.12), 0 6px 12px 0px rgba(82, 136, 196, 0.06) !important;
+            --shadow-2xl: 0 16px 48px 0px rgba(82, 136, 196, 0.16) !important;
+            
+            /* Conservative spacing */
+            --spacing: 0.375rem !important;
+            --tracking-normal: -0.01em !important;
+        }
+
+        /* Soft Professional Custom Styles */
+        body {
+            font-family: var(--font-sans) !important;
+            background: var(--background) !important;
+            color: var(--foreground) !important;
+            letter-spacing: var(--tracking-normal) !important;
+            line-height: 1.6 !important;
+        }
+        
+        /* Professional card styling with soft blue accents */
+        .professional-card {
+            background: var(--card) !important;
+            border: 1px solid var(--border) !important;
+            border-radius: var(--radius) !important;
+            box-shadow: var(--shadow) !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            position: relative !important;
+            overflow: hidden !important;
+        }
+        
+        .professional-card::before {
+            content: '' !important;
+            position: absolute !important;
+            top: -1px !important;
+            left: -1px !important;
+            right: -1px !important;
+            bottom: -1px !important;
+            background: var(--button-gradient) !important;
+            border-radius: var(--radius) !important;
+            z-index: -1 !important;
+            opacity: 0 !important;
+            transition: opacity 0.3s ease !important;
+        }
+        
+        .professional-card:hover {
+            background: var(--card-hover) !important;
+            box-shadow: var(--shadow-lg) !important;
+            transform: translateY(-4px) !important;
+            border-color: transparent !important;
+        }
+        
+        .professional-card:hover::before {
+            opacity: 1 !important;
+        }
+        
+        /* Soft professional blue buttons */
+        .professional-btn-primary {
+            background: var(--button-gradient) !important;
+            color: var(--primary-foreground) !important;
+            border-radius: var(--radius-lg) !important;
+            border: none !important;
+            box-shadow: var(--shadow-sm) !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            position: relative !important;
+            overflow: hidden !important;
+            font-weight: 600 !important;
+        }
+        
+        .professional-btn-primary::before {
+            content: '' !important;
+            position: absolute !important;
+            top: 0 !important;
+            left: -100% !important;
+            width: 100% !important;
+            height: 100% !important;
+            background: var(--red-gradient) !important;
+            transition: left 0.3s ease !important;
+        }
+        
+        .professional-btn-primary:hover::before {
+            left: 0 !important;
+        }
+        
+        .professional-btn-primary:hover {
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-1px) !important;
+        }
+        
+        .professional-btn-primary span {
+            position: relative !important;
+            z-index: 1 !important;
+        }
+        
+        .professional-btn-secondary {
+            background: var(--card) !important;
+            color: var(--primary) !important;
+            border: 2px solid var(--primary) !important;
+            border-radius: var(--radius-lg) !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            font-weight: 500 !important;
+            position: relative !important;
+            overflow: hidden !important;
+        }
+        
+        .professional-btn-secondary::before {
+            content: '' !important;
+            position: absolute !important;
+            top: 0 !important;
+            left: 0 !important;
+            width: 0 !important;
+            height: 100% !important;
+            background: var(--primary) !important;
+            transition: width 0.3s ease !important;
+            z-index: 0 !important;
+        }
+        
+        .professional-btn-secondary:hover {
+            color: var(--primary-foreground) !important;
+            border-color: var(--primary) !important;
+            transform: translateY(-1px) !important;
+        }
+        
+        .professional-btn-secondary:hover::before {
+            width: 100% !important;
+        }
+        
+        .professional-btn-secondary span {
+            position: relative !important;
+            z-index: 1 !important;
+        }
+        
+        /* Muted red accent button for urgent actions */
+        .professional-btn-urgent {
+            background: var(--red-gradient) !important;
+            color: var(--accent-foreground) !important;
+            border-radius: var(--radius-lg) !important;
+            border: none !important;
+            box-shadow: var(--shadow-sm) !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            font-weight: 600 !important;
+        }
+        
+        .professional-btn-urgent:hover {
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-1px) !important;
+            filter: brightness(1.05) !important;
+        }
+        
+        /* Professional navbar with soft gradient */
+        .professional-navbar {
+            background: var(--navbar-bg) !important;
+            backdrop-filter: blur(12px) !important;
+            border-bottom: 1px solid var(--border) !important;
+        }
+        
+        /* Hero section with soft professional styling */
+        .professional-hero {
+            background: var(--hero-gradient) !important;
+            border-radius: var(--radius-xl) !important;
+            padding: 4rem 2rem !important;
+            margin-bottom: 4rem !important;
+            border: 1px solid var(--border) !important;
+            position: relative !important;
+            overflow: hidden !important;
+        }
+        
+        .professional-hero::before {
+            content: '' !important;
+            position: absolute !important;
+            top: -50% !important;
+            left: -50% !important;
+            width: 200% !important;
+            height: 200% !important;
+            background: radial-gradient(circle, rgba(82, 136, 196, 0.03) 0%, transparent 50%) !important;
+            opacity: 0.5 !important;
+            animation: subtle-float 12s ease-in-out infinite !important;
+        }
+        
+        @keyframes subtle-float {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            50% { transform: translate(20px, -20px) rotate(180deg); }
+        }
+        
+        
+        /* Professional support section */
+        .professional-support {
+            background: var(--muted) !important;
+            border: 1px solid var(--border) !important;
+            border-radius: var(--radius-xl) !important;
+            padding: 3rem !important;
+            position: relative !important;
+        }
+        
+        /* Professional icon containers with soft blue themes */
+        .professional-icon-wrapper {
+            width: 80px !important;
+            height: 80px !important;
+            background: var(--button-gradient) !important;
+            border-radius: var(--radius-lg) !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            margin: 0 auto 1.5rem auto !important;
+            box-shadow: var(--shadow-md) !important;
+            transition: all 0.3s ease !important;
+            position: relative !important;
+            overflow: hidden !important;
+        }
+        
+        .professional-icon-wrapper::before {
+            content: '' !important;
+            position: absolute !important;
+            top: -50% !important;
+            left: -50% !important;
+            width: 200% !important;
+            height: 200% !important;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 30%, transparent 70%) !important;
+            opacity: 0 !important;
+            transition: opacity 0.3s ease !important;
+        }
+        
+        .professional-card:hover .professional-icon-wrapper::before {
+            opacity: 1 !important;
+        }
+        
+        /* Logo styling */
+        .romfast-logo {
+            height: 60px !important;
+            filter: brightness(1.05) contrast(1.05) !important;
+        }
+        
+        /* Enhanced typography */
+        h1, h2, h3 {
+            font-weight: 700 !important;
+            letter-spacing: -0.02em !important;
+            line-height: 1.2 !important;
+        }
+        
+        /* Soft professional text colors */
+        .professional-text-primary {
+            color: var(--foreground) !important;
+        }
+        
+        .professional-text-secondary {
+            color: var(--muted-foreground) !important;
+        }
+        
+        /* Special featured card (ROA AUTO) - Muted red accent styling */
+        .professional-card-featured {
+            background: var(--card) !important;
+            border: 2px solid var(--accent) !important;
+            box-shadow: var(--shadow-xl) !important;
+        }
+        
+        .professional-card-featured .professional-icon-wrapper {
+            background: var(--red-gradient) !important;
+        }
+        
+        /* Muted red bullet points for ROA AUTO problems */
+        .red-bullet {
+            color: var(--accent) !important;
+        }
+        
+        /* Enhanced hover effects for support cards */
+        .professional-support-card {
+            background: var(--card) !important;
+            border: 1px solid var(--border) !important;
+            border-radius: var(--radius) !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            padding: 2rem !important;
+        }
+        
+        .professional-support-card:hover {
+            box-shadow: var(--shadow-lg) !important;
+            transform: translateY(-2px) !important;
+            border-color: var(--primary) !important;
+        }
+        
+        /* Soft blue hover states for navigation */
+        .nav-link {
+            transition: color 0.3s ease !important;
+        }
+        
+        .nav-link:hover {
+            color: #90caf9 !important; /* Gentle blue hover - softer than original */
+        }
+        
+        /* Professional service sections with soft blue accents */
+        .service-technology {
+            background: linear-gradient(135deg, rgba(82, 136, 196, 0.03), rgba(74, 123, 167, 0.03)) !important;
+            border-left: 4px solid var(--primary) !important;
+            padding: 1.5rem !important;
+            border-radius: var(--radius) !important;
+        }
+        
+        .service-reliability {
+            background: linear-gradient(135deg, rgba(74, 123, 167, 0.03), rgba(82, 136, 196, 0.03)) !important;
+            border-left: 4px solid var(--secondary) !important;
+            padding: 1.5rem !important;
+            border-radius: var(--radius) !important;
+        }
+        
+        /* Dark mode adjustments for soft professional blue theme */
+        .dark-mode {
+            --background: #141822 !important;
+            --foreground: #e2e8f0 !important;
+            --card: #1e2235 !important;
+            --card-foreground: #e2e8f0 !important;
+            --card-hover: #252a3e !important;
+            --muted: #252a3e !important;
+            --muted-foreground: #94a3b8 !important;
+            --border: #334155 !important;
+            --input: #1e2235 !important;
+            --navbar-bg: linear-gradient(135deg, #0f172a, #1e293b) !important;
+            --hero-gradient: linear-gradient(180deg, #1e2235, #141822) !important;
+        }
+        
+        .dark-mode .professional-text-primary {
+            color: var(--foreground) !important;
+        }
+        
+        .dark-mode .professional-text-secondary {
+            color: var(--muted-foreground) !important;
+        }
+        
+        /* Mobile responsiveness for soft professional design */
+        @media (max-width: 768px) {
+            .professional-hero {
+                padding: 2rem 1.5rem !important;
+                border-radius: var(--radius-lg) !important;
+            }
+            
+            .professional-card {
+                border-radius: var(--radius-md) !important;
+            }
+            
+            .professional-btn-primary,
+            .professional-btn-secondary,
+            .professional-btn-urgent {
+                border-radius: var(--radius) !important;
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
+                    </div>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Soft Professional Blue Hero Section -->
+        <section class="professional-hero text-center">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA - Romfast Applications
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Un sistem informatic complex de tip ERP destinat companiilor medii si mari, 
+                    flexibil si capabil sa raspunda necesitatilor de dezvoltare.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <button class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Descopera ROA</span>
+                    </button>
+                    <button class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Vezi Demo</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Soft Professional Blue Card Grid Layout -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Solutii Complete pentru Afacerea Ta</h2>
+            
+            <!-- First Row - Main Services -->
+            <div class="grid md:grid-cols-3 gap-8 mb-8 stagger-container">
+                <!-- ROA ERP Card - Technology Focus -->
+                <div class="professional-card service-technology p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="database" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">ROA ERP</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Sistem complet de management al afacerii: contabilitate, gestiune, resurse umane si salarizare.
+                    </p>
+                    <button class="professional-btn-secondary px-6 py-3 w-full">
+                        <span>Mai multe detalii</span>
+                    </button>
+                </div>
+                
+                <!-- ROA AUTO Card - Featured with muted red accents for urgent problems -->
+                <div class="professional-card professional-card-featured p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="wrench" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">ROA AUTO</h3>
+                    <ul class="text-left professional-text-secondary mb-6 space-y-2">
+                        <li class="flex items-start space-x-2">
+                            <span class="red-bullet">🔧</span>
+                            <span>Factura, bonul fiscal si inregistrarea in contabilitate dureaza mai mult de 1 minut?</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="red-bullet">🔧</span>
+                            <span>Clientii asteapta prea mult la receptie pentru un deviz estimativ?</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="red-bullet">🔧</span>
+                            <span>Seful de service pregateste manual rapoartele de manopera?</span>
+                        </li>
+                    </ul>
+                    <button class="professional-btn-urgent px-6 py-3 w-full">
+                        <span>Eficientizeaza serviciul!</span>
+                    </button>
+                </div>
+                
+                <!-- ROA HORECA Card -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="utensils" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">ROA HORECA</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Solutii complete pentru restaurante si hoteluri: comenzi, rezervari, gestiune si facturare.
+                    </p>
+                    <button class="professional-btn-secondary px-6 py-3 w-full">
+                        <span>Afla mai mult</span>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Second Row - Services with reliability focus -->
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Implementare Card - Reliability Focus -->
+                <div class="professional-card service-reliability p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="settings" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Implementare</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Servicii complete de implementare si configurare a sistemelor ERP adaptate necesitatilor tale.
+                    </p>
+                    <button class="professional-btn-secondary px-6 py-3 w-full">
+                        <span>Servicii implementare</span>
+                    </button>
+                </div>
+                
+                <!-- Suport Tehnic Card - Reliability Focus -->
+                <div class="professional-card service-reliability p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="headphones" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Suport Tehnic</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Echipa noastra de specialisti iti ofera suport continuu pentru utilizarea optima a sistemelor.
+                    </p>
+                    <button class="professional-btn-secondary px-6 py-3 w-full">
+                        <span>Contacteaza suportul</span>
+                    </button>
+                </div>
+                
+                <!-- Analiza Card - Technology Focus -->
+                <div class="professional-card service-technology p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="bar-chart-3" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Analiza si Consultanta</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Evaluam procesele actuale si recomandam cele mai potrivite solutii pentru optimizarea afacerii.
+                    </p>
+                    <button class="professional-btn-secondary px-6 py-3 w-full">
+                        <span>Programeaza consultanta</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Professional Support Tools Section -->
+        <section class="professional-support text-center mb-16">
+            <h2 class="text-2xl font-bold mb-8 professional-text-primary">Instrumente de Suport</h2>
+            <div class="grid sm:grid-cols-3 gap-6">
+                <div class="professional-support-card">
+                    <i data-lucide="download" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Romfast Suport</h3>
+                    <button class="professional-btn-secondary px-6 py-2 w-full">
+                        <span>Descarca</span>
+                    </button>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="monitor" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
+                    <button class="professional-btn-secondary px-6 py-2 w-full">
+                        <span>Acceseaza</span>
+                    </button>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="video" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
+                    <button class="professional-btn-secondary px-6 py-2 w-full">
+                        <span>Acceseaza</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+        
+        // Enhanced theme toggle functionality
+        const themeToggle = document.getElementById('theme-toggle');
+        const body = document.body;
+        
+        // Check for saved theme preference or default to light mode
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        if (currentTheme === 'dark') {
+            body.classList.add('dark-mode');
+            themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
+        }
+        
+        themeToggle.addEventListener('click', () => {
+            body.classList.toggle('dark-mode');
+            
+            // Update icon and save preference
+            if (body.classList.contains('dark-mode')) {
+                themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
+                localStorage.setItem('theme', 'dark');
+            } else {
+                themeToggle.innerHTML = '<i data-lucide="sun" class="w-5 h-5"></i>';
+                localStorage.setItem('theme', 'light');
+            }
+            
+            // Reinitialize icons after DOM change
+            lucide.createIcons();
+        });
+        
+        // Enhanced smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+        
+        // Professional card hover animations
+        document.querySelectorAll('.professional-card').forEach(card => {
+            card.addEventListener('mouseenter', (e) => {
+                const rect = card.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                const mouseX = e.clientX;
+                const mouseY = e.clientY;
+                
+                const deltaX = (mouseX - centerX) * 0.05;
+                const deltaY = (mouseY - centerY) * 0.05;
+                
+                card.style.transform = `translateY(-4px) rotateX(${-deltaY}deg) rotateY(${deltaX}deg)`;
+            });
+            
+            card.addEventListener('mouseleave', () => {
+                card.style.transform = 'translateY(0) rotateX(0deg) rotateY(0deg)';
+            });
+        });
+        
+        // Intersection Observer for scroll animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+        
+        // Apply scroll animations to cards
+        document.querySelectorAll('.professional-card').forEach((card, index) => {
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(20px)';
+            card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+            observer.observe(card);
+        });
+        
+        // Subtle floating animation for hero background
+        const hero = document.querySelector('.professional-hero');
+        if (hero) {
+            let mouseX = 0;
+            let mouseY = 0;
+            
+            hero.addEventListener('mousemove', (e) => {
+                const rect = hero.getBoundingClientRect();
+                mouseX = (e.clientX - rect.left) / rect.width;
+                mouseY = (e.clientY - rect.top) / rect.height;
+                
+                const translateX = (mouseX - 0.5) * 10;
+                const translateY = (mouseY - 0.5) * 10;
+                hero.style.setProperty('--mouse-x', `${translateX}px`);
+                hero.style.setProperty('--mouse-y', `${translateY}px`);
+            });
+        }
+        
+        // Professional button interactions with enhanced effects
+        document.querySelectorAll('.professional-btn-primary, .professional-btn-secondary, .professional-btn-urgent').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const ripple = document.createElement('div');
+                const rect = btn.getBoundingClientRect();
+                const size = Math.max(rect.width, rect.height);
+                const x = e.clientX - rect.left - size / 2;
+                const y = e.clientY - rect.top - size / 2;
+                
+                ripple.style.cssText = `
+                    position: absolute;
+                    border-radius: 50%;
+                    background: rgba(255, 255, 255, 0.4);
+                    width: ${size}px;
+                    height: ${size}px;
+                    left: ${x}px;
+                    top: ${y}px;
+                    animation: ripple 0.5s linear;
+                    pointer-events: none;
+                `;
+                
+                btn.style.position = 'relative';
+                btn.style.overflow = 'hidden';
+                btn.appendChild(ripple);
+                
+                setTimeout(() => {
+                    ripple.remove();
+                }, 500);
+            });
+        });
+        
+        // Add ripple animation keyframes
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes ripple {
+                to {
+                    transform: scale(3);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.superdesign/images/romfast_logo.png b/.superdesign/images/romfast_logo.png
new file mode 100644
index 0000000..23a0e33
Binary files /dev/null and b/.superdesign/images/romfast_logo.png differ
diff --git a/menu/alteservicii.html b/menu/alteservicii.html
index 5958c3b..b5b724e 100644
--- a/menu/alteservicii.html
+++ b/menu/alteservicii.html
@@ -3,148 +3,217 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Servicii - Alte Servicii</title>
+    <title>Servicii - Alte Servicii | Romfast - Sisteme Informatice ERP</title>
     <meta name="description" content="Pe langa productia de software, Romfast ofera o gama completa de servicii auxiliare: analiza, implementare, suport tehnic si instruirea personalului.">
-    <meta name="keywords" content="servicii it, consultanta it, instruire software, training erp, romfast">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <meta name="keywords" content="servicii it, consultanta it, instruire software, training erp, romfast, servicii auxiliare, analiza business, implementare erp">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle active" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item active" href="alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link text-blue-200">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 bg-blue-50 text-blue-800 rounded-b-lg font-medium">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <div class="row justify-content-center">
-            <div class="col-lg-8">
-                <h1 class="mb-4">Alte Servicii</h1>
-                <p class="lead">Ca si in multe alte domenii, industria de IT-software inglobeaza, in afara de tehnologie moderna, o cantitate deosebita de munca depusa de oameni, exprimata in servicii auxiliare productiei si vanzarii aplicatiilor informatice.</p>
-                <p>Serviciile acordate de oameni calificati sunt deosebit de pretioase si extrem de utile in acelasi timp.</p>
-                <hr class="my-4">
-                <p>Echipa Romfast este pregatita pentru o gama completa de servicii, incluzand:</p>
-                <div class="card">
-                    <div class="card-body">
-                        <ul class="list-unstyled mb-0">
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i>Analiza de business si de sistem</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i>Managementul proiectului de implementare</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i>Suport tehnic post-implementare</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i>Instruirea personalului beneficiarului</li>
-                            <li class="mb-0"><i class="bi bi-check-circle-fill text-primary me-2"></i>Alte activitati ocazionate de implementarea aplicatiilor Romfast.</li>
-                        </ul>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-6xl">
+        
+        <!-- Professional Page Header -->
+        <section class="professional-hero text-center mb-12">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Alte Servicii
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Pe lângă producția de software, Romfast oferă o gamă completă de servicii auxiliare pentru implementarea și utilizarea optimă a aplicațiilor informatice.
+                </p>
+            </div>
+        </section>
+
+        <!-- Professional Content Section -->
+        <section class="mb-16">
+            <div class="grid md:grid-cols-1 gap-8 max-w-4xl mx-auto">
+                
+                <!-- Main Content Card -->
+                <div class="professional-card p-8">
+                    <div class="prose prose-lg max-w-none professional-text-secondary">
+                        <p class="text-lg mb-6 leading-relaxed">
+                            Ca și în multe alte domenii, industria de IT-software înglobează, în afara de tehnologie modernă, o cantitate deosebită de muncă depusă de oameni, exprimată în servicii auxiliare producției și vânzării aplicațiilor informatice.
+                        </p>
+                        
+                        <p class="text-lg mb-8 leading-relaxed">
+                            Serviciile acordate de oameni calificați sunt deosebit de prețioase și extrem de utile în același timp.
+                        </p>
+                        
+                        <div class="border-l-4 border-blue-500 pl-6 mb-8">
+                            <p class="text-lg professional-text-primary font-medium">
+                                Echipa Romfast este pregătită pentru o gamă completă de servicii, incluzând:
+                            </p>
+                        </div>
                     </div>
                 </div>
+                
+                <!-- Services Grid -->
+                <div class="grid md:grid-cols-2 gap-6">
+                    
+                    <!-- Service 1 -->
+                    <div class="professional-card service-technology p-6">
+                        <div class="flex items-center justify-center mb-4">
+                            <div class="professional-icon-wrapper w-16 h-16">
+                                <i data-lucide="search" class="w-8 h-8 text-white"></i>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary text-center">Analiză de Business și de Sistem</h3>
+                        <p class="professional-text-secondary text-center leading-relaxed">
+                            Analiză detaliată a proceselor de afaceri și identificarea celor mai potrivite soluții informatice pentru optimizarea activității.
+                        </p>
+                    </div>
+                    
+                    <!-- Service 2 -->
+                    <div class="professional-card service-reliability p-6">
+                        <div class="flex items-center justify-center mb-4">
+                            <div class="professional-icon-wrapper w-16 h-16">
+                                <i data-lucide="settings" class="w-8 h-8 text-white"></i>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary text-center">Managementul Proiectului de Implementare</h3>
+                        <p class="professional-text-secondary text-center leading-relaxed">
+                            Coordonarea și supervizarea tuturor etapelor de implementare pentru asigurarea succesului proiectului.
+                        </p>
+                    </div>
+                    
+                    <!-- Service 3 -->
+                    <div class="professional-card service-technology p-6">
+                        <div class="flex items-center justify-center mb-4">
+                            <div class="professional-icon-wrapper w-16 h-16">
+                                <i data-lucide="headphones" class="w-8 h-8 text-white"></i>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary text-center">Suport Tehnic Post-implementare</h3>
+                        <p class="professional-text-secondary text-center leading-relaxed">
+                            Asistență tehnică continuă pentru menținerea performanței optime a sistemelor implementate.
+                        </p>
+                    </div>
+                    
+                    <!-- Service 4 -->
+                    <div class="professional-card service-reliability p-6">
+                        <div class="flex items-center justify-center mb-4">
+                            <div class="professional-icon-wrapper w-16 h-16">
+                                <i data-lucide="users" class="w-8 h-8 text-white"></i>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary text-center">Instruirea Personalului Beneficiarului</h3>
+                        <p class="professional-text-secondary text-center leading-relaxed">
+                            Programe complete de training pentru utilizarea eficientă a sistemelor informatice implementate.
+                        </p>
+                    </div>
+                    
+                    <!-- Service 5 -->
+                    <div class="professional-card service-technology p-6 md:col-span-2">
+                        <div class="flex items-center justify-center mb-4">
+                            <div class="professional-icon-wrapper w-16 h-16">
+                                <i data-lucide="cog" class="w-8 h-8 text-white"></i>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary text-center">Alte Activități de Implementare</h3>
+                        <p class="professional-text-secondary text-center leading-relaxed max-w-2xl mx-auto">
+                            Servicii suplimentare personalizate, ocazionate de implementarea aplicațiilor Romfast, adaptate nevoilor specifice ale fiecărui client.
+                        </p>
+                    </div>
+                    
+                </div>
+                
+                <!-- Call to Action -->
+                <div class="professional-card p-8 text-center">
+                    <h2 class="text-2xl font-bold mb-4 professional-text-primary">Aveți nevoie de consultanță sau servicii auxiliare?</h2>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Contactați echipa noastră de specialiști pentru o evaluare gratuită și o ofertă personalizată.
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                        <a href="contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                            <span>Contactați-ne</span>
+                        </a>
+                        <a href="../roa/aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                            <span>Explorați ROA</span>
+                        </a>
+                    </div>
+                </div>
+                
             </div>
-        </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/menu/analiza.html b/menu/analiza.html
index b349807..ed8fe8d 100644
--- a/menu/analiza.html
+++ b/menu/analiza.html
@@ -3,178 +3,297 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Servicii - Analiza Implementare ERP</title>
+    <title>Servicii - Analiza Implementare ERP | Romfast</title>
     <meta name="description" content="Analiza este o etapa esentiala in procesul de implementare a unui sistem ERP. Descoperim si sistematizam necesitatile companiei pentru o implementare de succes.">
     <meta name="keywords" content="analiza erp, implementare erp, fluxuri informationale, consultanta it, romfast, servicii analiza, management">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle active" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item active" href="analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg bg-blue-50 text-blue-800 font-semibold">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <div class="row">
-            <div class="col-lg-8">
-                <h1 class="mb-4">Analiza: Fundamentul unei Implementari de Succes</h1>
-                <p class="lead">Analiza este o etapa esentiala in procesul de implementare. In faza de analiza preliminara se descopera si se sistematizeaza necesitatile de baza ale companiei beneficiare.</p>
-                
-                <img src="../images/own_research.jpg" alt="Analiza si cercetare" class="img-fluid rounded mb-4 shadow">
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Page Header Section -->
+        <section class="professional-hero text-center mb-12">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="search" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Analiza: Fundamentul unei Implementari de Succes
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Analiza este o etapa esentiala in procesul de implementare. In faza de analiza preliminara 
+                    se descopera si se sistematizeaza necesitatile de baza ale companiei beneficiare.
+                </p>
+            </div>
+        </section>
 
-                <p>In faza ulterioara, de analiza detaliata, se realizeaza studii amanuntite ale urmatoarelor:</p>
-                <ul>
-                    <li>Fluxurilor informationale</li>
-                    <li>Circuitelor documentelor</li>
-                    <li>Organigramei functionale</li>
-                    <li>Punctelor de decizie</li>
-                    <li>Elementelor specifice domeniului de activitate al companiei beneficiare.</li>
-                </ul>
-
-                <hr class="my-4">
-
-                <section>
-                    <h2 class="h4">Motivatia Implementarii</h2>
-                    <p>De cele mai multe ori, motivatia implementarii unui sistem informatic nou decurge din necesitatea transformarii sistemului informational al organizatiei. La un moment dat, aceasta necesitate ajunge o prioritate pentru conducere, din motive importante cum ar fi:</p>
+        <!-- Main Content Grid -->
+        <div class="grid lg:grid-cols-3 gap-8">
+            <!-- Main Content -->
+            <div class="lg:col-span-2">
+                <!-- Analysis Process Card -->
+                <div class="professional-card p-8 mb-8">
+                    <img src="../images/own_research.jpg" alt="Analiza si cercetare" class="w-full rounded-lg shadow-lg mb-6">
                     
-                    <ul class="list-group theme-list-group">
-                        <li class="list-group-item theme-list-group-item">Informatia nu circula suficient de repede, cu acuratete sau sufera fracturi in interiorul organizatiei.</li>
-                        <li class="list-group-item theme-list-group-item">Raspunsul organizatiei spre partenerii externi este lent, imprecis sau nesatisfacator.</li>
-                        <li class="list-group-item theme-list-group-item">Urmarirea activitatii se realizeaza anevoios, iar rapoartele de executie ajung cu intarziere.</li>
-                        <li class="list-group-item theme-list-group-item">Conducerea obtine cu greu rapoarte de sinteza si de evolutie in lipsa informatiilor complete si corelate in timp real.</li>
-                    </ul>
+                    <div class="prose max-w-none">
+                        <p class="text-lg professional-text-secondary leading-relaxed mb-6">
+                            In faza ulterioara, de analiza detaliata, se realizeaza studii amanuntite ale urmatoarelor:
+                        </p>
+                        
+                        <div class="grid md:grid-cols-2 gap-6 mb-8">
+                            <div class="professional-card service-technology p-6">
+                                <h3 class="text-lg font-semibold mb-4 professional-text-primary">Aspecte Analizate</h3>
+                                <ul class="space-y-3 professional-text-secondary">
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Fluxurilor informationale</span>
+                                    </li>
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Circuitelor documentelor</span>
+                                    </li>
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Organigramei functionale</span>
+                                    </li>
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Punctelor de decizie</span>
+                                    </li>
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Elementelor specifice domeniului de activitate</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="professional-card service-reliability p-6">
+                                <h3 class="text-lg font-semibold mb-4 professional-text-primary">Beneficii Analiza</h3>
+                                <ul class="space-y-3 professional-text-secondary">
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="target" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Identificarea necesitatilor reale</span>
+                                    </li>
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="lightbulb" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Optimizarea proceselor existente</span>
+                                    </li>
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="shield-check" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Reducerea riscurilor implementarii</span>
+                                    </li>
+                                    <li class="flex items-start space-x-3">
+                                        <i data-lucide="trending-up" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                        <span>Planificarea strategica</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
-                    <p class="mt-3"><strong>Pentru a crea premisele unei implementari reusite, in procesul de analiza trebuie nu numai sa identificam starea actuala a organizatiei beneficiare, dar si sa dam raspunsuri si solutii fezabile la probleme similare celor enuntate mai sus.</strong></p>
-                    <p>Echipa Romfast este specializata in parcurgerea acestor etape ce nu pot fi omise sau tratate cu superficialitate, fiind indispensabile unei implementari eficiente, de succes.</p>
-                </section>
+                <!-- Motivation Section -->
+                <div class="professional-card professional-card-featured p-8">
+                    <div class="flex items-center justify-center mb-6">
+                        <div class="professional-icon-wrapper">
+                            <i data-lucide="alert-triangle" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Motivatia Implementarii</h2>
+                    
+                    <p class="text-lg professional-text-secondary leading-relaxed mb-6">
+                        De cele mai multe ori, motivatia implementarii unui sistem informatic nou decurge din 
+                        necesitatea transformarii sistemului informational al organizatiei. La un moment dat, 
+                        aceasta necesitate ajunge o prioritate pentru conducere, din motive importante cum ar fi:
+                    </p>
+                    
+                    <div class="space-y-4 mb-8">
+                        <div class="flex items-start space-x-4 p-4 bg-red-50 rounded-lg border-l-4 border-red-400">
+                            <i data-lucide="alert-circle" class="w-6 h-6 text-red-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">
+                                Informatia nu circula suficient de repede, cu acuratete sau sufera fracturi in interiorul organizatiei.
+                            </p>
+                        </div>
+                        <div class="flex items-start space-x-4 p-4 bg-red-50 rounded-lg border-l-4 border-red-400">
+                            <i data-lucide="clock" class="w-6 h-6 text-red-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">
+                                Raspunsul organizatiei spre partenerii externi este lent, imprecis sau nesatisfacator.
+                            </p>
+                        </div>
+                        <div class="flex items-start space-x-4 p-4 bg-red-50 rounded-lg border-l-4 border-red-400">
+                            <i data-lucide="activity" class="w-6 h-6 text-red-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">
+                                Urmarirea activitatii se realizeaza anevoios, iar rapoartele de executie ajung cu intarziere.
+                            </p>
+                        </div>
+                        <div class="flex items-start space-x-4 p-4 bg-red-50 rounded-lg border-l-4 border-red-400">
+                            <i data-lucide="bar-chart" class="w-6 h-6 text-red-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">
+                                Conducerea obtine cu greu rapoarte de sinteza si de evolutie in lipsa informatiilor complete si corelate in timp real.
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-blue-50 p-6 rounded-lg border-l-4 border-blue-500 mb-6">
+                        <p class="professional-text-primary font-semibold text-lg leading-relaxed">
+                            Pentru a crea premisele unei implementari reusite, in procesul de analiza trebuie nu numai 
+                            sa identificam starea actuala a organizatiei beneficiare, dar si sa dam raspunsuri si solutii 
+                            fezabile la probleme similare celor enuntate mai sus.
+                        </p>
+                    </div>
+                    
+                    <p class="professional-text-secondary text-lg leading-relaxed">
+                        Echipa Romfast este specializata in parcurgerea acestor etape ce nu pot fi omise sau tratate cu 
+                        superficialitate, fiind indispensabile unei implementari eficiente, de succes.
+                    </p>
+                </div>
             </div>
 
-            <div class="col-lg-4">
-                <div class="card theme-card text-center">
-                    <div class="card-header">
-                        Testeaza ROA Online
+            <!-- Sidebar -->
+            <div class="lg:col-span-1">
+                <!-- ROA Demo Card -->
+                <div class="professional-card text-center p-8 mb-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="monitor" class="w-10 h-10 text-white"></i>
                     </div>
-                    <div class="card-body">
-                        <img src="../roa/images/roapac.gif" alt="Acceseaza ROA" class="img-fluid mb-3">
-                        <p class="card-text">Conecteaza-te la serverul nostru de demo pentru a testa capabilitatile sistemului ROA.</p>
-                        <a href="../servicii/acceseazaroaonline.html" class="btn btn-primary">Acceseaza ROA DEMO</a>
-                    </div>
-                    <div class="card-footer text-muted">
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Testeaza ROA Online</h3>
+                    <img src="../roa/images/roapac.gif" alt="Acceseaza ROA" class="w-full rounded-lg shadow-md mb-6">
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Conecteaza-te la serverul nostru de demo pentru a testa capabilitatile sistemului ROA.
+                    </p>
+                    <a href="../servicii/acceseazaroaonline.html" class="professional-btn-primary px-6 py-3 w-full inline-block">
+                        <span>Acceseaza ROA DEMO</span>
+                    </a>
+                    <p class="text-sm professional-text-secondary mt-4">
                         Pentru conectare se recomanda Internet Explorer
+                    </p>
+                </div>
+
+                <!-- Contact Card -->
+                <div class="professional-card service-technology text-center p-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="phone" class="w-10 h-10 text-white"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Contacteaza-ne</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Hai sa discutam despre necesitatile specifice ale companiei tale.
+                    </p>
+                    <a href="contact.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
+                        <span>Contact</span>
+                    </a>
                 </div>
             </div>
         </div>
+
+        <!-- Professional Support Tools Section -->
+        <section class="professional-support text-center mt-16">
+            <h2 class="text-2xl font-bold mb-8 professional-text-primary">Suport Tehnic</h2>
+            <div class="grid sm:grid-cols-3 gap-6">
+                <div class="professional-support-card">
+                    <i data-lucide="download" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Descarca Romfast Suport</h3>
+                    <a href="../romfastsuport/files/romfast_suport.exe" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Descarca</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="monitor" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
+                    <a href="http://www.ammyy.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Acceseaza</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="video" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
+                    <a href="https://www.teamviewer.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Acceseaza</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/menu/angajari.html b/menu/angajari.html
index 0c87c94..34787c9 100644
--- a/menu/angajari.html
+++ b/menu/angajari.html
@@ -6,151 +6,207 @@
     <title>Angajari - Alatura-te Echipei Romfast</title>
     <meta name="description" content="Informatii despre posturile libere in cadrul companiei Romfast. Contacteaza-ne pentru a afla mai multe despre oportunitatile de cariera.">
     <meta name="keywords" content="angajari it, cariere it, locuri de munca constanta, programator, consultant erp, romfast">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
+<body class="min-h-screen">
 
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link font-semibold">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <div class="row justify-content-center">
-            <div class="col-lg-8">
-                <h1 class="mb-4">Oportunitati de Cariera</h1>
-                <p class="lead">Suntem mereu in cautare de oameni talentati si pasionati pentru a se alatura echipei noastre. Pentru mai multe informatii despre posturile libere, va rugam sa ne contactati.</p>
-                
-                <div class="card mt-4">
-                    <div class="card-header h5">
-                        Date de Contact
-                    </div>
-                    <div class="card-body">
-                        <p><strong>Adresa:</strong><br>
-                        900673 Constanta, Bd. Mamaia Nr. 17</p>
-                        
-                        <p><strong>Telefon/Fax:</strong></p>
-                        <ul class="list-unstyled">
-                            <li>0241 / 541000 (Romtelecom)</li>
-                            <li>0372 / 780218 (Vodafone)</li>
-                            <li>0341 / 101578 (UPC)</li>
-                        </ul>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Hero Section for Careers -->
+        <section class="professional-hero text-center">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper mx-auto mb-6">
+                    <i data-lucide="users" class="w-10 h-10 text-white"></i>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Oportunitati de Cariera
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Suntem mereu in cautare de oameni talentati si pasionati pentru a se alatura echipei noastre. 
+                    Pentru mai multe informatii despre posturile libere, va rugam sa ne contactati.
+                </p>
+            </div>
+        </section>
 
-                        <p><strong>E-mail:</strong><br>
-                        <a href="mailto:office@romfast.ro">office@romfast.ro</a></p>
+        <!-- Career Information Section -->
+        <section class="mb-16">
+            <div class="max-w-4xl mx-auto">
+                <!-- Contact Information Card -->
+                <div class="professional-card p-8">
+                    <div class="flex items-center justify-center mb-6">
+                        <div class="professional-icon-wrapper">
+                            <i data-lucide="mail" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-8 professional-text-primary text-center">Date de Contact</h2>
+                    
+                    <div class="grid md:grid-cols-2 gap-8">
+                        <!-- Address Section -->
+                        <div class="space-y-6">
+                            <div>
+                                <div class="flex items-center space-x-3 mb-3">
+                                    <i data-lucide="map-pin" class="w-5 h-5 text-blue-600"></i>
+                                    <h3 class="text-lg font-semibold professional-text-primary">Adresa</h3>
+                                </div>
+                                <p class="professional-text-secondary ml-8">
+                                    900673 Constanta, Bd. Mamaia Nr. 17
+                                </p>
+                            </div>
+                            
+                            <div>
+                                <div class="flex items-center space-x-3 mb-3">
+                                    <i data-lucide="mail" class="w-5 h-5 text-blue-600"></i>
+                                    <h3 class="text-lg font-semibold professional-text-primary">E-mail</h3>
+                                </div>
+                                <p class="professional-text-secondary ml-8">
+                                    <a href="mailto:office@romfast.ro" class="text-blue-600 hover:text-blue-800 transition-colors">office@romfast.ro</a>
+                                </p>
+                            </div>
+                        </div>
+                        
+                        <!-- Phone Section -->
+                        <div>
+                            <div class="flex items-center space-x-3 mb-3">
+                                <i data-lucide="phone" class="w-5 h-5 text-blue-600"></i>
+                                <h3 class="text-lg font-semibold professional-text-primary">Telefon/Fax</h3>
+                            </div>
+                            <div class="ml-8 space-y-2">
+                                <p class="professional-text-secondary">0241 / 541000 (Romtelecom)</p>
+                                <p class="professional-text-secondary">0372 / 780218 (Vodafone)</p>
+                                <p class="professional-text-secondary">0341 / 101578 (UPC)</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Call to Action -->
+                    <div class="text-center mt-8">
+                        <a href="mailto:office@romfast.ro" class="professional-btn-primary px-8 py-4 text-lg inline-block">
+                            <span>Contacteaza-ne pentru Oportunități de Cariera</span>
+                        </a>
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
+
+        <!-- Career Opportunities Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">De ce să lucrezi cu noi?</h2>
+            
+            <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <!-- Innovation Card -->
+                <div class="professional-card service-technology p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="lightbulb" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Inovație Continuă</h3>
+                    <p class="professional-text-secondary leading-relaxed">
+                        Lucrăm cu tehnologii moderne pentru dezvoltarea sistemelor ERP ROA și oferim oportunități de creștere profesională.
+                    </p>
+                </div>
+                
+                <!-- Team Card -->
+                <div class="professional-card service-reliability p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="heart" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Echipă Unită</h3>
+                    <p class="professional-text-secondary leading-relaxed">
+                        Facem parte dintr-o echipă solidară, cu experiență de peste 25 de ani în domeniul sistemelor informatice.
+                    </p>
+                </div>
+                
+                <!-- Growth Card -->
+                <div class="professional-card p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Dezvoltare Profesională</h3>
+                    <p class="professional-text-secondary leading-relaxed">
+                        Oferim programe de formare și dezvoltare pentru a-ți îmbunătăți competențele în domeniul IT și ERP.
+                    </p>
+                </div>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
diff --git a/menu/contact.html b/menu/contact.html
index 0cc3379..7ec57b5 100644
--- a/menu/contact.html
+++ b/menu/contact.html
@@ -3,143 +3,218 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact - Romfast</title>
+    <title>Contact - Romfast - Program de Contabilitate, Gestiune, Resurse Umane</title>
     <meta name="description" content="Contactati echipa Romfast. Gasiti aici adresa, numere de telefon, adresa de e-mail si o harta pentru a ajunge la sediul nostru.">
-    <meta name="keywords" content="contact romfast, adresa romfast, telefon romfast, email romfast, harta sediu">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <meta name="keywords" content="contact romfast, adresa romfast, telefon romfast, email romfast, harta sediu, suport tehnic roa">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
+<body class="min-h-screen">
 
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link font-semibold">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <h1 class="text-center mb-5">Contactati-ne</h1>
-        <div class="row">
-            <div class="col-lg-6 mb-4">
-                <h2 class="h4">Date de Contact</h2>
-                <div class="card">
-                    <div class="card-body">
-                        <p><strong>Adresa:</strong><br>
-                        900673 Constanta, Bd. Mamaia Nr. 17</p>
-                        
-                        <p><strong>Telefon:</strong></p>
-                        <ul class="list-unstyled">
-                            <li>0241 / 541000 (Romtelecom)</li>
-                            <li>0723 / 197939 (Vodafone)</li>
-                        </ul>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Professional Contact Hero Section -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Contactati-ne
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Suntem aici să vă ajutăm cu orice întrebare despre ROA - Romfast Applications. 
+                    Echipa noastră de specialiști vă asteaptă pentru consultanta și suport tehnic.
+                </p>
+            </div>
+        </section>
 
-                        <p><strong>E-mail:</strong><br>
-                        <a href="mailto:office@romfast.ro">office@romfast.ro</a></p>
+        <!-- Contact Information Grid -->
+        <section class="grid lg:grid-cols-2 gap-8 mb-16">
+            
+            <!-- Contact Details Card -->
+            <div class="professional-card p-8">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="map-pin" class="w-10 h-10 text-white"></i>
                     </div>
                 </div>
-                <div class="card mt-4">
-                    <div class="card-header">
-                        Harta Sediu
+                <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Date de Contact</h2>
+                
+                <div class="space-y-6">
+                    <div class="flex items-start space-x-4">
+                        <i data-lucide="map-pin" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                        <div>
+                            <h3 class="font-semibold professional-text-primary">Adresa</h3>
+                            <p class="professional-text-secondary">900673 Constanta, Bd. Mamaia Nr. 17</p>
+                        </div>
                     </div>
-                    <div class="card-body p-0">
-                        <div class="ratio ratio-16x9">
-                           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2850.837519439238!2d28.64031631552195!3d44.19852697910627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40bae51c3a543781%3A0x40e3494663457b0!2sBulevardul%20Mamaia%2017%2C%20Constan%C8%9Ba%20900673!5e0!3m2!1sen!2sro!4v1678886759363!5m2!1sen!2sro" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                    
+                    <div class="flex items-start space-x-4">
+                        <i data-lucide="phone" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                        <div>
+                            <h3 class="font-semibold professional-text-primary">Telefon</h3>
+                            <div class="space-y-1">
+                                <p class="professional-text-secondary">0241 / 541000 (Romtelecom)</p>
+                                <p class="professional-text-secondary">0723 / 197939 (Vodafone)</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start space-x-4">
+                        <i data-lucide="mail" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                        <div>
+                            <h3 class="font-semibold professional-text-primary">E-mail</h3>
+                            <a href="mailto:office@romfast.ro" class="text-blue-600 hover:text-blue-800 transition-colors">
+                                office@romfast.ro
+                            </a>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col-lg-6">
-                <h2 class="h4">Formular de Contact</h2>
-                <div class="card">
-                    <div class="card-body">
-                        <form>
-                            <div class="mb-3">
-                                <label for="nume" class="form-label">Nume</label>
-                                <input type="text" class="form-control" id="nume" placeholder="Numele dvs.">
-                            </div>
-                            <div class="mb-3">
-                                <label for="email" class="form-label">Adresa de Email</label>
-                                <input type="email" class="form-control" id="email" placeholder="exemplu@email.com">
-                            </div>
-                            <div class="mb-3">
-                                <label for="subiect" class="form-label">Subiect</label>
-                                <input type="text" class="form-control" id="subiect" placeholder="Subiectul mesajului">
-                            </div>
-                            <div class="mb-3">
-                                <label for="mesaj" class="form-label">Mesaj</label>
-                                <textarea class="form-control" id="mesaj" rows="5" placeholder="Scrieti mesajul aici..."></textarea>
-                            </div>
-                            <button type="submit" class="btn btn-primary">Trimite Mesajul</button>
-                        </form>
+            
+            <!-- Contact Form Card -->
+            <div class="professional-card p-8">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="message-circle" class="w-10 h-10 text-white"></i>
                     </div>
                 </div>
+                <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Trimite-ne un Mesaj</h2>
+                
+                <form class="space-y-6">
+                    <div>
+                        <label for="nume" class="block text-sm font-medium professional-text-primary mb-2">Nume complet</label>
+                        <input type="text" id="nume" name="nume" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="Numele dumneavoastră">
+                    </div>
+                    
+                    <div>
+                        <label for="email" class="block text-sm font-medium professional-text-primary mb-2">Adresa de e-mail</label>
+                        <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="exemplu@email.com">
+                    </div>
+                    
+                    <div>
+                        <label for="telefon" class="block text-sm font-medium professional-text-primary mb-2">Telefon (opțional)</label>
+                        <input type="tel" id="telefon" name="telefon" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="0241 / 123456">
+                    </div>
+                    
+                    <div>
+                        <label for="subiect" class="block text-sm font-medium professional-text-primary mb-2">Subiect</label>
+                        <select id="subiect" name="subiect" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
+                            <option value="">Selectați subiectul</option>
+                            <option value="informaii-roa">Informații despre ROA</option>
+                            <option value="suport-tehnic">Suport tehnic</option>
+                            <option value="implementare">Implementare soluție</option>
+                            <option value="demo">Solicitare demo</option>
+                            <option value="altele">Altele</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label for="mesaj" class="block text-sm font-medium professional-text-primary mb-2">Mesajul dumneavoastră</label>
+                        <textarea id="mesaj" name="mesaj" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-none" placeholder="Descrieți cererea dumneavoastră în detaliu..."></textarea>
+                    </div>
+                    
+                    <button type="submit" class="professional-btn-primary px-8 py-4 text-lg w-full">
+                        <span>Trimite Mesajul</span>
+                    </button>
+                </form>
             </div>
-        </div>
+        </section>
+
+        <!-- Map Section -->
+        <section class="professional-card p-8 mb-16">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl font-bold professional-text-primary mb-4">Locatia Noastra</h2>
+                <p class="professional-text-secondary text-lg">Vă așteptăm la sediul nostru din Constanța pentru consultanță personalizată.</p>
+            </div>
+            <div class="rounded-lg overflow-hidden border border-gray-200" style="aspect-ratio: 16/9;">
+                <iframe 
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2850.837519439238!2d28.64031631552195!3d44.19852697910627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40bae51c3a543781%3A0x40e3494663457b0!2sBulevardul%20Mamaia%2017%2C%20Constan%C8%9Ba%20900673!5e0!3m2!1sen!2sro!4v1678886759363!5m2!1sen!2sro" 
+                    width="100%" 
+                    height="100%" 
+                    style="border:0;" 
+                    allowfullscreen="" 
+                    loading="lazy" 
+                    referrerpolicy="no-referrer-when-downgrade">
+                </iframe>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Chatbot -->
     <script type="module">
         import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
@@ -179,48 +254,8 @@
             }
         })
     </script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
 
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
diff --git a/menu/desprenoi.html b/menu/desprenoi.html
index bc73d71..e5ab655 100644
--- a/menu/desprenoi.html
+++ b/menu/desprenoi.html
@@ -3,180 +3,258 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Despre Noi - Romfast</title>
+    <title>Despre Noi - Romfast Applications</title>
     <meta name="description" content="Romfast produce si comercializeaza produse software inovative de inalta calitate, specializate in domeniul economic, pentru a oferi informatia necesara oricand, oriunde si in cel mai scurt timp posibil.">
-    <meta name="keywords" content="roa, romfast, software economic, sistem informatic erp, solutii software, oracle partner, microsoft certified partner">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <meta name="keywords" content="roa, romfast, software economic, sistem informatic erp, solutii software, oracle partner, microsoft certified partner, despre noi, istorie romfast">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link font-semibold">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <div class="row">
-            <div class="col-lg-8">
-                <h1 class="mb-4">Despre Romfast</h1>
-                <p class="lead">Romfast produce si comercializeaza produse software inovative de inalta calitate. Inca din 1991 ne-am specializat in producerea de software pentru domeniul economic.</p>
-                <p>Programele noastre sunt capabile sa ofere informatia necesara oricand, oriunde si in cel mai scurt timp posibil.</p>
-                
-                <hr class="my-4">
-
-                <section>
-                    <h2 class="h4">Totul incepe cu o idee buna</h2>
-                    <p>In cazul nostru, ideea de baza a fost crearea unui sistem informatic ergonomic si cuprinzator, astfel incat:</p>
-                    <ul>
-                        <li>sa poata fi folosit de majoritatea companiilor,</li>
-                        <li>sa aiba in centru o organizare contabila moderna,</li>
-                        <li>sa faciliteze circulatia informatiei prin intreaga firma,</li>
-                        <li>sa fie un valoros instrument de management.</li>
-                    </ul>
-                    <p>Astfel a luat nastere sistemul <strong>ROA (Romfast Applications)</strong>, ce are o structura special dezvoltata pentru firmele medii si mari.</p>
-                </section>
-
-                <hr class="my-4">
-
-                <section>
-                    <h2 class="h4">Solutii pentru toate tipurile de companii</h2>
-                    <p>Solutiile noastre informatice sunt folosite de firme mari si mici, de firme cu diverse domenii de activitate: comert en-gros sau en-detail, productie, constructii, prestari servicii. Cheia este in robustete si flexibilitate.</p>
-                </section>
-
-                <hr class="my-4">
-
-                <section>
-                    <h2 class="h4">Creatie si inovatie prin experienta</h2>
-                    <p>In aplicatiile <strong>Romfast</strong> sta toata experienta noastra, acumulata de mai bine de 15 ani. De-a lungul timpului, in urma colaborarii cu numeroase firme din diferite domenii de activitate, proiectele software produse au fost permanent imbunatatite si dezvoltate, constituind azi un suport informatic stabil si eficient in managementul clientilor nostri.</p>
-                    <p>Urmand preocuparea pentru satisfactia clientilor, <strong>Romfast</strong> a dezvoltat o serie de parteneriate prin care gradul de specializare al echipei si calitatea serviciilor au crescut.</p>
-                </section>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Professional Hero Section -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Despre Romfast
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Romfast produce si comercializeaza produse software inovative de inalta calitate. 
+                    Inca din 1991 ne-am specializat in producerea de software pentru domeniul economic.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../roa/aplicatii-erp.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Descopera ROA</span>
+                    </a>
+                    <a href="contact.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Contacteaza-ne</span>
+                    </a>
+                </div>
             </div>
+        </section>
 
-            <div class="col-lg-4">
-                <div class="card mb-4">
-                    <div class="card-body text-center">
-                        <h5 class="card-title">Parteneri Tehnologici</h5>
-                        <img src="../images/oracle-partner.png" alt="Oracle Partner" class="img-fluid my-3">
-                        <p class="card-text">Romfast este <strong>Oracle Partner</strong> din anul 2004 si are expertiza in crearea de sisteme informatice de mari dimensiuni pe baze de date Oracle.</p>
+        <!-- About Us Content Section -->
+        <section class="grid lg:grid-cols-3 gap-8 mb-16">
+            <!-- Main Content - Left Column (2/3) -->
+            <div class="lg:col-span-2">
+                <div class="professional-card p-8">
+                    <div class="flex items-center justify-center mb-6">
+                        <div class="professional-icon-wrapper">
+                            <i data-lucide="lightbulb" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Totul incepe cu o idee buna</h2>
+                    <div class="professional-text-secondary space-y-4 text-lg leading-relaxed">
+                        <p>
+                            Programele noastre sunt capabile sa ofere informatia necesara oricand, oriunde si in cel mai scurt timp posibil.
+                        </p>
+                        <p>
+                            In cazul nostru, ideea de baza a fost crearea unui sistem informatic ergonomic si cuprinzator, astfel incat:
+                        </p>
+                        <ul class="space-y-3 ml-6">
+                            <li class="flex items-start space-x-3">
+                                <span class="text-blue-500 text-lg">✓</span>
+                                <span>sa poata fi folosit de majoritatea companiilor,</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <span class="text-blue-500 text-lg">✓</span>
+                                <span>sa aiba in centru o organizare contabila moderna,</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <span class="text-blue-500 text-lg">✓</span>
+                                <span>sa faciliteze circulatia informatiei prin intreaga firma,</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <span class="text-blue-500 text-lg">✓</span>
+                                <span>sa fie un valoros instrument de management.</span>
+                            </li>
+                        </ul>
+                        <p class="font-semibold text-xl professional-text-primary">
+                            Astfel a luat nastere sistemul <strong>ROA (Romfast Applications)</strong>, ce are o structura special dezvoltata pentru firmele medii si mari.
+                        </p>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-body text-center">
-                        <img src="../images/microsoft-partner.png" alt="Microsoft Partner" class="img-fluid my-3">
-                        <p class="card-text">Din 2005 Romfast este <strong>Microsoft Certified Partner</strong>, fapt ce atesta experienta in dezvoltarea de produse software de calitate utilizand cele mai noi tehnologii Microsoft.</p>
+
+                <!-- Solutions Section -->
+                <div class="professional-card p-8 mt-8">
+                    <div class="flex items-center justify-center mb-6">
+                        <div class="professional-icon-wrapper">
+                            <i data-lucide="building-2" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Solutii pentru toate tipurile de companii</h2>
+                    <div class="professional-text-secondary space-y-4 text-lg leading-relaxed">
+                        <p>
+                            Solutiile noastre informatice sunt folosite de firme mari si mici, de firme cu diverse domenii de activitate: 
+                            comert en-gros sau en-detail, productie, constructii, prestari servicii.
+                        </p>
+                        <p class="font-semibold text-center text-xl professional-text-primary">
+                            Cheia este in <span class="text-blue-600">robustete</span> si <span class="text-blue-600">flexibilitate</span>.
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Experience Section -->
+                <div class="professional-card p-8 mt-8">
+                    <div class="flex items-center justify-center mb-6">
+                        <div class="professional-icon-wrapper">
+                            <i data-lucide="award" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Creatie si inovatie prin experienta</h2>
+                    <div class="professional-text-secondary space-y-4 text-lg leading-relaxed">
+                        <p>
+                            In aplicatiile <strong>Romfast</strong> sta toata experienta noastra, acumulata de mai bine de 30 ani. 
+                            De-a lungul timpului, in urma colaborarii cu numeroase firme din diferite domenii de activitate, 
+                            proiectele software produse au fost permanent imbunatatite si dezvoltate, constituind azi un suport 
+                            informatic stabil si eficient in managementul clientilor nostri.
+                        </p>
+                        <p>
+                            Urmand preocuparea pentru satisfactia clientilor, <strong>Romfast</strong> a dezvoltat o serie de 
+                            parteneriate prin care gradul de specializare al echipei si calitatea serviciilor au crescut.
+                        </p>
                     </div>
                 </div>
             </div>
-        </div>
+
+            <!-- Sidebar - Right Column (1/3) -->
+            <div class="lg:col-span-1">
+                <!-- Partnership Cards -->
+                <div class="professional-card professional-card-featured p-6 mb-8">
+                    <div class="text-center">
+                        <div class="professional-icon-wrapper mb-4">
+                            <i data-lucide="database" class="w-10 h-10 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary">Oracle Partner</h3>
+                        <div class="mb-4">
+                            <img src="../images/oracle-partner.png" alt="Oracle Partner" class="mx-auto max-h-16 object-contain">
+                        </div>
+                        <p class="professional-text-secondary leading-relaxed">
+                            Romfast este <strong>Oracle Partner</strong> din anul 2004 si are expertiza in crearea de sisteme 
+                            informatice de mari dimensiuni pe baze de date Oracle.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="professional-card p-6 mb-8">
+                    <div class="text-center">
+                        <div class="professional-icon-wrapper mb-4">
+                            <i data-lucide="monitor" class="w-10 h-10 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary">Microsoft Partner</h3>
+                        <div class="mb-4">
+                            <img src="../images/microsoft-partner.png" alt="Microsoft Partner" class="mx-auto max-h-16 object-contain">
+                        </div>
+                        <p class="professional-text-secondary leading-relaxed">
+                            Din 2005 Romfast este <strong>Microsoft Certified Partner</strong>, fapt ce atesta experienta in 
+                            dezvoltarea de produse software de calitate utilizand cele mai noi tehnologii Microsoft.
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Company Stats -->
+                <div class="professional-card service-technology p-6">
+                    <div class="text-center">
+                        <div class="professional-icon-wrapper mb-4">
+                            <i data-lucide="trending-up" class="w-10 h-10 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary">30+ ani de experienta</h3>
+                        <div class="grid grid-cols-2 gap-4 text-center">
+                            <div class="p-3 bg-blue-50 rounded-lg">
+                                <div class="text-2xl font-bold text-blue-600">1991</div>
+                                <div class="text-sm professional-text-secondary">Anul infiintarii</div>
+                            </div>
+                            <div class="p-3 bg-blue-50 rounded-lg">
+                                <div class="text-2xl font-bold text-blue-600">30+</div>
+                                <div class="text-sm professional-text-secondary">Clienti activi</div>
+                            </div>
+                        </div>
+                        <a href="../roa/aplicatii-erp.html" class="professional-btn-secondary px-6 py-3 w-full inline-block mt-4">
+                            <span>Vezi solutiile ROA</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/menu/implementare.html b/menu/implementare.html
index 99dc771..5c194d5 100644
--- a/menu/implementare.html
+++ b/menu/implementare.html
@@ -3,246 +3,317 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Servicii - Implementare ERP</title>
+    <title>Servicii de Implementare ROA - Metodologia de Implementare ERP | Romfast</title>
     <meta name="description" content="Metodologia de implementare Romfast asigura succesul proiectului ERP prin parcurgerea unor pasi bine definiti, de la analiza la evaluarea finala.">
-    <meta name="keywords" content="implementare erp, metodologie implementare, management de proiect, instruire utilizatori, start productiv, romfast">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <meta name="keywords" content="implementare erp, metodologie implementare, management de proiect, instruire utilizatori, start productiv, romfast, roa">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle active" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item active" href="implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 bg-blue-50 font-medium">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <h1 class="mb-4">Metodologia de Implementare ROA</h1>
-        <p class="lead">Implementarea este un proiect de anvergura ce genereaza transformari organizationale si de aceea trebuie sustinuta printr-un management bine fundamentat.</p>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
         
-        <section class="mb-5">
-            <h2 class="h4">Pasii Implementarii</h2>
-            <p>Metodologia de implementare Romfast presupune parcurgerea de catre echipa comuna (reprezentantii beneficiarului + reprezentantii ROMFAST) a urmatorilor pasi:</p>
-            <ol class="list-group theme-list-group list-group-numbered">
-                <li class="list-group-item theme-list-group-item">Analiza preliminara</li>
-                <li class="list-group-item theme-list-group-item">Analiza detaliata</li>
-                <li class="list-group-item theme-list-group-item">Pregatirea tehnica a sistemului</li>
-                <li class="list-group-item theme-list-group-item">Migrarea si initializarea datelor</li>
-                <li class="list-group-item theme-list-group-item">Instruirea utilizatorilor</li>
-                <li class="list-group-item theme-list-group-item">Startul productiv</li>
-                <li class="list-group-item theme-list-group-item">Predarea sistemului</li>
-                <li class="list-group-item theme-list-group-item">Evaluarea implementarii</li>
-            </ol>
-        </section>
-
-        <section>
-            <h2 class="h4">Planul de Lucru si Responsabilitati</h2>
-            <p>Metoda de implementare include executia pasilor urmatori, finalizati cu intocmirea documentelor mentionate:</p>
-            <div class="table-responsive">
-                <table class="table table-bordered table-striped">
-                    <thead class="table-primary">
-                        <tr>
-                            <th scope="col">#</th>
-                            <th scope="col">Denumirea Fazei</th>
-                            <th scope="col">Observatii</th>
-                            <th scope="col">Responsabil Beneficiar</th>
-                            <th scope="col">Responsabil Romfast</th>
-                            <th scope="col">Documente</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <th scope="row">1</th>
-                            <td>Definirea si agrearea graficului de implementare</td>
-                            <td>Romfast propune graficul</td>
-                            <td class="text-center">&#10003;</td>
-                            <td class="text-center">&#10003;</td>
-                            <td>Graficul de implementare</td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Desemnarea persoanelor implicate si a responsabilitatilor</td>
-                            <td></td>
-                            <td class="text-center">&#10003;</td>
-                            <td class="text-center">&#10003;</td>
-                            <td>Lista posturilor</td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Stabilirea politicilor contabile si organizarea companiei</td>
-                            <td>Romfast ofera consultanta</td>
-                            <td class="text-center">&#10003;</td>
-                            <td></td>
-                            <td>Monografia contabila</td>
-                        </tr>
-                        <tr>
-                            <th scope="row">2</th>
-                            <td colspan="5"><strong>Executia Proiectului</strong></td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Lucrari informatice</td>
-                            <td></td>
-                            <td></td>
-                            <td class="text-center">&#10003;</td>
-                            <td>Comunicari/Buletine informative</td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Lucrari de implementare</td>
-                            <td></td>
-                            <td></td>
-                            <td class="text-center">&#10003;</td>
-                            <td>Procese verbale de implementare</td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Servicii de instruire</td>
-                            <td></td>
-                            <td></td>
-                            <td class="text-center">&#10003;</td>
-                            <td>Procese verbale de instruire</td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Sesizari/Comunicari de eroare/modificare</td>
-                            <td>Beneficiarul intocmeste si transmite</td>
-                            <td class="text-center">&#10003;</td>
-                            <td></td>
-                            <td>Sesizari</td>
-                        </tr>
-                        <tr>
-                            <th scope="row">3</th>
-                            <td colspan="5"><strong>Finalizare</strong></td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Finalizarea fazelor</td>
-                            <td></td>
-                            <td></td>
-                            <td class="text-center">&#10003;</td>
-                            <td>Proces verbal de finalizare a fazei</td>
-                        </tr>
-                        <tr>
-                            <th scope="row"></th>
-                            <td>Finalizarea proiectului</td>
-                            <td></td>
-                            <td></td>
-                            <td class="text-center">&#10003;</td>
-                            <td>Proces verbal de finalizare a implementarii</td>
-                        </tr>
-                    </tbody>
-                </table>
+        <!-- Hero Section for Implementation -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Metodologia de Implementare ROA
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Implementarea este un proiect de anvergura ce genereaza transformari organizationale si de aceea trebuie sustinuta printr-un management bine fundamentat.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicita consultanta</span>
+                    </a>
+                    <a href="../roa/aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Vezi ROA</span>
+                    </a>
+                </div>
             </div>
         </section>
+
+        <!-- Implementation Steps Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <div class="flex items-center justify-center mb-8">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="list-checks" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <h2 class="text-3xl font-bold text-center mb-6 professional-text-primary">Pasii Implementarii</h2>
+                <p class="text-center professional-text-secondary mb-8 text-lg">
+                    Metodologia de implementare Romfast presupune parcurgerea de catre echipa comuna (reprezentantii beneficiarului + reprezentantii ROMFAST) a urmatorilor pasi:
+                </p>
+                
+                <div class="grid md:grid-cols-2 gap-6">
+                    <div class="space-y-4">
+                        <div class="flex items-center space-x-4 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
+                            <span class="bg-blue-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">1</span>
+                            <span class="professional-text-primary font-medium">Analiza preliminara</span>
+                        </div>
+                        <div class="flex items-center space-x-4 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
+                            <span class="bg-blue-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">2</span>
+                            <span class="professional-text-primary font-medium">Analiza detaliata</span>
+                        </div>
+                        <div class="flex items-center space-x-4 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
+                            <span class="bg-blue-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">3</span>
+                            <span class="professional-text-primary font-medium">Pregatirea tehnica a sistemului</span>
+                        </div>
+                        <div class="flex items-center space-x-4 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
+                            <span class="bg-blue-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">4</span>
+                            <span class="professional-text-primary font-medium">Migrarea si initializarea datelor</span>
+                        </div>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="flex items-center space-x-4 p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
+                            <span class="bg-green-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">5</span>
+                            <span class="professional-text-primary font-medium">Instruirea utilizatorilor</span>
+                        </div>
+                        <div class="flex items-center space-x-4 p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
+                            <span class="bg-green-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">6</span>
+                            <span class="professional-text-primary font-medium">Startul productiv</span>
+                        </div>
+                        <div class="flex items-center space-x-4 p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
+                            <span class="bg-green-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">7</span>
+                            <span class="professional-text-primary font-medium">Predarea sistemului</span>
+                        </div>
+                        <div class="flex items-center space-x-4 p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
+                            <span class="bg-green-500 text-white font-bold text-lg w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0">8</span>
+                            <span class="professional-text-primary font-medium">Evaluarea implementarii</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Implementation Plan Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <div class="flex items-center justify-center mb-8">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="clipboard-list" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <h2 class="text-3xl font-bold text-center mb-6 professional-text-primary">Planul de Lucru si Responsabilitati</h2>
+                <p class="text-center professional-text-secondary mb-8 text-lg">
+                    Metoda de implementare include executia pasilor urmatori, finalizati cu intocmirea documentelor mentionate:
+                </p>
+                
+                <!-- Responsive Table -->
+                <div class="overflow-x-auto">
+                    <div class="min-w-full bg-white rounded-lg shadow-sm border border-gray-200">
+                        <!-- Table Header -->
+                        <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg">
+                            <div class="grid grid-cols-6 gap-4 p-4 font-semibold text-sm">
+                                <div class="text-center">#</div>
+                                <div>Denumirea Fazei</div>
+                                <div>Observatii</div>
+                                <div class="text-center">Responsabil Beneficiar</div>
+                                <div class="text-center">Responsabil Romfast</div>
+                                <div>Documente</div>
+                            </div>
+                        </div>
+                        
+                        <!-- Table Body -->
+                        <div class="divide-y divide-gray-200">
+                            <!-- Phase 1: Planning -->
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors">
+                                <div class="text-center font-bold text-blue-600">1</div>
+                                <div class="font-medium">Definirea si agrearea graficului de implementare</div>
+                                <div class="text-gray-600">Romfast propune graficul</div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-blue-600 font-medium">Graficul de implementare</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors bg-gray-25">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Desemnarea persoanelor implicate si a responsabilitatilor</div>
+                                <div class="text-gray-600"></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-blue-600 font-medium">Lista posturilor</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Stabilirea politicilor contabile si organizarea companiei</div>
+                                <div class="text-gray-600">Romfast ofera consultanta</div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-center"></div>
+                                <div class="text-blue-600 font-medium">Monografia contabila</div>
+                            </div>
+                            
+                            <!-- Phase 2: Execution -->
+                            <div class="grid grid-cols-6 gap-4 p-4 bg-blue-50 font-bold text-blue-800">
+                                <div class="text-center text-blue-600">2</div>
+                                <div class="col-span-5">EXECUTIA PROIECTULUI</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Lucrari informatice</div>
+                                <div class="text-gray-600"></div>
+                                <div class="text-center"></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-blue-600 font-medium">Comunicari/Buletine informative</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors bg-gray-25">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Lucrari de implementare</div>
+                                <div class="text-gray-600"></div>
+                                <div class="text-center"></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-blue-600 font-medium">Procese verbale de implementare</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Servicii de instruire</div>
+                                <div class="text-gray-600"></div>
+                                <div class="text-center"></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-blue-600 font-medium">Procese verbale de instruire</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors bg-gray-25">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Sesizari/Comunicari de eroare/modificare</div>
+                                <div class="text-gray-600">Beneficiarul intocmeste si transmite</div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-center"></div>
+                                <div class="text-blue-600 font-medium">Sesizari</div>
+                            </div>
+                            
+                            <!-- Phase 3: Finalization -->
+                            <div class="grid grid-cols-6 gap-4 p-4 bg-green-50 font-bold text-green-800">
+                                <div class="text-center text-green-600">3</div>
+                                <div class="col-span-5">FINALIZARE</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Finalizarea fazelor</div>
+                                <div class="text-gray-600"></div>
+                                <div class="text-center"></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-blue-600 font-medium">Proces verbal de finalizare a fazei</div>
+                            </div>
+                            
+                            <div class="grid grid-cols-6 gap-4 p-4 hover:bg-gray-50 transition-colors bg-gray-25">
+                                <div class="text-center"></div>
+                                <div class="font-medium">Finalizarea proiectului</div>
+                                <div class="text-gray-600"></div>
+                                <div class="text-center"></div>
+                                <div class="text-center"><i data-lucide="check" class="w-5 h-5 text-green-600 mx-auto"></i></div>
+                                <div class="text-blue-600 font-medium">Proces verbal de finalizare a implementarii</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Call to Action Section -->
+        <section class="professional-card professional-card-featured p-8 text-center">
+            <div class="flex items-center justify-center mb-6">
+                <div class="professional-icon-wrapper">
+                    <i data-lucide="rocket" class="w-10 h-10 text-white"></i>
+                </div>
+            </div>
+            <h2 class="text-2xl font-bold mb-4 professional-text-primary">Pregatit pentru transformarea digitala?</h2>
+            <p class="professional-text-secondary mb-8 leading-relaxed text-lg">
+                Echipa noastra de specialisti te va ghida prin fiecare etapa a implementarii ROA pentru a asigura succesul proiectului tau.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="contact.html" class="professional-btn-urgent px-8 py-4 text-lg">
+                    <span>Contacteaza-ne acum!</span>
+                </a>
+                <a href="../roa/aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                    <span>Vezi toate modulele ROA</span>
+                </a>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/menu/politica-confidentialitate.html b/menu/politica-confidentialitate.html
index ca5d5de..7cc8eb5 100644
--- a/menu/politica-confidentialitate.html
+++ b/menu/politica-confidentialitate.html
@@ -1,28 +1,23 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-<html><head><!-- ... IE7 in quirks mode ... -->
-					 
-					<title>Romfast - Contact</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-					<base>
-					<meta http-equiv="cache-control" content="">
-                                        			<meta name="robots" content="index,follow">
-                    		                    			<meta name="description" content="Our company  is a global management consulting, technology services and outsourcing company.">
-                    		                    			<meta name="keywords" content="business, company, consulting, approach, experience, professional, dynamic, strategy, development, management, planning, success">
-                    		                    			<meta name="generator" content="eturnkeys">
-                    		                    			<meta name="copyright" content="eturnkeys">
-                    		                    
-					<link href="../style.css" type="text/css" rel="stylesheet">
-										<script type="text/javascript" src="../js/definePosition.js"></script>
-					
-					<link rel="stylesheet" type="text/css" href="../js/ddlevelsfiles/ddlevelsmenu-base.css">
-					<link rel="stylesheet" type="text/css" href="../js/ddlevelsfiles/ddlevelsmenu-topbar.css">
-					<link rel="stylesheet" type="text/css" href="../js/ddlevelsfiles/ddlevelsmenu-sidebar.css">
-					<script type="text/javascript" src="../js/ddlevelsfiles/ddlevelsmenu.js">  
-					/***********************************************
-					* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
-					* This notice MUST stay intact for legal use
-					* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
-					***********************************************/
-					</script></head>
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Romfast - Politica de Confidentialitate | GDPR</title>
+    <meta name="description" content="Politica de confidentialitate Romfast conform GDPR. Protectia datelor personale pentru clientii ROA - Romfast Applications.">
+    <meta name="keywords" content="politica confidentialitate, GDPR, protectia datelor, romfast, roa, date personale, privacy policy">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
+</head>
 <body>
                                       
 							<table style="width: 100%;" cellpadding="0" cellspacing="0">
@@ -159,30 +154,30 @@
         <tbody><tr>
 			<td class="left_column_sub1">
        	            	<div class="inner_left_sub1">
-					<!--start content of site_links content -->
-<p>&nbsp;</p>
-<p>&nbsp;</p>
-					<h2>Politica confidentialitate</h2>
-<p>&nbsp;</p>
-<p>La 25 mai 2018 a intrat in vigoare si au devenit aplicabile prevederile Regulamentului European 679/2016 privind protectia persoanelor fizice in ceea ce priveste prelucrarea datelor cu caracter personal si libera circulatie a acestor &bdquo;date&rdquo; (GDPR).</p>
-<p>&nbsp;</p>
-<p>Prin aceasta politica dorim sa va comunicam felul in care ROMFAST se conformeaza acestui regulament.</p>
-<p>&nbsp;</p>
-<p>&nbsp;</p>
-<ol>
-<li>ROMFAST prelucreaza datele dumneavoastra cu buna credinta, conform prevederilor Regulamentului.</li>
-<li>Informatiile pe care ROMFAST le stocheaza despre dumneavoastra, in calitate de client, datorita produselor si serviciile pe care le-ati achizitionat, sunt strict legate de identificare si de contact, in scopul derularii relatiei contractuale (ex. nume si prenume, CNP, adresa, telefon, adresa de e-mail etc.) pentru intocmirea facturilor sau efectuarea declaratiilor obligatorii catre autoritati, conform legii.</li>
-<li>ROMFAST se angajeaza sa pastreze confidentialitatea datelor personale din contractele de funizare software si suport tehnic.</li>
-<li>In virtutea contractului de suport tehnic incheiat intre dumneavoastra si ROMFAST, bazele dumneavoastra de date nu sunt pastrate de catre ROMFAST.
-<p>Accesul la bazele dumneavoastra de date se face numai in urma sesizarilor efectuate de dumneavoastra, daca este cazul.&nbsp; Informatiile din bazele de date sunt folosite strict pentru rezolvarea sesizarilor si numai pe durata rezolvarii sesizarilor. Accesarea acestor informatii se va face strict cu acordul punctual al responsabilului dumneavoastra cu securitatea datelor sau a responsabilului desemnat de dumneavoastra.</p>
-</li>
-<li>Datele personale ale clientilor nu fac si nu vor face obiectul unor tranzactii ale ROMFAST cu terte persoane (fizice sau juridice).</li>
-</ol>
-<p>Responsabilul cu Protectia Datelor: Marius Mutu, Telefon: 0241541000, Email: <a href="mailto:office@romfast.ro">office@romfast.ro</a>.</p>
-<p>&nbsp;</p>
-<p>Pentru orice alte informatii, va stam la dispozitie.</p>
-<p>Cu respect,</p>
-<p>ROMFAST</p>
+					<!--start content of site_links content -->
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+					<h2>Politica confidentialitate</h2>
+<p>&nbsp;</p>
+<p>La 25 mai 2018 a intrat in vigoare si au devenit aplicabile prevederile Regulamentului European 679/2016 privind protectia persoanelor fizice in ceea ce priveste prelucrarea datelor cu caracter personal si libera circulatie a acestor &bdquo;date&rdquo; (GDPR).</p>
+<p>&nbsp;</p>
+<p>Prin aceasta politica dorim sa va comunicam felul in care ROMFAST se conformeaza acestui regulament.</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<ol>
+<li>ROMFAST prelucreaza datele dumneavoastra cu buna credinta, conform prevederilor Regulamentului.</li>
+<li>Informatiile pe care ROMFAST le stocheaza despre dumneavoastra, in calitate de client, datorita produselor si serviciile pe care le-ati achizitionat, sunt strict legate de identificare si de contact, in scopul derularii relatiei contractuale (ex. nume si prenume, CNP, adresa, telefon, adresa de e-mail etc.) pentru intocmirea facturilor sau efectuarea declaratiilor obligatorii catre autoritati, conform legii.</li>
+<li>ROMFAST se angajeaza sa pastreze confidentialitatea datelor personale din contractele de funizare software si suport tehnic.</li>
+<li>In virtutea contractului de suport tehnic incheiat intre dumneavoastra si ROMFAST, bazele dumneavoastra de date nu sunt pastrate de catre ROMFAST.
+<p>Accesul la bazele dumneavoastra de date se face numai in urma sesizarilor efectuate de dumneavoastra, daca este cazul.&nbsp; Informatiile din bazele de date sunt folosite strict pentru rezolvarea sesizarilor si numai pe durata rezolvarii sesizarilor. Accesarea acestor informatii se va face strict cu acordul punctual al responsabilului dumneavoastra cu securitatea datelor sau a responsabilului desemnat de dumneavoastra.</p>
+</li>
+<li>Datele personale ale clientilor nu fac si nu vor face obiectul unor tranzactii ale ROMFAST cu terte persoane (fizice sau juridice).</li>
+</ol>
+<p>Responsabilul cu Protectia Datelor: Marius Mutu, Telefon: 0241541000, Email: <a href="mailto:office@romfast.ro">office@romfast.ro</a>.</p>
+<p>&nbsp;</p>
+<p>Pentru orice alte informatii, va stam la dispozitie.</p>
+<p>Cu respect,</p>
+<p>ROMFAST</p>
 
    	            	 </td>
 			<td class="right_column_sub1">
diff --git a/menu/referinte.html b/menu/referinte.html
index f1619ef..067369c 100644
--- a/menu/referinte.html
+++ b/menu/referinte.html
@@ -257,53 +257,6 @@
     </footer>
 
     <!-- Professional Theme JavaScript -->
-    <script>
-        // Theme Toggle Functionality
-        document.addEventListener('DOMContentLoaded', function() {
-            const themeToggle = document.getElementById('theme-toggle');
-            const body = document.body;
-            const icon = themeToggle.querySelector('i');
-            
-            // Check for saved theme preference or default to 'light'
-            const currentTheme = localStorage.getItem('theme') || 'light';
-            
-            if (currentTheme === 'dark') {
-                body.classList.add('dark-mode');
-                icon.setAttribute('data-lucide', 'moon');
-            } else {
-                body.classList.remove('dark-mode');
-                icon.setAttribute('data-lucide', 'sun');
-            }
-            
-            // Initialize Lucide icons
-            if (typeof lucide !== 'undefined') {
-                lucide.createIcons();
-            }
-            
-            themeToggle.addEventListener('click', function() {
-                if (body.classList.contains('dark-mode')) {
-                    body.classList.remove('dark-mode');
-                    icon.setAttribute('data-lucide', 'sun');
-                    localStorage.setItem('theme', 'light');
-                } else {
-                    body.classList.add('dark-mode');
-                    icon.setAttribute('data-lucide', 'moon');
-                    localStorage.setItem('theme', 'dark');
-                }
-                
-                // Re-initialize Lucide icons after change
-                if (typeof lucide !== 'undefined') {
-                    lucide.createIcons();
-                }
-            });
-        });
-        
-        // Initialize Lucide Icons
-        document.addEventListener('DOMContentLoaded', function() {
-            if (typeof lucide !== 'undefined') {
-                lucide.createIcons();
-            }
-        });
-    </script>
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
diff --git a/menu/roa-suport-tehnic.html b/menu/roa-suport-tehnic.html
index a168511..c9d0684 100644
--- a/menu/roa-suport-tehnic.html
+++ b/menu/roa-suport-tehnic.html
@@ -3,213 +3,333 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Servicii - Suport Tehnic ROA</title>
+    <title>Servicii - Suport Tehnic ROA | Romfast - Sistem Informatic ERP</title>
     <meta name="description" content="Servicii de suport tehnic si upgrade pentru aplicatiile ROA. Asiguram utilizare eficienta, actualizari legislative, optimizari si mentenanta.">
     <meta name="keywords" content="suport tehnic erp, suport roa, mentenanta erp, actualizari legislative, romfast, suport oracle">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle active" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item active" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 bg-blue-50 text-blue-800 font-semibold">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
-        <h1 class="mb-4">Suport Tehnic ROA</h1>
-        <p class="lead">Romfast vine in intampinarea clientilor sai cu suport tehnic si upgrade de aplicatii pentru a asigura utilizarea eficienta si completa a sistemului ROA.</p>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Professional Page Header -->
+        <section class="professional-hero text-center mb-12">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Suport Tehnic ROA
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Romfast vine în întâmpinarea clienților săi cu suport tehnic și upgrade de aplicații 
+                    pentru a asigura utilizarea eficientă și completă a sistemului ROA.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="#servicii" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Vezi Serviciile</span>
+                    </a>
+                    <button class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Contact Suport</span>
+                    </button>
+                </div>
+            </div>
+        </section>
 
-        <div class="row">
-            <div class="col-lg-8">
-                <section class="mb-4">
-                    <h2 class="h4">Serviciile Noastre de Suport</h2>
-                    <p>Oferim suport pentru a corecta eventualele erori, a repara defectiuni ale bazelor de date, si pentru a asigura actualizarea legislativa si optimizarea programelor.</p>
-                    <p>Evolutia permanenta a economiei si modificarile legislative genereaza necesitatea optimizarii si actualizarii continue a aplicatiilor informatice create de noi, astfel incat acestea sa se mentina la standardele cerute de clientii nostri.</p>
+        <!-- Main Content Grid -->
+        <div class="grid lg:grid-cols-3 gap-8 mb-16">
+            <!-- Main Content Area -->
+            <div class="lg:col-span-2 space-y-8">
+                
+                <!-- Services Section -->
+                <section id="servicii" class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4">
+                            <i data-lucide="settings" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h2 class="text-2xl font-semibold professional-text-primary">Serviciile Noastre de Suport</h2>
+                    </div>
+                    <div class="space-y-4 professional-text-secondary">
+                        <p>
+                            Oferim suport pentru a corecta eventualele erori, a repara defecțiuni ale bazelor de date, 
+                            și pentru a asigura actualizarea legislativă și optimizarea programelor.
+                        </p>
+                        <p>
+                            Evoluția permanentă a economiei și modificările legislative generează necesitatea optimizării 
+                            și actualizării continue a aplicațiilor informatice create de noi, astfel încât acestea să se 
+                            mențină la standardele cerute de clienții noștri.
+                        </p>
+                    </div>
                 </section>
 
-                <hr class="my-4">
-
-                <section class="mb-4">
-                    <h2 class="h4">Metoda de Acordare a Suportului Tehnic</h2>
-                    <p>Suportul tehnic se realizeaza prin mai multe cai, in functie de calea optima de realizare si de problema concreta ce trebuie solutionata: <strong>telefon, fax, e-mail, conectare securizata, sau interventie la sediul Romfast/Client.</strong></p>
-                    <h5>Mentenanta si Actualizarea</h5>
-                    <ul>
-                        <li><strong>Mentenanta si actualizarea schemelor ROA</strong> in baza de date Oracle se realizeaza prin conectare securizata la distanta.</li>
-                        <li><strong>Actualizarea aplicatiilor ROA</strong> se realizeaza prin punerea la dispozitie a aplicatiilor pe un server FTP, de unde sunt descarcate automat in toate statiile de lucru.</li>
-                    </ul>
+                <!-- Technical Support Methods -->
+                <section class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4">
+                            <i data-lucide="headphones" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h2 class="text-2xl font-semibold professional-text-primary">Metoda de Acordare a Suportului Tehnic</h2>
+                    </div>
+                    <div class="space-y-6">
+                        <p class="professional-text-secondary">
+                            Suportul tehnic se realizează prin mai multe căi, în funcție de calea optimă de realizare 
+                            și de problema concretă ce trebuie soluționată:
+                        </p>
+                        <div class="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg p-4 border-l-4 border-blue-500">
+                            <p class="font-semibold professional-text-primary flex items-center mb-2">
+                                <i data-lucide="phone" class="w-5 h-5 mr-2"></i>
+                                Canale de comunicare
+                            </p>
+                            <p class="professional-text-secondary">
+                                <strong>Telefon, fax, e-mail, conectare securizată, sau intervenție la sediul Romfast/Client.</strong>
+                            </p>
+                        </div>
+                        
+                        <div class="space-y-4">
+                            <h3 class="text-xl font-semibold professional-text-primary">Mentenanță și Actualizarea</h3>
+                            <ul class="space-y-3 professional-text-secondary">
+                                <li class="flex items-start space-x-3">
+                                    <i data-lucide="database" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-1"></i>
+                                    <span><strong>Mentenanța și actualizarea schemelor ROA</strong> în baza de date Oracle se realizează prin conectare securizată la distanță.</span>
+                                </li>
+                                <li class="flex items-start space-x-3">
+                                    <i data-lucide="download" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-1"></i>
+                                    <span><strong>Actualizarea aplicațiilor ROA</strong> se realizează prin punerea la dispoziție a aplicațiilor pe un server FTP, de unde sunt descărcate automat în toate stațiile de lucru.</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                 </section>
 
-                <hr class="my-4">
-
-                <section class="mb-4">
-                    <h2 class="h4">Metode de Comunicare</h2>
-                    <div class="accordion" id="comunicareAccordion">
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingOne">
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                    Comunicari din partea Romfast
-                                </button>
-                            </h2>
-                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#comunicareAccordion">
-                                <div class="accordion-body">
-                                    <p>Comunicam periodic lista lucrarilor efectuate prin:</p>
-                                    <ul>
-                                        <li><strong>Buletin informativ (lunar):</strong> Lista modificarilor, actualizari legislative, optimizari si instructiuni.</li>
-                                        <li><strong>Rapoarte de lucrari speciale (lunar):</strong> Lista lucrarilor de dezvoltare custom.</li>
-                                        <li><strong>Lista actualizarilor (lunar):</strong> Versiunile de programe livrate.</li>
-                                        <li><strong>Buletine speciale (la nevoie):</strong> Comunicari urgente sau importante.</li>
-                                        <li><strong>Raspunsuri scrise la sesizari.</strong></li>
-                                    </ul>
-                                </div>
+                <!-- Communication Methods -->
+                <section class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4">
+                            <i data-lucide="message-circle" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h2 class="text-2xl font-semibold professional-text-primary">Metode de Comunicare</h2>
+                    </div>
+                    
+                    <!-- Communication from Romfast -->
+                    <div class="mb-6">
+                        <h3 class="text-xl font-semibold professional-text-primary mb-4 flex items-center">
+                            <i data-lucide="send" class="w-5 h-5 mr-2 text-blue-600"></i>
+                            Comunicări din partea Romfast
+                        </h3>
+                        <p class="professional-text-secondary mb-4">
+                            Comunicăm periodic lista lucrărilor efectuate prin:
+                        </p>
+                        <div class="grid md:grid-cols-2 gap-4">
+                            <div class="bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 dark:bg-opacity-20 rounded-lg p-4">
+                                <h4 class="font-semibold professional-text-primary flex items-center mb-2">
+                                    <i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
+                                    Lunar
+                                </h4>
+                                <ul class="space-y-2 text-sm professional-text-secondary">
+                                    <li>• Buletin informativ</li>
+                                    <li>• Rapoarte de lucrări speciale</li>
+                                    <li>• Lista actualizărilor</li>
+                                </ul>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900 dark:to-green-800 dark:bg-opacity-20 rounded-lg p-4">
+                                <h4 class="font-semibold professional-text-primary flex items-center mb-2">
+                                    <i data-lucide="alert-triangle" class="w-4 h-4 mr-2"></i>
+                                    La nevoie
+                                </h4>
+                                <ul class="space-y-2 text-sm professional-text-secondary">
+                                    <li>• Buletine speciale</li>
+                                    <li>• Răspunsuri scrise la sesizări</li>
+                                </ul>
                             </div>
                         </div>
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingTwo">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                                    Comunicari din partea Beneficiarului (Sesizari)
-                                </button>
-                            </h2>
-                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#comunicareAccordion">
-                                <div class="accordion-body">
-                                    <p>Beneficiarul ne poate comunica oricand:</p>
-                                    <ul>
-                                        <li>Sesizari de functionare eronata.</li>
-                                        <li>Cereri de modificare sau dezvoltare.</li>
-                                        <li>Sesizari de modificare legislativa neimplementata.</li>
-                                        <li>Sugestii de optimizare.</li>
-                                    </ul>
-                                    <p>Beneficiarul poate crea si gestiona sesizarile prin intermediul programului <strong>ROA Suport Tehnic</strong>. Romfast inregistreaza, prioritizeaza si urmareste rezolvarea tuturor sesizarilor.</p>
-                                </div>
-                            </div>
+                    </div>
+
+                    <!-- Communication from Beneficiary -->
+                    <div>
+                        <h3 class="text-xl font-semibold professional-text-primary mb-4 flex items-center">
+                            <i data-lucide="arrow-up" class="w-5 h-5 mr-2 text-green-600"></i>
+                            Comunicări din partea Beneficiarului (Sesizări)
+                        </h3>
+                        <p class="professional-text-secondary mb-4">
+                            Beneficiarul ne poate comunica oricând:
+                        </p>
+                        <div class="grid sm:grid-cols-2 gap-4 mb-4">
+                            <ul class="space-y-2 professional-text-secondary">
+                                <li class="flex items-center space-x-2">
+                                    <i data-lucide="alert-circle" class="w-4 h-4 text-red-500"></i>
+                                    <span>Sesizări de funcționare eronată</span>
+                                </li>
+                                <li class="flex items-center space-x-2">
+                                    <i data-lucide="plus-circle" class="w-4 h-4 text-blue-500"></i>
+                                    <span>Cereri de modificare sau dezvoltare</span>
+                                </li>
+                            </ul>
+                            <ul class="space-y-2 professional-text-secondary">
+                                <li class="flex items-center space-x-2">
+                                    <i data-lucide="file-text" class="w-4 h-4 text-orange-500"></i>
+                                    <span>Sesizări de modificare legislativă</span>
+                                </li>
+                                <li class="flex items-center space-x-2">
+                                    <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i>
+                                    <span>Sugestii de optimizare</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="bg-yellow-50 dark:bg-yellow-900 dark:bg-opacity-20 rounded-lg p-4 border-l-4 border-yellow-500">
+                            <p class="professional-text-secondary">
+                                <strong>Beneficiarul poate crea și gestiona sesizările prin intermediul programului ROA Suport Tehnic.</strong> 
+                                Romfast înregistrează, prioritizează și urmărește rezolvarea tuturor sesizărilor.
+                            </p>
                         </div>
                     </div>
                 </section>
             </div>
 
-            <div class="col-lg-4">
-                <div class="card">
-                    <div class="card-body">
-                        <h5 class="card-title">Baza de Date si Backup</h5>
-                        <p class="card-text">Mentenanta bazei de date Oracle este inclusa in serviciile de suport tehnic. De asemenea, furnizam o metoda automata si periodica de back-up a datelor.</p>
+            <!-- Sidebar -->
+            <div class="space-y-6">
+                <!-- Database & Backup Card -->
+                <div class="professional-card p-6">
+                    <div class="professional-icon-wrapper mb-4">
+                        <i data-lucide="hard-drive" class="w-8 h-8 text-white"></i>
                     </div>
+                    <h3 class="text-lg font-semibold mb-4 professional-text-primary">Baza de Date și Backup</h3>
+                    <p class="professional-text-secondary text-sm leading-relaxed">
+                        Mentenanța bazei de date Oracle este inclusă în serviciile de suport tehnic. 
+                        De asemenea, furnizăm o metodă automată și periodică de back-up a datelor.
+                    </p>
                 </div>
-                <div class="card mt-4">
-                    <div class="card-body">
-                        <h5 class="card-title">Contract</h5>
-                        <p class="card-text">Serviciile de suport tehnic post-implementare fac obiectul unui "Contract de suport tehnic" ce va fi incheiat intre parti.</p>
+
+                <!-- Contract Card -->
+                <div class="professional-card p-6">
+                    <div class="professional-icon-wrapper mb-4">
+                        <i data-lucide="file-contract" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-4 professional-text-primary">Contract</h3>
+                    <p class="professional-text-secondary text-sm leading-relaxed mb-4">
+                        Serviciile de suport tehnic post-implementare fac obiectul unui "Contract de suport tehnic" 
+                        ce va fi încheiat între părți.
+                    </p>
+                    <a href="contact.html" class="professional-btn-secondary px-4 py-2 text-sm w-full inline-block text-center">
+                        <span>Solicită Contract</span>
+                    </a>
+                </div>
+
+                <!-- Quick Support Tools -->
+                <div class="professional-card p-6">
+                    <div class="professional-icon-wrapper mb-4">
+                        <i data-lucide="tools" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-4 professional-text-primary">Instrumente Suport</h3>
+                    <div class="space-y-3">
+                        <a href="../romfastsuport/files/romfast_suport.exe" class="professional-btn-secondary px-4 py-2 text-sm w-full inline-block text-center flex items-center justify-center">
+                            <i data-lucide="download" class="w-4 h-4 mr-2"></i>
+                            <span>Romfast Suport</span>
+                        </a>
+                        <a href="https://www.teamviewer.com/en/" target="_blank" class="professional-btn-secondary px-4 py-2 text-sm w-full inline-block text-center flex items-center justify-center">
+                            <i data-lucide="monitor" class="w-4 h-4 mr-2"></i>
+                            <span>TeamViewer</span>
+                        </a>
+                        <a href="http://www.ammyy.com/en/" target="_blank" class="professional-btn-secondary px-4 py-2 text-sm w-full inline-block text-center flex items-center justify-center">
+                            <i data-lucide="screen-share" class="w-4 h-4 mr-2"></i>
+                            <span>Ammyy Admin</span>
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
+
+        <!-- Call to Action Section -->
+        <section class="professional-support text-center">
+            <h2 class="text-2xl font-bold mb-6 professional-text-primary">Ai nevoie de suport tehnic?</h2>
+            <p class="professional-text-secondary mb-8 max-w-2xl mx-auto">
+                Echipa noastră de specialiști este pregătită să îți ofere suportul de care ai nevoie 
+                pentru a utiliza eficient sistemul ROA.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                    <span>Contactează Suportul</span>
+                </a>
+                <a href="../roa/aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                    <span>Află mai mult despre ROA</span>
+                </a>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidențialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/menu/suport.html b/menu/suport.html
index b78bee8..4f94ee5 100644
--- a/menu/suport.html
+++ b/menu/suport.html
@@ -1,19 +1,267 @@
-<?xml version="1.0" encoding="UTF-8"?><!-- ... IE7 in quirks mode ... --> <head> 					<title>Romfast - Suport Files</title>  					<meta http-equiv=Content-Type content="text/html; charset=UTF-8"> 					<base> 					<META http-equiv="cache-control" content="">                                         			<META name="robots" content="index,follow">                     		                    			<META name="description" content="Our company  is a global management consulting, technology services and outsourcing company.">                     		                    			<META name="keywords" content="business, company, consulting, approach, experience, professional, dynamic, strategy, development, management, planning, success">                     		                    			<META name="generator" content="eturnkeys">                     		                    			<META name="copyright" content="eturnkeys">                     		                     					<LINK href="../style.css" type="text/css" rel="stylesheet"> 										<script type="text/javascript" src="../js/definePosition.js"></script> 					 					<link rel="stylesheet" type="text/css" href="../js/ddlevelsfiles/ddlevelsmenu-base.css" /> 					<link rel="stylesheet" type="text/css" href="../js/ddlevelsfiles/ddlevelsmenu-topbar.css" /> 					<link rel="stylesheet" type="text/css" href="../js/ddlevelsfiles/ddlevelsmenu-sidebar.css" /> 					<script type="text/javascript" src="../js/ddlevelsfiles/ddlevelsmenu.js">   					/*********************************************** 					* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com) 					* This notice MUST stay intact for legal use 					* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 					***********************************************/ 					</script>    									</head> 										<body>                                        							<table style="width:100%" cellpadding="0" cellspacing="0"> 	<tr>     	     </tr>     <tr>     	<td>         	<table cellpadding="0" cellspacing="0"><tr>                 <td class="tall_template_bottom"></td>                 <td>                     <table style="width:100%" cellpadding="0" cellspacing="0">                         <tr>                             <td class="header_bottom">                                 <table cellpadding="0" cellspacing="0">                                                                          <tr>                                         <td width="921" colspan="2" class="bottom_header">                                         <table width="625" align="center">                                         <tr>                                         <td>                                                                                <div class="top_slogan2">                                                                                <div class="indent_top_slogan2">                                           <img src="../images/logotype/logotype_file/manute.png" width="145" height="120"/>                                           </div>                                         </div >                                         </td>                                         <td width="403">                                            <div class="top_slogan">                                                 <div class="indent_top_slogan"><img src="../images/company_name/f4a0e7ba2d1968b.png"  alt="Top Slogan" width="200" height="31"   /></div>                                                                                       </div>                                             <div class="bottom_slogan">                                                 <div class="indent_bottom_slogan"> 	<img src="../images/slogan/119a4edd7a91355.png"  alt="Bottom Slogan"   /></div> </div>                                                                              </tr>                                         </table>                                                                                                                                   <div class="header_width"></div></td>                                     </tr>                                 </table>                             </td>                         </tr>                         <tr>                         <td bgcolor="#08819C"  class="content_menu">                          <div class="menu">                                     	            <div id="ddtopmenubar" class="mattblackmenu">                            <table cellpadding="0" cellspacing="0" style="width:100%;"><tr>             	                                <td class="middle_header">                                </td>                                    <td class="bg_button">         <a href='../index.html'  >                              Prima pagina                           </a>           </td>                                         <td class="bg_button">                           <a href='desprenoi.html'  >                              Despre noi                            </a>                     </td>                                         <td class="bg_button">                           <a href=javascript:void(0)  rel="ddsubmenu29">                              Produse                            </a>                     </td>                                                             <td class="bg_button">                     <a href=javascript:void(0)  rel="ddsubmenu2">                              Servicii                            </a>                     </td>                                          <td class="bg_button">                           <a href='referinte.html'>                              Referinte                            </a>                     </td>                                         <td class="bg_button">                     <a href='angajari.html'  >                              Angajari                            </a>                     </td>                     <td class="bg_button">                     <a href='contact.html'  >                              Contact                            </a>                     </td>                     <td class="bg_button">                     <a href='preturicontafin.html'  >                              Preturi                            </a> </td>                                                     	<td class="tall_menu_right">&nbsp;</td>             </tr></table>                         </div>                                       <ul id="ddsubmenu29" class="ddsubmenustyle">                                                                     <li>                                             <a href='../roa/2.html'>                                                  ROA                                            </a>                                         </li>                                                                             <li>                                             <a href='../contafin/2.html'>                                                  CONTAFIN                                            </a>                                         </li>                                       </ul>                                                                                                     <ul id="ddsubmenu2" class="ddsubmenustyle">                                                                     <li>                                            <a href='analiza.html'>                                                 Analiza                                            </a>                                         </li>                                                                             <li>                                             <a href='implementare.html'>                                                 Implementare                                           </a>                                         </li>                                                                             <li>                                             <a href='roa-suport-tehnic.html'>                                                  Suport tehnic ROA                                          </a>                                         </li>                                                                             <li>                                             <a href='contafin-suport-tehnic.html'>                                                  Suport tehnic CONTAFIN                                            </a>                                         </li>                                         </li>                                                                             <li>                                             <a href='alteservicii.html'>                                                  Alte servicii                                            </a>                                         </li>                                       </ul>                          <script type="text/javascript"> 	ddlevelsmenu.setup("ddtopmenubar", "topbar") </script>                                     </div>         </td>                         </tr>                         <tr>                             <td class="content_top">    <table cellpadding="0" cellspacing="0" class="content">              <tr> 			<td class="left_column_sub1">        	            	<div class="inner_left_sub1"> 					<!--start content of site_links content --><div class="doubleHeaderDiv">
-				<img src="suportimages/suport.png" width="152" height="29">                     </div> <p>&nbsp</p>
-<p>&nbsp</p>
-<p><a href="http://www.romfast.ro/romfastsuport/files/kit_client41.exe">Kit Client 4.1</a></p>
-<p>&nbsp</p>
-<p><a href="http://www.romfast.ro/romfastsuport/files/ContafinClient5.exe">Kit Client 5</a></p>
-<p>&nbsp</p>
-<p><a href="http://www.romfast.ro/romfastsuport/files/vfp7sp1rt.exe">VFP7 SP1 Runtime</a></p>
-<p>&nbsp</p>
-<p><a href="http://www.romfast.ro/romfastsuport/files/vfp9rtsp2.exe">VFP9 SP2 Runtime</a></p>
-<p>&nbsp</p>
-<p><a href="http://www.romfast.ro/romfastsuport/files/instantclient_11_2.zip">Oracle InstantClient x32 11.2.0.2</a> (53 MB)</p>
-<p>Pe Windows X64 folositi %WINDIR%\SysWOW64\odbcad32.exe pentru managerul ODBC 32bits</p>
-<p>&nbsp</p>
-<p><a href="http://www.romfast.ro/romfastsuport/files/vcredist_x86.exe">Microsoft Visual C++ 2005 SP1 Redistributable Package (x86)</a></p>
-<p>&nbsp</p>
-<p><a href="http://www.romfast.ro/romfastsuport/files/romfast_suport.exe">Romfast Suport</a></p>
-<p>&nbsp</p>
-</div>    	            	 </td> 			<td  class="right_column_sub1">             	<div class="inner_right_sub1"> 					<!--start content of pages_texts content -->	<div>          <div class='blockLeftContent'>                       <p>&nbsp;</p>         <p><strong><a href="../servicii/acceseazaroaonline.html">Acceseaza online ROA!</a></strong></p>         <p>&nbsp;</p>         <p><a href="../servicii/acceseazaroaonline.html"><img src="../roa/images/roapac.gif" alt="" width="110" height="142" align="texttop" /></a></p>         <p>&nbsp;</p>         <p><span id="body_text">Pentru conectarea la serverul ROA DEMO folositi <strong>Internet Explorer.</strong></span></p>         <p>&nbsp;</p>         <hr/>                 <p>&nbsp;</p>         <p><strong><a href="../servicii/descarcacontafin.html">Descarca  Contafin!</a></strong></p>         <p><a href="../servicii/descarcacontafin.html"><img src="../contafin/images/contafinpac.gif" alt="" width="110" height="139" align="absmiddle" /></a></p>         <p>&nbsp;</p> <p style="text-align: center;">&nbsp;</p></div>                 <br /><br />         	</div> 		<!--end content of pages_texts content -->					                 </div> 			</td> 		</tr>      </table>                             </td>                         </tr>                         <tr>                             <td class="footer">                                 <div class="inner_footer">                                                             <p>Copyright 2018 &copy; <strong>Romfast SRL</strong>.</p>        	                                                                                                     </div>                             </td>                         </tr>                     </table>                 </td>                <td class="tall_template_bottom">&nbsp;</td>            </tr></table>        </td>     </tr> </table>        						</body>  </html> 			
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Romfast - Suport Tehnic și Descărcări</title>
+    <meta name="description" content="Pagina de suport tehnic Romfast cu descărcări pentru ROA și Contafin: kit client, runtime-uri, Romfast Suport și acces la versiunile online.">
+    <meta name="keywords" content="suport tehnic romfast, descarcare roa, kit client, vfp runtime, oracle instantclient, microsoft visual c++, romfast suport">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
+</head>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
+                    </div>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Hero Section -->
+        <section class="professional-hero text-center">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Suport Tehnic & Descărcări
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Descarcă componentele necesare pentru ROA și Contafin, accesează instrumentele de suport tehnic
+                    și conectează-te online la aplicațiile Romfast.
+                </p>
+            </div>
+        </section>
+
+        <!-- Downloads Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Descărcări Necesare</h2>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                
+                <!-- Kit Client -->
+                <div class="professional-card p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="package" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Kit Client</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Componente client pentru aplicațiile ROA și Contafin
+                    </p>
+                    <div class="space-y-3">
+                        <a href="http://www.romfast.ro/romfastsuport/files/kit_client41.exe" 
+                           class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                            <span>Kit Client 4.1</span>
+                        </a>
+                        <a href="http://www.romfast.ro/romfastsuport/files/ContafinClient5.exe" 
+                           class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                            <span>Kit Client 5</span>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Runtime Components -->
+                <div class="professional-card p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="cpu" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Runtime Components</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Componente runtime necesare pentru funcționarea aplicațiilor
+                    </p>
+                    <div class="space-y-3">
+                        <a href="http://www.romfast.ro/romfastsuport/files/vfp7sp1rt.exe" 
+                           class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                            <span>VFP7 SP1 Runtime</span>
+                        </a>
+                        <a href="http://www.romfast.ro/romfastsuport/files/vfp9rtsp2.exe" 
+                           class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                            <span>VFP9 SP2 Runtime</span>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Database Components -->
+                <div class="professional-card p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="database" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Database Components</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Componente pentru conexiunea la baza de date Oracle
+                    </p>
+                    <div class="space-y-3">
+                        <a href="http://www.romfast.ro/romfastsuport/files/instantclient_11_2.zip" 
+                           class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                            <span>Oracle InstantClient x32 <br>(53 MB)</span>
+                        </a>
+                        <div class="text-xs professional-text-secondary mt-2 bg-blue-50 p-2 rounded">
+                            Pe Windows X64 folosiți %WINDIR%\SysWOW64\odbcad32.exe pentru managerul ODBC 32bits
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Microsoft Components -->
+                <div class="professional-card p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="settings" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Microsoft Components</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Pachete Microsoft necesare pentru funcționarea aplicațiilor
+                    </p>
+                    <a href="http://www.romfast.ro/romfastsuport/files/vcredist_x86.exe" 
+                       class="professional-btn-secondary px-6 py-3 w-full inline-block">
+                        <span>Visual C++ 2005 SP1 Redistributable (x86)</span>
+                    </a>
+                </div>
+
+                <!-- Remote Support -->
+                <div class="professional-card p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="headphones" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Suport Tehnic</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Aplicație pentru suport tehnic la distanță
+                    </p>
+                    <a href="http://www.romfast.ro/romfastsuport/files/romfast_suport.exe" 
+                       class="professional-btn-primary px-6 py-3 w-full inline-block">
+                        <span>Descarcă Romfast Suport</span>
+                    </a>
+                </div>
+
+                <!-- Online Access -->
+                <div class="professional-card professional-card-featured p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="monitor" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Acces Online</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Accesează direct aplicațiile ROA și Contafin online
+                    </p>
+                    <div class="space-y-3">
+                        <a href="../servicii/acceseazaroaonline.html" 
+                           class="professional-btn-urgent px-6 py-2 w-full inline-block text-sm">
+                            <span>Accesează ROA Online</span>
+                        </a>
+                        <a href="../servicii/descarcacontafin.html" 
+                           class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                            <span>Descarcă Contafin</span>
+                        </a>
+                        <div class="text-xs professional-text-secondary mt-2 bg-yellow-50 p-2 rounded">
+                            Pentru ROA DEMO folosiți <strong>Internet Explorer</strong>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </section>
+
+        <!-- Remote Support Tools Section -->
+        <section class="professional-support text-center">
+            <h2 class="text-2xl font-bold mb-8 professional-text-primary">Instrumente de Asistență la Distanță</h2>
+            <div class="grid sm:grid-cols-3 gap-6">
+                <div class="professional-support-card">
+                    <i data-lucide="download" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Romfast Suport</h3>
+                    <p class="text-sm professional-text-secondary mb-4">Aplicația noastră pentru suport tehnic</p>
+                    <a href="http://www.romfast.ro/romfastsuport/files/romfast_suport.exe" 
+                       class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Descarcă</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="monitor" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
+                    <p class="text-sm professional-text-secondary mb-4">Soluție alternativă pentru control la distanță</p>
+                    <a href="http://www.ammyy.com/en/" target="_blank" 
+                       class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Accesează</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="video" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
+                    <p class="text-sm professional-text-secondary mb-4">Platformă profesională pentru asistență</p>
+                    <a href="https://www.teamviewer.com/en/" target="_blank" 
+                       class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Accesează</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
+</body>
+</html> 			
\ No newline at end of file
diff --git a/roa/aplicatii-erp.html b/roa/aplicatii-erp.html
index 1fc6317..5b620bb 100644
--- a/roa/aplicatii-erp.html
+++ b/roa/aplicatii-erp.html
@@ -127,7 +127,7 @@
                     <p class="professional-text-secondary mb-4 leading-relaxed">
                         Sistem complet de contabilitate și gestiune financiară pentru monitorizarea și controlul resurselor financiare.
                     </p>
-                    <a href="roa-contabilitate.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
+                    <a href="roa-financiar-contabilitate.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
                         <span>Afla mai mult</span>
                     </a>
                 </div>
@@ -169,7 +169,7 @@
                     <p class="professional-text-secondary mb-4 leading-relaxed">
                         Control complet asupra stocurilor: intrări, ieșiri, inventariere și optimizarea nivelurilor.
                     </p>
-                    <a href="roa-gestiuni.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
+                    <a href="roa-gestiune.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
                         <span>Afla mai mult</span>
                     </a>
                 </div>
@@ -183,7 +183,7 @@
                     <p class="professional-text-secondary mb-4 leading-relaxed">
                         Gestionarea eficientă a furnizorilor: comenzi, livrări și evaluarea performanței.
                     </p>
-                    <a href="roa-furnizori.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
+                    <a href="roa-contracte-furnizori.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
                         <span>Afla mai mult</span>
                     </a>
                 </div>
diff --git a/roa/roa-analiza.html b/roa/roa-analiza.html
new file mode 100644
index 0000000..98c6b49
--- /dev/null
+++ b/roa/roa-analiza.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ROA Analiză Globală - Sistem de Analiză și Raportare | Romfast</title>
+    <meta name="description" content="ROA Analiză Globală oferă instrumente avansate pentru analiza datelor, rapoarte complexe și vizualizări interactive pentru luarea deciziilor strategice în companie.">
+    <meta name="keywords" content="analiza globala, rapoarte erp, business intelligence, analiza datelor, romfast, roa, dashboard, kpi, indicatori performanta">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
+</head>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
+                    </div>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Page Header Section -->
+        <section class="professional-hero text-center mb-12">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="bar-chart-3" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA Analiză Globală
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Transformă datele în insight-uri strategice. Sistem avansat de analiză și raportare care oferă 
+                    vizibilitate completă asupra performanței companiei prin rapoarte interactive și KPI-uri în timp real.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicita Demo</span>
+                    </a>
+                    <button class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Vezi Caracteristici</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Main Features Grid -->
+        <div class="grid lg:grid-cols-3 gap-8">
+            <!-- Main Features Content -->
+            <div class="lg:col-span-2">
+                <!-- Dashboard & Visualization Card -->
+                <div class="professional-card p-8 mb-8">
+                    <div class="flex items-center justify-center mb-6">
+                        <div class="professional-icon-wrapper">
+                            <i data-lucide="pie-chart" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Dashboard Interactiv</h2>
+                    
+                    <div class="grid md:grid-cols-2 gap-8 items-center mb-8">
+                        <div>
+                            <p class="text-lg professional-text-secondary leading-relaxed mb-6">
+                                Vizualizează toate datele importante ale companiei într-un dashboard centralizat, 
+                                cu grafice interactive și indicatori de performanță în timp real.
+                            </p>
+                            <ul class="space-y-3 professional-text-secondary">
+                                <li class="flex items-start space-x-3">
+                                    <i data-lucide="trending-up" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                    <span>KPI-uri personalizabile pe domeniile de activitate</span>
+                                </li>
+                                <li class="flex items-start space-x-3">
+                                    <i data-lucide="bar-chart-4" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                    <span>Grafice interactive pentru analiza tendințelor</span>
+                                </li>
+                                <li class="flex items-start space-x-3">
+                                    <i data-lucide="gauge" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                    <span>Alerte automate pentru parametri critici</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="text-center">
+                            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-lg">
+                                <i data-lucide="monitor" class="w-20 h-20 text-blue-600 mx-auto mb-4"></i>
+                                <p class="text-sm professional-text-secondary">Dashboard în timp real</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Advanced Reports Card -->
+                <div class="professional-card professional-card-featured p-8">
+                    <div class="flex items-center justify-center mb-6">
+                        <div class="professional-icon-wrapper">
+                            <i data-lucide="file-text" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Rapoarte Avansate</h2>
+                    
+                    <div class="space-y-6 mb-8">
+                        <div class="flex items-start space-x-4 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
+                            <i data-lucide="chart-line" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <div>
+                                <h4 class="font-semibold professional-text-primary mb-2">Analiză Financiară Complexă</h4>
+                                <p class="professional-text-secondary">
+                                    Rapoarte detaliate de profitabilitate, analiză cash-flow, buget vs. realizat, 
+                                    previziuni financiare și scenarii de dezvoltare.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start space-x-4 p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
+                            <i data-lucide="users" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <div>
+                                <h4 class="font-semibold professional-text-primary mb-2">Analiză Performanță Echipe</h4>
+                                <p class="professional-text-secondary">
+                                    Monitorizarea productivității echipelor, analiza costurilor cu personalul, 
+                                    rapoarte de eficiență și evaluarea ROI-ului investițiilor în HR.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start space-x-4 p-4 bg-purple-50 rounded-lg border-l-4 border-purple-500">
+                            <i data-lucide="package" class="w-6 h-6 text-purple-600 mt-1 flex-shrink-0"></i>
+                            <div>
+                                <h4 class="font-semibold professional-text-primary mb-2">Analiză Operațională</h4>
+                                <p class="professional-text-secondary">
+                                    Rapoarte de gestiune, analiza rotației stocurilor, performanța furnizorilor, 
+                                    optimizarea proceselor și identificarea blocajelor operaționale.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sidebar -->
+            <div class="lg:col-span-1">
+                <!-- Key Features Card -->
+                <div class="professional-card service-technology text-center p-8 mb-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="target" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Caracteristici Cheie</h3>
+                    <div class="space-y-4 text-left">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Rapoarte în timp real</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Export în multiple formate</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Filtrare și sortare avansată</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Grafice interactive</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Alerte personalizabile</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Business Intelligence Card -->
+                <div class="professional-card service-reliability text-center p-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="brain" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Business Intelligence</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Utilizează puterea analizei predictive pentru a anticipa tendințele și lua decizii strategice informate.
+                    </p>
+                    <div class="space-y-3 text-left mb-6">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="zap" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Analiză predictivă</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="layers" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Data mining avansat</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="compass" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Insight-uri strategice</span>
+                        </div>
+                    </div>
+                    <a href="../menu/contact.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
+                        <span>Solicita Consultanță</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- ROA Modules Integration Section -->
+        <section class="mt-16 mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Integrare cu Modulele ROA</h2>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Financial Analysis -->
+                <div class="professional-card service-technology text-center p-6">
+                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="dollar-sign" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Financiar</h3>
+                    <p class="professional-text-secondary text-sm">
+                        Analiză profitabilitate, cash-flow, buget vs realizat
+                    </p>
+                </div>
+
+                <!-- Sales Analysis -->
+                <div class="professional-card service-reliability text-center p-6">
+                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="shopping-cart" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Vânzări</h3>
+                    <p class="professional-text-secondary text-sm">
+                        Performanță vânzări, analiza clienților, tendințe piață
+                    </p>
+                </div>
+
+                <!-- Inventory Analysis -->
+                <div class="professional-card service-technology text-center p-6">
+                    <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="package" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Gestiune</h3>
+                    <p class="professional-text-secondary text-sm">
+                        Rotația stocurilor, optimizare inventar, costuri
+                    </p>
+                </div>
+
+                <!-- HR Analysis -->
+                <div class="professional-card service-reliability text-center p-6">
+                    <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="users" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">HR</h3>
+                    <p class="professional-text-secondary text-sm">
+                        Performanță angajați, costuri salariale, productivitate
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Professional Support Tools Section -->
+        <section class="professional-support text-center">
+            <h2 class="text-2xl font-bold mb-8 professional-text-primary">Suport Tehnic</h2>
+            <div class="grid sm:grid-cols-3 gap-6">
+                <div class="professional-support-card">
+                    <i data-lucide="download" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Descarca Romfast Suport</h3>
+                    <a href="../romfastsuport/files/romfast_suport.exe" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Descarca</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="monitor" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
+                    <a href="http://www.ammyy.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Acceseaza</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="video" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
+                    <a href="https://www.teamviewer.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Acceseaza</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/roa/roa-aplicatii-specifice.html b/roa/roa-aplicatii-specifice.html
new file mode 100644
index 0000000..69e97d4
--- /dev/null
+++ b/roa/roa-aplicatii-specifice.html
@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ROA Aplicații Specifice | Romfast - Module Specializate și Utilitare ERP</title>
+    <meta name="description" content="ROA Aplicații Specifice - Module specializate și utilitare pentru optimizarea funcționalității sistemului ERP. Soluții personalizate pentru nevoile specifice ale afacerii.">
+    <meta name="keywords" content="aplicatii specifice roa, module specializate erp, utilitare roa, personalizare erp, solutii specifice business, configurare avansata roa, tools erp, romfast aplicatii">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
+</head>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
+                    </div>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link border-b-2 border-blue-200">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Breadcrumb Navigation -->
+        <nav class="mb-8">
+            <div class="flex items-center space-x-2 text-sm professional-text-secondary">
+                <a href="../index.html" class="hover:text-blue-600 transition-colors">Prima pagina</a>
+                <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                <a href="aplicatii-erp.html" class="hover:text-blue-600 transition-colors">ROA</a>
+                <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                <span class="text-gray-500">Aplicații Specifice ROA</span>
+            </div>
+        </nav>
+
+        <!-- ROA Specific Applications Hero Section -->
+        <section class="professional-hero text-center">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="settings" class="w-12 h-12 text-white"></i>
+                    </div>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    Aplicații Specifice ROA
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Module specializate și utilitare pentru optimizarea funcționalității sistemului ROA. 
+                    Soluții personalizate care se adaptează perfect la nevoile specifice ale afacerii tale.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicită Configurare</span>
+                    </a>
+                    <a href="../menu/roa-suport-tehnic.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Suport Tehnic</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Specific Applications Grid -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Module Specializate ROA</h2>
+            <p class="text-lg professional-text-secondary text-center mb-12 max-w-4xl mx-auto leading-relaxed">
+                Aplicațiile specifice ROA oferă funcționalități avansate și utilitare specializate pentru diverse domenii de activitate, 
+                permițând adaptarea sistemului la cerințele unice ale fiecărei organizații.
+            </p>
+            
+            <!-- Applications Grid -->
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- ROA Utilitare de Sistem -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="tool" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-6 professional-text-primary">ROA Utilitare de Sistem</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Backup și restore automat al bazelor de date</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Optimizare și mentenanță sistem</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Monitorizare performanță aplicații</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Import/export date în diferite formate</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- ROA Configurator Avansat -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="sliders" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-6 professional-text-primary">ROA Configurator Avansat</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Personalizare interfețe utilizator</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Configurare fluxuri de lucru specifice</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Definire câmpuri și formule customizate</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Setare reguli de validare avansate</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- ROA Raportare Avansată -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="file-chart-column" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-6 professional-text-primary">ROA Raportare Avansată</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Generator rapoarte personalizate</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Dashboard-uri interactive și grafice</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Programare automată livrare rapoarte</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Export în Excel, PDF, XML</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- ROA Integrare Sisteme -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="arrow-right-left" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-6 professional-text-primary">ROA Integrare Sisteme</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>API pentru integrare aplicații externe</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Conectori pentru bănci și instituții</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Sincronizare cu sistemele de e-commerce</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Import date din alte sisteme ERP</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- ROA Securitate Avansată -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="shield-check" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-6 professional-text-primary">ROA Securitate Avansată</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Autentificare cu doi factori (2FA)</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Audit trail detaliat pentru toate acțiunile</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Criptare avansată a datelor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Gestionare roluri și permisiuni granulare</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- ROA Mobile & Web -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="smartphone" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-6 professional-text-primary">ROA Mobile & Web</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Aplicație mobilă pentru tablete și smartphone</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Interfață web responsivă</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Sincronizare timp real cu sistemul central</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Funcționalitate offline pentru operații critice</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Key Benefits Section -->
+        <section class="mb-16">
+            <div class="professional-card professional-card-featured p-8">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="zap" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <h2 class="text-3xl font-bold text-center mb-8 professional-text-primary">Avantaje Aplicații Specifice ROA</h2>
+                <div class="grid md:grid-cols-2 gap-8 items-center">
+                    <div>
+                        <p class="text-lg professional-text-secondary mb-6 leading-relaxed">
+                            Aplicațiile specifice ROA transformă sistemul ERP standard într-o soluție completă, 
+                            adaptată perfect la specificul și nevoile unice ale organizației tale.
+                        </p>
+                        <ul class="space-y-4 professional-text-secondary">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                                <span><strong>Personalizare Completă:</strong> Adaptare la procesele specifice ale companiei</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                                <span><strong>Automatizare Avansată:</strong> Fluxuri de lucru automatizate pentru eficiență maximă</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                                <span><strong>Integrare Seamless:</strong> Conectivitate cu toate sistemele existente</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                                <span><strong>Scalabilitate:</strong> Creștere și adaptare odată cu dezvoltarea business-ului</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="text-center">
+                        <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-8 rounded-lg">
+                            <i data-lucide="settings-2" class="w-24 h-24 text-blue-600 mx-auto mb-4"></i>
+                            <h3 class="text-xl font-semibold professional-text-primary mb-2">Configurare Expertă</h3>
+                            <p class="professional-text-secondary text-sm">
+                                Echipa noastră de specialiști configurează aplicațiile specifice 
+                                pentru a se integra perfect în fluxurile tale de lucru.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Implementation Process Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Proces de Implementare</h2>
+            <div class="grid md:grid-cols-4 gap-6">
+                <div class="text-center">
+                    <div class="professional-icon-wrapper mb-4">
+                        <i data-lucide="search" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">1. Analiza Nevoilor</h3>
+                    <p class="professional-text-secondary text-sm">Identificăm cerințele specifice și procesele existente ale companiei tale.</p>
+                </div>
+                <div class="text-center">
+                    <div class="professional-icon-wrapper mb-4">
+                        <i data-lucide="palette" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">2. Design & Planificare</h3>
+                    <p class="professional-text-secondary text-sm">Proiectăm soluții personalizate și planificăm implementarea pas cu pas.</p>
+                </div>
+                <div class="text-center">
+                    <div class="professional-icon-wrapper mb-4">
+                        <i data-lucide="code" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">3. Dezvoltare & Testare</h3>
+                    <p class="professional-text-secondary text-sm">Dezvoltăm și testăm aplicațiile specifice în mediu controlat.</p>
+                </div>
+                <div class="text-center">
+                    <div class="professional-icon-wrapper mb-4">
+                        <i data-lucide="rocket" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">4. Deployment & Suport</h3>
+                    <p class="professional-text-secondary text-sm">Implementăm soluțiile și oferim suport continuu pentru optimizări.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Call to Action Section -->
+        <section class="professional-support text-center">
+            <h2 class="text-2xl font-bold mb-8 professional-text-primary">Începe Personalizarea ROA</h2>
+            <p class="text-lg professional-text-secondary mb-8 max-w-3xl mx-auto leading-relaxed">
+                Transformă sistemul ROA într-o soluție perfectă pentru afacerea ta cu aplicațiile noastre specifice. 
+                Contactează echipa de experți pentru o consultanță gratuită.
+            </p>
+            <div class="grid sm:grid-cols-3 gap-6">
+                <div class="professional-support-card">
+                    <i data-lucide="phone" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Consultanță Gratuită</h3>
+                    <p class="professional-text-secondary mb-4 text-sm">Discută cu experții noștri despre nevoile specifice</p>
+                    <a href="../menu/contact.html" class="professional-btn-primary px-6 py-2 w-full inline-block">
+                        <span>Contactează-ne</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="play-circle" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Demo Personalizat</h3>
+                    <p class="professional-text-secondary mb-4 text-sm">Vezi aplicațiile specifice în acțiune</p>
+                    <a href="../menu/contact.html" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Programează Demo</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="file-text" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">Documentație Tehnică</h3>
+                    <p class="professional-text-secondary mb-4 text-sm">Accesează ghidurile detaliate de implementare</p>
+                    <a href="../menu/roa-suport-tehnic.html" class="professional-btn-secondary px-6 py-2 w-full inline-block">
+                        <span>Vezi Resursele</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/roa/roa-clienti.html b/roa/roa-clienti.html
new file mode 100644
index 0000000..8d99f7a
--- /dev/null
+++ b/roa/roa-clienti.html
@@ -0,0 +1,354 @@
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ROA Clienti - Managementul Relațiilor cu Clienții - Romfast</title>
+    <meta name="description" content="ROA Clienti - Sistem complet pentru managementul relațiilor cu clienții, prospecte și fidelizare. Monitorizare interacțiuni, istoricul clientilor și analize comportamentale.">
+    <meta name="keywords" content="program clienti, crm, managementul relatiilor cu clientii, roa, romfast, sistem informatic erp, prospectare clienti, fidelizare, suport tehnic, implementare erp">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
+</head>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
+                    </div>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Breadcrumb -->
+        <nav aria-label="breadcrumb" class="mb-8">
+            <ol class="flex items-center space-x-2 text-sm professional-text-secondary">
+                <li><a href="../index.html" class="hover:text-blue-600 transition-colors">Acasă</a></li>
+                <li><i data-lucide="chevron-right" class="w-4 h-4 mx-2"></i></li>
+                <li><a href="aplicatii-erp.html" class="hover:text-blue-600 transition-colors">ROA Applications</a></li>
+                <li><i data-lucide="chevron-right" class="w-4 h-4 mx-2"></i></li>
+                <li class="professional-text-primary font-medium">ROA Clienti</li>
+            </ol>
+        </nav>
+
+        <!-- Professional Hero Section -->
+        <section class="professional-hero text-center">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper mb-8">
+                    <i data-lucide="user-check" class="w-12 h-12 text-white"></i>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA Clienti
+                </h1>
+                <h2 class="text-2xl md:text-3xl font-semibold mb-4 professional-text-primary">
+                    Managementul Relațiilor cu Clienții
+                </h2>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Sistem complet pentru gestionarea eficientă a relațiilor cu clienții, 
+                    de la prospectare la fidelizare, cu instrumente avansate de analiză și raportare.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicită Demo</span>
+                    </a>
+                    <a href="aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Toate Aplicațiile ROA</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Funcționalități Avansate CRM</h2>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Client Database Management -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="database" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Baza de Date Centralizată</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Gestionarea completă a informațiilor despre clienți, contacte, istoricul achizițiilor și preferințe.
+                    </p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Date complete client (contact, adrese, reprezentanți)</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Clasificare și segmentare automată</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Istoric complet al tranzacțiilor</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Interaction Tracking -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="activity" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Tracking Interacțiuni</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Monitorizarea completă a tuturor interacțiunilor cu clienții pentru o service impecabil.
+                    </p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Înregistrare apeluri și întâlniri</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Follow-up automat pentru oportunități</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Timeline complet al relației</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Sales Pipeline -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="trending-up" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Pipeline Vânzări</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Urmărirea oportunităților de vânzare prin toate etapele procesului comercial.
+                    </p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Etape personalizabile de vânzare</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Predicții și prognoze de vânzări</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Rapoarte performanță echipă</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Marketing Automation -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="mail" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Marketing Automation</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Campanii automate de marketing și comunicare segmentată pentru fidelizare.
+                    </p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Email marketing personalizat</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Campanii bazate pe comportament</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Analiză eficiență campanii</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Customer Support -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="headphones" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Suport Clienți</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Sistem integrat de ticketing și suport pentru rezolvarea rapidă a solicitărilor.
+                    </p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Sistem de ticketing integrat</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Bază de cunoștințe pentru clienți</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Monitorizare satisfacție client</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Analytics & Reports -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="bar-chart-3" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Analize și Rapoarte</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Dashboard-uri interactive și rapoarte detaliate pentru decizii informate.
+                    </p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Dashboard în timp real</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Analiză profitabilitate clienți</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span>Predicții și tendințe de piață</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Integration Benefits -->
+        <section class="professional-hero mb-16">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-8 professional-text-primary">Integrare Completă cu ROA ERP</h2>
+                <div class="grid md:grid-cols-2 gap-8 text-left">
+                    <div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary">Sincronizare Automată</h3>
+                        <ul class="professional-text-secondary space-y-3">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="link" class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                <span>Date clienti sincronizate cu modulul de facturare</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="link" class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                <span>Istoric comenzi disponibil în timp real</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="link" class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                <span>Actualizare automată stocuri și prețuri</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary">Avantaje Business</h3>
+                        <ul class="professional-text-secondary space-y-3">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="trending-up" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
+                                <span>Creșterea ratei de conversie cu 25-40%</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="clock" class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                <span>Reducerea timpului de răspuns la clienți</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="heart" class="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0"></i>
+                                <span>Îmbunătățirea satisfacției și loialității</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Call to Action -->
+        <section class="text-center">
+            <div class="professional-card p-12">
+                <h2 class="text-3xl font-bold mb-6 professional-text-primary">
+                    Transformă Relația cu Clienții Tăi
+                </h2>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed max-w-3xl mx-auto">
+                    Descoperă cum ROA Clienti poate revolutiona modul în care gestionezi relațiile cu clienții 
+                    și poate accelera creșterea business-ului tău prin instrumente profesionale de CRM.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicită Demonstrație Gratuită</span>
+                    </a>
+                    <a href="../menu/implementare.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Planifică Implementarea</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/roa/roa-contracte-furnizori.html b/roa/roa-contracte-furnizori.html
index 140e980..617cefe 100644
--- a/roa/roa-contracte-furnizori.html
+++ b/roa/roa-contracte-furnizori.html
@@ -3,177 +3,341 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROA Contracte furnizori</title>
-    <meta name="description" content="Romfast produce programe de contabilitate, gestiune, resurse umane, imobilizari, salarizare: ROA - Sistem Informatic ERP pentru managementul contractelor cu furnizorii.">
-    <meta name="keywords" content="programe horeca, Program service auto, program contabilitate gestiune salarii facturare mijloace fixe productie, roa, romfast, soft contabilitate gestiune salarii, sistem informatic contabilitate, contracte furnizori, management contracte, monitorizare contracte">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <title>ROA Managementul Relațiilor cu Furnizorii - Romfast</title>
+    <meta name="description" content="ROA - Sistem Informatic ERP pentru managementul contractelor cu furnizorii. Program professional pentru monitorizarea și gestionarea relațiilor cu furnizorii.">
+    <meta name="keywords" content="managementul furnizorilor, contracte furnizori, sistem ERP, ROA, romfast, monitorizare contracte, relații furnizori, software contracte">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
+<body class="min-h-screen">
 
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="../roa/aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="../menu/analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="../menu/implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="../menu/roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="../menu/alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
         <!-- Breadcrumbs -->
-        <nav aria-label="breadcrumb" class="mb-4">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii-erp.html">ROA - Romfast applications</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii.html">Aplicatii ROA</a></li>
-                <li class="breadcrumb-item active" aria-current="page">Contracte furnizori</li>
+        <nav aria-label="breadcrumb" class="mb-8">
+            <ol class="flex items-center space-x-2 text-sm">
+                <li><a href="../index.html" class="text-blue-600 hover:text-blue-800 transition-colors">Home</a></li>
+                <li class="text-gray-400">/</li>
+                <li><a href="aplicatii-erp.html" class="text-blue-600 hover:text-blue-800 transition-colors">ROA - Romfast applications</a></li>
+                <li class="text-gray-400">/</li>
+                <li><a href="aplicatii.html" class="text-blue-600 hover:text-blue-800 transition-colors">Aplicații ROA</a></li>
+                <li class="text-gray-400">/</li>
+                <li class="text-gray-600">Managementul Relațiilor cu Furnizorii</li>
             </ol>
         </nav>
-
-        <!-- Page Header -->
-        <section class="mb-5">
-            <div class="row align-items-center">
-                <div class="col-md-8">
-                    <img src="images/roacontractefurnizori.png" width="256" height="29" alt="ROA Contracte furnizori" class="mb-3">
+        
+        <!-- Professional Hero Section with Supplier Management Focus -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper mb-6">
+                    <i data-lucide="truck" class="w-12 h-12 text-white"></i>
                 </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA Managementul Relațiilor cu Furnizorii
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Sistem comprehensiv pentru monitorizarea și gestionarea contractelor de achiziție din punct de vedere financiar și operațional.
+                </p>
             </div>
         </section>
 
-        <!-- Content Section -->
-        <section class="mb-5">
-            <div class="row">
-                <div class="col-lg-8">
-                    <div class="content-section">
-                        <ul class="list-unstyled">
-                            <li class="mb-3"><strong>Scopul</strong> acestui program este acela de a monitoriza evolutia contractelor de achizitie din punct de vedere financiar.</li>
-                        </ul>
-
-                        <h3>Organizarea programului:</h3>
-                        <ul>
-                            <li class="mb-2">este in 5 pagini cu urmatoarele roluri:</li>
-                            <li class="mb-2"><strong>Definire</strong>: se definesc tipuri de contracte, responsabili, valute, furnizori, s.a.</li>
-                            <li class="mb-2"><strong>Lista contractelor</strong>: formular cu posibilitati de filtrare si ordonare a contractelor;</li>
-                            <li class="mb-2"><strong>Datele contractelor</strong>;</li>
-                            <li class="mb-2"><strong>Facturi</strong>: instrumente pentru urmarirea facturilor aferente contractului ales;</li>
-                            <li class="mb-2"><strong>Incasari</strong>: instrumente pentru urmarirea facturilor si platilor aferente contractului ales.</li>
-                        </ul>
-
-                        <h3>Contractele sunt descrise prin urmatoarele grupuri de caracteristici:</h3>
-                        <ul>
-                            <li class="mb-2"><strong>date generale</strong>: furnizorul, data si numarul contractului, tipul de contract, perioada de valabilitate, s.a.</li>
-                            <li class="mb-2"><strong>Obiectul si valoarea contractului</strong>: articolele achizitionate (marfuri si/sau servicii), discount-uri pe articole, discount total, valoarea contractului, valuta;</li>
-                            <li class="mb-2"><strong>Termene de facturare si achitare</strong> – sub forma de tabel: rate, scadente;</li>
-                            <li class="mb-2"><strong>Termene de receptie</strong>;</li>
-                            <li class="mb-2"><strong>Clauze speciale si observatii</strong>;</li>
-                            <li class="mb-2"><strong>Documente atasate</strong>: lista cu link-uri ale documentelor in format electronic.</li>
-                        </ul>
-
-                        <h3>Legaturile cu alte programe din suita ROA:</h3>
-                        <ul>
-                            <li class="mb-2">la definirea unui contract, anumite informatii (nr, data, furnizor) devin vizibile si in alte programe: in contabilitate, de exemplu: se pot ulterior introduce facturi sau alte documente aferente acestui contract, asociindu-se la acesta.</li>
-                            <li class="mb-2">la un contract cu scadentar de facturi se pot atasa facturi deja inregistrate in contabilitate – in scopul urmaririi stadiul contractului d.p.d.v. financiar;</li>
-                            <li class="mb-2">platile la facturile aferente unui contract se pot vedea in rapoarte speciale in programul de contracte.</li>
-                        </ul>
-
-                        <div class="text-end mt-4">
-                            <button onclick="history.back()" class="btn btn-outline-secondary">Inapoi</button>
-                        </div>
+        <!-- Main Features Grid -->
+        <section class="mb-16">
+            <div class="grid md:grid-cols-2 gap-8">
+                
+                <!-- Purpose Card -->
+                <div class="professional-card p-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="target" class="w-8 h-8 text-white"></i>
                     </div>
+                    <h2 class="text-2xl font-semibold mb-4 professional-text-primary">Scopul Sistemului</h2>
+                    <p class="professional-text-secondary leading-relaxed">
+                        Monitorizarea evoluției contractelor de achiziție din punct de vedere financiar, oferind control complet asupra relațiilor comerciale cu furnizorii.
+                    </p>
+                </div>
+
+                <!-- Organization Card -->
+                <div class="professional-card p-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="layout-dashboard" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h2 class="text-2xl font-semibold mb-4 professional-text-primary">Organizare Modulară</h2>
+                    <p class="professional-text-secondary mb-4 leading-relaxed">
+                        Sistemul este organizat în 5 module principale pentru gestionarea completă a contractelor:
+                    </p>
+                    <ul class="professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-3">
+                            <span class="text-blue-600 font-bold">•</span>
+                            <span><strong>Definire</strong>: configurarea tipurilor de contracte, responsabililor și furnizorilor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <span class="text-blue-600 font-bold">•</span>
+                            <span><strong>Lista contractelor</strong>: interfață avansată cu filtrare și ordonare</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <span class="text-blue-600 font-bold">•</span>
+                            <span><strong>Datele contractelor</strong>: gestionarea completă a informațiilor contractuale</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <span class="text-blue-600 font-bold">•</span>
+                            <span><strong>Facturi</strong>: urmărirea și monitorizarea facturilor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <span class="text-blue-600 font-bold">•</span>
+                            <span><strong>Plăți</strong>: monitorizarea facturilor și plăților aferente</span>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </section>
+
+        <!-- Contract Characteristics Section -->
+        <section class="professional-card p-8 mb-16">
+            <div class="text-center mb-8">
+                <div class="professional-icon-wrapper mb-4">
+                    <i data-lucide="file-text" class="w-10 h-10 text-white"></i>
+                </div>
+                <h2 class="text-3xl font-bold professional-text-primary">Caracteristicile Contractelor</h2>
+                <p class="professional-text-secondary mt-4">
+                    Contractele sunt descrise printr-un sistem comprehensiv de caracteristici organizate în grupuri logice:
+                </p>
+            </div>
+
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- General Data -->
+                <div class="service-technology">
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary flex items-center">
+                        <i data-lucide="info" class="w-5 h-5 mr-2 text-blue-600"></i>
+                        Date Generale
+                    </h3>
+                    <ul class="professional-text-secondary space-y-2 text-sm">
+                        <li>• Furnizorul contractului</li>
+                        <li>• Data și numărul contractului</li>
+                        <li>• Tipul de contract</li>
+                        <li>• Perioada de valabilitate</li>
+                        <li>• Alte date relevante</li>
+                    </ul>
+                </div>
+
+                <!-- Contract Object -->
+                <div class="service-reliability">
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary flex items-center">
+                        <i data-lucide="package" class="w-5 h-5 mr-2 text-blue-600"></i>
+                        Obiectul Contractului
+                    </h3>
+                    <ul class="professional-text-secondary space-y-2 text-sm">
+                        <li>• Articole achiziționate</li>
+                        <li>• Mărfuri și servicii</li>
+                        <li>• Discount-uri pe articole</li>
+                        <li>• Valoarea totală</li>
+                        <li>• Valuta contractului</li>
+                    </ul>
+                </div>
+
+                <!-- Payment Terms -->
+                <div class="service-technology">
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary flex items-center">
+                        <i data-lucide="calendar" class="w-5 h-5 mr-2 text-blue-600"></i>
+                        Termene Plăți
+                    </h3>
+                    <ul class="professional-text-secondary space-y-2 text-sm">
+                        <li>• Termene de facturare</li>
+                        <li>• Termene de achitare</li>
+                        <li>• Rate și scadențe</li>
+                        <li>• Termene de recepție</li>
+                        <li>• Planificare automată</li>
+                    </ul>
+                </div>
+
+                <!-- Special Clauses -->
+                <div class="service-reliability">
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary flex items-center">
+                        <i data-lucide="clipboard-list" class="w-5 h-5 mr-2 text-blue-600"></i>
+                        Clauze Speciale
+                    </h3>
+                    <ul class="professional-text-secondary space-y-2 text-sm">
+                        <li>• Condiții particulare</li>
+                        <li>• Observații importante</li>
+                        <li>• Clauze juridice</li>
+                        <li>• Termeni speciați</li>
+                        <li>• Note operaționale</li>
+                    </ul>
+                </div>
+
+                <!-- Attachments -->
+                <div class="service-technology">
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary flex items-center">
+                        <i data-lucide="paperclip" class="w-5 h-5 mr-2 text-blue-600"></i>
+                        Documente Atașate
+                    </h3>
+                    <ul class="professional-text-secondary space-y-2 text-sm">
+                        <li>• Fișiere PDF</li>
+                        <li>• Documente Word</li>
+                        <li>• Imagini și planuri</li>
+                        <li>• Link-uri rapide</li>
+                        <li>• Organizare digitală</li>
+                    </ul>
+                </div>
+
+                <!-- Integration -->
+                <div class="service-reliability">
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary flex items-center">
+                        <i data-lucide="link" class="w-5 h-5 mr-2 text-blue-600"></i>
+                        Integrare ROA
+                    </h3>
+                    <ul class="professional-text-secondary space-y-2 text-sm">
+                        <li>• Sincronizare contabilitate</li>
+                        <li>• Asociere facturi</li>
+                        <li>• Rapoarte financiare</li>
+                        <li>• Monitorizare stadiu</li>
+                        <li>• Flux automatizat</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- ROA Integration Section -->
+        <section class="professional-card professional-card-featured p-8 mb-16">
+            <div class="text-center mb-8">
+                <div class="professional-icon-wrapper mb-4">
+                    <i data-lucide="workflow" class="w-10 h-10 text-white"></i>
+                </div>
+                <h2 class="text-3xl font-bold professional-text-primary">Integrare cu Suita ROA</h2>
+                <p class="professional-text-secondary mt-4">
+                    Sistemul de management al furnizorilor se integrează perfect cu celelalte module ROA pentru un flux de lucru optimizat:
+                </p>
+            </div>
+
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="database" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2 professional-text-primary">Sincronizare Date</h3>
+                    <p class="professional-text-secondary text-sm">
+                        Informațiile contractelor (număr, dată, furnizor) devin automat disponibile în modulul de contabilitate și alte aplicații ROA.
+                    </p>
+                </div>
+
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="receipt" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2 professional-text-primary">Asociere Facturi</h3>
+                    <p class="professional-text-secondary text-sm">
+                        Facturile înregistrate în contabilitate pot fi asociate automat contractelor respective pentru urmărirea stadiului financiar.
+                    </p>
+                </div>
+
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="bar-chart-3" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2 professional-text-primary">Rapoarte Integrate</h3>
+                    <p class="professional-text-secondary text-sm">
+                        Plățile la facturile contractelor pot fi vizualizate în rapoarte speciale pentru monitorizarea completă a fluxului financiar.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Navigation Buttons -->
+        <section class="text-center">
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button onclick="history.back()" class="professional-btn-secondary px-8 py-4">
+                    <span>Înapoi la Lista Aplicațiilor</span>
+                </button>
+                <a href="aplicatii-erp.html" class="professional-btn-primary px-8 py-4">
+                    <span>Explorează Alte Module ROA</span>
+                </a>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-3 mt-5">
-        <div class="container">
-            <p class="mb-0">Copyright 2024 &copy; <strong>Romfast SRL</strong>.</p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    </div>
-
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Theme Switcher -->
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
+    <!-- Lucide Icons Initialization -->
     <script>
-        // Theme switcher functionality
+        // Initialize Lucide icons after page load
         document.addEventListener('DOMContentLoaded', function() {
-            const themeDropdown = document.getElementById('themeDropdown');
-            const themeItems = document.querySelectorAll('[data-theme]');
-            
-            // Load saved theme or default to system
-            const savedTheme = localStorage.getItem('theme') || 'system';
-            applyTheme(savedTheme);
-            
-            // Theme switching
-            themeItems.forEach(item => {
-                item.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    const theme = this.getAttribute('data-theme');
-                    applyTheme(theme);
-                    localStorage.setItem('theme', theme);
-                });
-            });
-            
-            function applyTheme(theme) {
-                if (theme === 'system') {
-                    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                    document.documentElement.setAttribute('data-bs-theme', systemDark ? 'dark' : 'light');
-                } else {
-                    document.documentElement.setAttribute('data-bs-theme', theme);
-                }
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
             }
         });
     </script>
diff --git a/roa/roa-financiar-contabilitate.html b/roa/roa-financiar-contabilitate.html
index 32a4078..fbd4de1 100644
--- a/roa/roa-financiar-contabilitate.html
+++ b/roa/roa-financiar-contabilitate.html
@@ -3,128 +3,165 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROA - Financiar-Contabilitate</title>
-    <meta name="description" content="ROA Financiar-Contabilitate - Modul complet pentru managementul financiar-contabil, cu peste 500 de formule contabile predefinite si raportare automata.">
-    <meta name="keywords" content="program contabilitate, soft contabilitate, roa financiar contabilitate, management financiar-contabil, analiza indicatori economici, note contabile, bilant, inchideri automate, raportare contabila">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <title>ROA Managementul Financiar-Contabil - Program Contabilitate Complet | Romfast</title>
+    <meta name="description" content="ROA Managementul Financiar-Contabil - Modul complet cu peste 500 formule contabile predefinite, inchideri automate si raportare conform prevederilor legale. Solutie profesionala pentru contabilitate.">
+    <meta name="keywords" content="program contabilitate, soft contabilitate, roa financiar contabilitate, management financiar-contabil, analiza indicatori economici, note contabile, bilant, inchideri automate, raportare contabila, managementul financiar">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="../menu/analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="../menu/implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="../menu/roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="../menu/alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link font-medium">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
-    <!-- Main Content -->
-    <main class="container my-5">
-        <!-- Breadcrumb -->
-        <nav aria-label="breadcrumb" class="mb-4">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii-erp.html">ROA - Romfast applications</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii.html">Aplicatii ROA</a></li>
-                <li class="breadcrumb-item active" aria-current="page">ROA Financiar-Contabilitate</li>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Breadcrumb Navigation -->
+        <nav class="flex mb-8" aria-label="Breadcrumb">
+            <ol class="inline-flex items-center space-x-1 md:space-x-3">
+                <li class="inline-flex items-center">
+                    <a href="../index.html" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
+                        <i data-lucide="home" class="w-4 h-4 mr-2"></i>
+                        Prima pagina
+                    </a>
+                </li>
+                <li>
+                    <div class="flex items-center">
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+                        <a href="aplicatii-erp.html" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2">ROA</a>
+                    </div>
+                </li>
+                <li aria-current="page">
+                    <div class="flex items-center">
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+                        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Managementul Financiar-Contabil</span>
+                    </div>
+                </li>
             </ol>
         </nav>
 
-        <!-- Page Header -->
-        <div class="row mb-5">
-            <div class="col-md-8">
-                <h1 class="mb-3">ROA Financiar-Contabilitate</h1>
-                <p class="lead">Managementul complet al proceselor financiar-contabile</p>
+        <!-- Professional Hero Section -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-6xl mx-auto relative z-10">
+                <div class="flex flex-col lg:flex-row items-center gap-12">
+                    <div class="lg:w-2/3 text-left">
+                        <div class="flex items-center mb-6">
+                            <div class="professional-icon-wrapper mr-4">
+                                <i data-lucide="calculator" class="w-10 h-10 text-white"></i>
+                            </div>
+                            <div>
+                                <h1 class="text-4xl md:text-5xl font-bold professional-text-primary mb-2">
+                                    ROA Managementul Financiar-Contabil
+                                </h1>
+                                <p class="text-xl professional-text-secondary leading-relaxed">
+                                    Solutia completa pentru managementul proceselor financiar-contabile cu peste 500 de formule predefinite
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="lg:w-1/3">
+                        <img src="images/roafinanciarcontab.png" alt="ROA Managementul Financiar-Contabil" class="w-full max-w-md mx-auto rounded-lg shadow-lg">
+                    </div>
+                </div>
             </div>
-            <div class="col-md-4">
-                <img src="images/fincont.gif" alt="ROA Financiar Contabilitate" class="img-fluid rounded shadow">
-            </div>
-        </div>
+        </section>
 
         <!-- Avantaje Section -->
-        <section class="mb-5">
-            <h2>Avantaje</h2>
-            <p>Utilizarea aplicatiei <strong>ROA Financiar-Contabilitate</strong> conduce la:</p>
-            <div class="row g-4">
-                <div class="col-md-6">
-                    <ul class="list-group theme-list-group list-group-flush">
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-check-circle-fill text-success me-2"></i>
-                            Colectarea si obtinerea de informatii bogate in legatura cu evenimentele economice
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Avantajele Solutiei ROA Financiar-Contabilitate</h2>
+            <p class="text-center text-xl professional-text-secondary mb-12 max-w-4xl mx-auto">Utilizarea aplicatiei <strong>ROA Managementul Financiar-Contabil</strong> conduce la transformarea completa a proceselor financiar-contabile:</p>
+            
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="professional-card service-technology p-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="trending-up" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-6 professional-text-primary text-center">Eficienta Operationala</h3>
+                    <ul class="space-y-4">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Colectarea si obtinerea de informatii bogate in legatura cu evenimentele economice</span>
                         </li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-check-circle-fill text-success me-2"></i>
-                            Cresterea vitezei de introducere a datelor datorita ergonomiei deosebite
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Cresterea vitezei de introducere a datelor datorita ergonomiei deosebite</span>
                         </li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-check-circle-fill text-success me-2"></i>
-                            Cresterea responsabilitatii individuale a angajatilor implicati in procesele economico-financiare
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Cresterea responsabilitatii individuale a angajatilor implicati in procesele economico-financiare</span>
                         </li>
                     </ul>
                 </div>
-                <div class="col-md-6">
-                    <ul class="list-group theme-list-group list-group-flush">
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-check-circle-fill text-success me-2"></i>
-                            Obtinerea informatiilor financiare in timp util
+                
+                <div class="professional-card service-reliability p-8">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="bar-chart-3" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-6 professional-text-primary text-center">Control si Analiza</h3>
+                    <ul class="space-y-4">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Obtinerea informatiilor financiare in timp util</span>
                         </li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-check-circle-fill text-success me-2"></i>
-                            Analiza amanuntita sau sintetica a informatiilor contabile si extra-contabile
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Analiza amanuntita sau sintetica a informatiilor contabile si extra-contabile</span>
                         </li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-check-circle-fill text-success me-2"></i>
-                            Crearea de baze de date istorice complexe, ce pot fi analizate oricand
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">Crearea de baze de date istorice complexe, ce pot fi analizate oricand</span>
                         </li>
                     </ul>
                 </div>
@@ -132,184 +169,279 @@
         </section>
 
         <!-- Organizarea Section -->
-        <section class="mb-5">
-            <h2>Organizarea programului</h2>
-            <div class="row g-4">
-                <div class="col-lg-8">
-                    <div class="card border-primary">
-                        <div class="card-header bg-primary text-white">
-                            <h4 class="mb-0">Structura intuitiva</h4>
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Organizarea si Structura Programului</h2>
+            
+            <div class="grid lg:grid-cols-3 gap-8">
+                <!-- Main Structure Card -->
+                <div class="lg:col-span-2 professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                            <i data-lucide="layers" class="w-8 h-8 text-white"></i>
                         </div>
-                        <div class="card-body">
-                            <ul class="list-unstyled mb-3">
-                                <li class="mb-2">• Organizarea programului este intuitiva, atat pentru contabilul experimentat cat si pentru operatorul fara studii de contabilitate</li>
-                                <li class="mb-2">• Este alcatuit din <strong>7 pagini</strong> reprezentand <strong>clasele de conturi</strong>, fiecare pagina avand 3 sectiuni cu continut specific: <strong>introducerea, vizualizarea datelor si generarea rapoartelor</strong></li>
-                                <li class="mb-2">• Ferestrele de vizualizare contin mijloace de selectare a datelor folosind criterii diverse</li>
-                                <li class="mb-0">• Generarea si tiparirea rapoartelor este independenta de configuratia hardware</li>
-                            </ul>
+                        <h3 class="text-2xl font-semibold professional-text-primary">Structura Intuitiva</h3>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="users" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">Organizarea programului este intuitiva, atat pentru <strong>contabilul experimentat</strong> cat si pentru <strong>operatorul fara studii de contabilitate</strong></p>
+                        </div>
+                        
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="folder-tree" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">Este alcatuit din <strong class="text-blue-600">7 pagini</strong> reprezentand <strong class="text-blue-600">clasele de conturi</strong>, fiecare pagina avand 3 sectiuni cu continut specific: <strong>introducerea, vizualizarea datelor si generarea rapoartelor</strong></p>
+                        </div>
+                        
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="filter" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">Ferestrele de vizualizare contin mijloace de selectare a datelor folosind <strong>criterii diverse</strong></p>
+                        </div>
+                        
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="printer" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">Generarea si tiparirea rapoartelor este <strong>independenta de configuratia hardware</strong></p>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4">
-                    <div class="alert theme-alert-info">
-                        <h5 class="alert-heading">Formule predefinite</h5>
-                        <p>Sunt predefinite peste <strong>500 de formule contabile uzuale</strong> care aduc beneficii:</p>
-                        <ul class="mb-0">
-                            <li><strong>Contabilului</strong> - usureaza munca de operatiuni de rutina</li>
-                            <li><strong>Operatorului fara studii</strong> - furnizeaza solutii de inregistrare consacrate</li>
-                        </ul>
+                
+                <!-- Formule Predefinite Card -->
+                <div class="professional-card professional-card-featured p-8 text-center">
+                    <div class="professional-icon-wrapper mb-6">
+                        <i data-lucide="formula" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Formule Predefinite</h3>
+                    <div class="text-4xl font-bold text-red-600 mb-4">500+</div>
+                    <p class="professional-text-secondary mb-6">Sunt predefinite peste <strong>500 de formule contabile uzuale</strong> care aduc beneficii:</p>
+                    
+                    <div class="space-y-4 text-left">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="graduation-cap" class="w-5 h-5 text-red-600 mt-1 flex-shrink-0"></i>
+                            <div>
+                                <strong class="professional-text-primary block">Contabilului</strong>
+                                <span class="professional-text-secondary text-sm">usureaza munca de operatiuni de rutina</span>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="user-check" class="w-5 h-5 text-red-600 mt-1 flex-shrink-0"></i>
+                            <div>
+                                <strong class="professional-text-primary block">Operatorului fara studii</strong>
+                                <span class="professional-text-secondary text-sm">furnizeaza solutii de inregistrare consacrate</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </section>
 
         <!-- Facilitati Section -->
-        <section class="mb-5">
-            <h2>Facilitati</h2>
-            <p class="lead"><strong>ROA Financiar-Contabilitate</strong> rezolva problemele legate de:</p>
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Facilitati si Functionalitati Complete</h2>
+            <p class="text-center text-xl professional-text-secondary mb-12 max-w-4xl mx-auto"><strong>ROA Managementul Financiar-Contabil</strong> rezolva toate problemele legate de managementul financiar-contabil:</p>
             
-            <div class="accordion" id="facilitatiAccordion">
-                <!-- Politici Contabile -->
-                <div class="accordion-item">
-                    <h3 class="accordion-header" id="headingOne">
-                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                            Politici Contabile si Definiri Analitice
-                        </button>
-                    </h3>
-                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#facilitatiAccordion">
-                        <div class="accordion-body">
-                            <ul class="list-unstyled">
-                                <li>• Definirea analitica a politicii contabile a firmei</li>
-                                <li>• Definirea si utilizarea de conturi analitice</li>
-                                <li>• Introducerea datelor conform reglementarilor contabile armonizate cu Directiva a IV-a CEE si Standardele Internationale de Contabilitate (O.M.F.94/2001)</li>
-                            </ul>
+            <div class="grid md:grid-cols-2 gap-8">
+                <!-- Politici Contabile Card -->
+                <div class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                            <i data-lucide="settings" class="w-8 h-8 text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold professional-text-primary">Politici Contabile si Definiri Analitice</h3>
                     </div>
+                    <ul class="space-y-3">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Definirea analitica a politicii contabile a firmei</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Definirea si utilizarea de conturi analitice</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Introducerea datelor conform reglementarilor contabile armonizate cu Directiva a IV-a CEE si Standardele Internationale de Contabilitate (O.M.F.94/2001)</span>
+                        </li>
+                    </ul>
                 </div>
-
-                <!-- Inregistrari -->
-                <div class="accordion-item">
-                    <h3 class="accordion-header" id="headingTwo">
-                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                            Inregistrari si Operatiuni
-                        </button>
-                    </h3>
-                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#facilitatiAccordion">
-                        <div class="accordion-body">
-                            <ul class="list-unstyled">
-                                <li>• Inregistrarea cronologica a tuturor documentelor primare cu efecte financiar-contabile</li>
-                                <li>• Inregistrarea in contabilitate folosind formule predefinite, de viteza sporita</li>
-                                <li>• Inregistrarea cu flexibilitate a oricaror evenimente economice si a datelor extra-contabile</li>
-                                <li>• Gestionarea si ordonarea operatiunilor de trezorerie</li>
-                            </ul>
+                
+                <!-- Inregistrari Card -->
+                <div class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                            <i data-lucide="edit" class="w-8 h-8 text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold professional-text-primary">Inregistrari si Operatiuni</h3>
                     </div>
+                    <ul class="space-y-3">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Inregistrarea cronologica a tuturor documentelor primare cu efecte financiar-contabile</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Inregistrarea in contabilitate folosind formule predefinite, de viteza sporita</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Inregistrarea cu flexibilitate a oricaror evenimente economice si a datelor extra-contabile</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Gestionarea si ordonarea operatiunilor de trezorerie</span>
+                        </li>
+                    </ul>
                 </div>
-
-                <!-- Control si Relatii -->
-                <div class="accordion-item">
-                    <h3 class="accordion-header" id="headingThree">
-                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                            Control si Relatii cu Tertii
-                        </button>
-                    </h3>
-                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#facilitatiAccordion">
-                        <div class="accordion-body">
-                            <ul class="list-unstyled">
-                                <li>• Controlul riguros al scadentarelor si relatiilor financiare cu tertii</li>
-                                <li>• Compensarea cu parteneri comerciali prin echivalarea creantelor si datoriilor</li>
-                                <li>• Lucrul cu valute si obtinerea situatiilor analitice in valuta</li>
-                                <li>• Introducerea de date in mai multe luni contabile neinchise</li>
-                            </ul>
+                
+                <!-- Control si Relatii Card -->
+                <div class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                            <i data-lucide="shield-check" class="w-8 h-8 text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold professional-text-primary">Control si Relatii cu Tertii</h3>
                     </div>
+                    <ul class="space-y-3">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Controlul riguros al scadentarelor si relatiilor financiare cu tertii</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Compensarea cu parteneri comerciali prin echivalarea creantelor si datoriilor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Lucrul cu valute si obtinerea situatiilor analitice in valuta</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Introducerea de date in mai multe luni contabile neinchise</span>
+                        </li>
+                    </ul>
                 </div>
-
-                <!-- Raportare si Inchideri -->
-                <div class="accordion-item">
-                    <h3 class="accordion-header" id="headingFour">
-                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
-                            Raportare si Inchideri Automate
-                        </button>
-                    </h3>
-                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#facilitatiAccordion">
-                        <div class="accordion-body">
-                            <ul class="list-unstyled">
-                                <li>• Vizualizarea balantei de verificare, registrelor (jurnal, vanzari, cumparari, casa, banca)</li>
-                                <li>• Balantele de clienti, furnizori, debitori, creditori</li>
-                                <li>• Inchideri automate: venituri, cheltuieli, TVA, amortizare, salarii, impozit pe venit</li>
-                                <li>• Calculul automat al bilantului si anexelor</li>
-                                <li>• Evaluarea rezultatelor financiare cu inchidere automata provizorie</li>
-                                <li>• Raportarea contabila catre stat conform prevederilor legale</li>
-                                <li>• Raportarea catre patronat a situatiei economico-financiare</li>
-                            </ul>
+                
+                <!-- Raportare si Inchideri Card -->
+                <div class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                            <i data-lucide="file-text" class="w-8 h-8 text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold professional-text-primary">Raportare si Inchideri Automate</h3>
                     </div>
+                    <ul class="space-y-3">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Vizualizarea balantei de verificare, registrelor (jurnal, vanzari, cumparari, casa, banca)</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Balantele de clienti, furnizori, debitori, creditori</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Inchideri automate: venituri, cheltuieli, TVA, amortizare, salarii, impozit pe venit</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Calculul automat al bilantului si anexelor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Evaluarea rezultatelor financiare cu inchidere automata provizorie</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Raportarea contabila catre stat conform prevederilor legale</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check" class="w-4 h-4 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary text-sm">Raportarea catre patronat a situatiei economico-financiare</span>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </section>
 
         <!-- Call to Action -->
-        <section class="text-center">
-            <div class="alert theme-alert-primary">
-                <h4 class="alert-heading">Solutie completa pentru contabilitate</h4>
-                <p class="mb-0">ROA Financiar-Contabilitate oferă toate instrumentele necesare pentru managementul eficient al proceselor financiar-contabile ale companiei dumneavoastră.</p>
+        <section class="professional-hero text-center">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6 professional-text-primary">
+                    Solutia Completa pentru Managementul Financiar-Contabil
+                </h2>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    ROA Managementul Financiar-Contabil oferă toate instrumentele necesare pentru managementul eficient al proceselor financiar-contabile ale companiei dumneavoastră, cu peste 500 de formule predefinite si automatizari complete.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicita Demonstratie</span>
+                    </a>
+                    <a href="aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Toate Modulele ROA</span>
+                    </a>
+                </div>
             </div>
         </section>
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../menu/politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Professional Theme JavaScript -->
     <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
+        // Initialize Lucide icons
+        lucide.createIcons();
+        
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('theme-toggle');
+        const body = document.body;
+        const icon = themeToggle.querySelector('i');
+        
+        // Check for saved theme preference or default to light mode
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        
+        if (currentTheme === 'dark') {
+            body.classList.add('dark-mode');
+            icon.setAttribute('data-lucide', 'moon');
         } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
+            icon.setAttribute('data-lucide', 'sun');
         }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
+        
+        // Theme toggle event listener
+        themeToggle.addEventListener('click', function() {
+            body.classList.toggle('dark-mode');
+            
+            if (body.classList.contains('dark-mode')) {
+                localStorage.setItem('theme', 'dark');
+                icon.setAttribute('data-lucide', 'moon');
+            } else {
+                localStorage.setItem('theme', 'light');
+                icon.setAttribute('data-lucide', 'sun');
             }
+            
+            // Reinitialize icons after change
+            lucide.createIcons();
+        });
+        
+        // Initialize icons on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            lucide.createIcons();
         });
     </script>
-    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/roa/roa-gestiune.html b/roa/roa-gestiune.html
index 9a467b5..cbe4542 100644
--- a/roa/roa-gestiune.html
+++ b/roa/roa-gestiune.html
@@ -3,129 +3,157 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROA Gestiune - Romfast</title>
+    <title>ROA Gestiune - Managementul Stocurilor | Romfast</title>
     <meta name="description" content="ROA Gestiune generala - componenta importanta a sistemului ERP pentru gestionarea eficienta a stocurilor si aprovizionarii.">
     <meta name="keywords" content="program gestiune, stocuri, aprovizionare, magazii, ROA, romfast, sistem informatic ERP, gestiune stocuri, NIR, consum">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
+<body class="min-h-screen">
 
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="../menu/analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="../menu/implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="../menu/roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="../menu/alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
         
-        <!-- Breadcrumb -->
-        <nav aria-label="breadcrumb" class="mb-4">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii-erp.html">ROA - Romfast applications</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii.html">Aplicatii ROA</a></li>
-                <li class="breadcrumb-item active" aria-current="page">ROA Gestiune</li>
+        <!-- Breadcrumb Navigation -->
+        <nav class="mb-8">
+            <ol class="flex items-center space-x-2 text-sm professional-text-secondary">
+                <li><a href="../index.html" class="hover:text-blue-600 transition-colors">Home</a></li>
+                <li class="flex items-center space-x-2">
+                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                    <a href="aplicatii-erp.html" class="hover:text-blue-600 transition-colors">ROA Applications</a>
+                </li>
+                <li class="flex items-center space-x-2">
+                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                    <a href="aplicatii.html" class="hover:text-blue-600 transition-colors">Aplicații ROA</a>
+                </li>
+                <li class="flex items-center space-x-2">
+                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                    <span class="professional-text-primary font-medium">ROA Gestiune</span>
+                </li>
             </ol>
         </nav>
 
-        <!-- Page Header -->
-        <section class="mb-5">
-            <div class="row align-items-center">
-                <div class="col-12">
-                    <img src="images/roagestiune.png" alt="ROA Gestiune" class="img-fluid mb-3" style="max-height: 60px;">
-                    <h1 class="h2">ROA Gestiune Generala</h1>
+        <!-- Professional Hero Section for ROA Gestiune -->
+        <section class="professional-hero text-center mb-12">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper">
+                    <i data-lucide="package" class="w-12 h-12 text-white"></i>
                 </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA Gestiune Generală
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Managementul inteligent al stocurilor pentru eficiență maximă în aprovizionare și distribuție
+                </p>
             </div>
         </section>
 
         <!-- Main Description -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-body">
-                    <p class="lead">
-                        <strong>ROA Gestiune generala</strong> este o componenta importanta a sistemului. Pentru eficienta maxima, ea trebuie utilizata impreuna cu <strong>ROA Financiar-Contabilitate</strong> cu care se integreaza perfect, datorita formulelor contabile automate pe care le contine. Operarea in programul de gestiuni are efecte contabile directe ce se gestioneaza cu ajutorul programului de contabilitate, intr-un sistem riguros de corelare si verificare continua.
-                    </p>
-                </div>
+        <section class="mb-12">
+            <div class="professional-card p-8">
+                <p class="text-lg leading-relaxed professional-text-secondary">
+                    <strong class="professional-text-primary">ROA Gestiune generala</strong> este o componentă importantă a sistemului. Pentru eficiența maximă, ea trebuie utilizată împreună cu <strong class="professional-text-primary">ROA Financiar-Contabilitate</strong> cu care se integrează perfect, datorită formulelor contabile automate pe care le conține. Operarea în programul de gestiuni are efecte contabile directe ce se gestionează cu ajutorul programului de contabilitate, într-un sistem riguros de corelare și verificare continuă.
+                </p>
             </div>
         </section>
 
         <!-- Advantages Section -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Avantaje</h3>
+        <section class="mb-12">
+            <div class="professional-card p-8">
+                <div class="flex items-center mb-6">
+                    <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                        <i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold professional-text-primary">Avantaje</h3>
                 </div>
-                <div class="card-body">
-                    <p>Utilizarea programului <strong>ROA Gestiune generala</strong> conduce la:</p>
-                    <div class="row">
-                        <div class="col-md-6">
-                            <ul class="list-unstyled">
-                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>cresterea eficientei generale a gestionarii stocurilor</li>
-                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>diminuarea cheltuielilor cu gestiunea stocurilor</li>
-                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>cresterea vitezei de operare a evenimentelor</li>
-                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>reducerea si controlul stocurilor fara miscare</li>
-                            </ul>
+                <p class="text-lg professional-text-secondary mb-6">Utilizarea programului <strong class="professional-text-primary">ROA Gestiune generală</strong> conduce la:</p>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div class="space-y-4">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">creșterea eficienței generale a gestionării stocurilor</span>
                         </div>
-                        <div class="col-md-6">
-                            <ul class="list-unstyled">
-                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>reducerea aprovizionarii supranormative</li>
-                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>evidentierea clara si in timp real a miscarii stocurilor</li>
-                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>controlul si corelarea permanenta a stocului cantitativ cu valoarea acestuia</li>
-                            </ul>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">diminuarea cheltuielilor cu gestiunea stocurilor</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">creșterea vitezei de operare a evenimentelor</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">reducerea și controlul stocurilor fără mișcare</span>
+                        </div>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">reducerea aprovizionării supranormative</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">evidențierea clară și în timp real a mișcării stocurilor</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">controlul și corelarea permanentă a stocului cantitativ cu valoarea acestuia</span>
                         </div>
                     </div>
                 </div>
@@ -133,142 +161,218 @@
         </section>
 
         <!-- Application Area -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Aria de aplicabilitate</h3>
+        <section class="mb-12">
+            <div class="professional-card p-8">
+                <div class="flex items-center mb-6">
+                    <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                        <i data-lucide="building" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold professional-text-primary">Aria de aplicabilitate</h3>
                 </div>
-                <div class="card-body">
-                    <div class="alert theme-alert-info" role="alert">
-                        <strong>ROA Gestiune generala</strong> poate gestiona magaziile existente in cadrul oricarui tip de firma - de comert, servicii, productie, sau alte categorii, facilitand utilizarea tuturor metodelor de gestiune a stocurilor.
+                <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 dark:bg-blue-900 dark:border-blue-700">
+                    <div class="flex items-start space-x-3">
+                        <i data-lucide="info" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0"></i>
+                        <p class="professional-text-secondary">
+                            <strong class="professional-text-primary">ROA Gestiune generală</strong> poate gestiona magaziile existente în cadrul oricărui tip de firmă - de comerț, servicii, producție, sau alte categorii, facilitând utilizarea tuturor metodelor de gestiune a stocurilor.
+                        </p>
                     </div>
                 </div>
             </div>
         </section>
 
         <!-- Organization -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Organizarea</h3>
+        <section class="mb-12">
+            <div class="professional-card p-8">
+                <div class="flex items-center mb-8">
+                    <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                        <i data-lucide="settings" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold professional-text-primary">Organizarea</h3>
                 </div>
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-lg-6">
-                            <ul class="list-unstyled">
-                                <li class="mb-3">
-                                    <i class="bi bi-gear-fill text-primary me-2"></i>
-                                    Organizarea programului de gestiune este intuitiva, atat pentru contabilul experimentat cat si pentru operatorul fara studii de contabilitate.
-                                </li>
-                                <li class="mb-3">
-                                    <i class="bi bi-layout-three-columns text-primary me-2"></i>
-                                    Este alcatuit din <strong>6 pagini</strong> reprezentand <strong>grupe ale clasei III-"Conturi de stocuri si productie in curs de executie"</strong> din planul de conturi.
-                                </li>
-                            </ul>
+                <div class="grid lg:grid-cols-2 gap-8 mb-8">
+                    <div class="space-y-6">
+                        <div class="flex items-start space-x-4">
+                            <i data-lucide="cog" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">
+                                Organizarea programului de gestiune este intuitivă, atât pentru contabilul experimentat cât și pentru operatorul fără studii de contabilitate.
+                            </p>
                         </div>
-                        <div class="col-lg-6">
-                            <div class="alert theme-alert-warning" role="alert">
-                                <h5 class="alert-heading">Formule predefinite</h5>
-                                <p class="mb-0">Sunt predefinite un numar de peste <strong>300 de formule (seturi de note) contabile uzuale</strong>. Acest lucru aduce mari beneficii firmei.</p>
+                        <div class="flex items-start space-x-4">
+                            <i data-lucide="layout-grid" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <p class="professional-text-secondary">
+                                Este alcătuit din <strong class="professional-text-primary">6 pagini</strong> reprezentând <strong class="professional-text-primary">grupe ale clasei III-"Conturi de stocuri și producție în curs de execuție"</strong> din planul de conturi.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 dark:bg-yellow-900 dark:border-yellow-700">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="lightbulb" class="w-6 h-6 text-yellow-600 mt-1 flex-shrink-0"></i>
+                            <div>
+                                <h5 class="font-semibold professional-text-primary mb-2">Formule predefinite</h5>
+                                <p class="professional-text-secondary mb-0">Sunt predefinite un număr de peste <strong class="professional-text-primary">300 de formule (seturi de note) contabile uzuale</strong>. Acest lucru aduce mari beneficii firmei.</p>
                             </div>
                         </div>
                     </div>
-                    
-                    <div class="row mt-4">
-                        <div class="col-md-6">
-                            <div class="card theme-card">
-                                <div class="card-body">
-                                    <h5 class="card-title">Pentru Gestionari</h5>
-                                    <p class="card-text">Nu trebuie sa aiba studii de contabilitate, pentru a opera documentele primare, atat cantativ cat si valoric.</p>
-                                </div>
-                            </div>
+                </div>
+                
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div class="professional-card service-technology p-6">
+                        <div class="flex items-center mb-4">
+                            <i data-lucide="users" class="w-6 h-6 text-blue-600 mr-3"></i>
+                            <h5 class="text-lg font-semibold professional-text-primary">Pentru Gestionari</h5>
                         </div>
-                        <div class="col-md-6">
-                            <div class="card theme-card">
-                                <div class="card-body">
-                                    <h5 class="card-title">Pentru Contabili</h5>
-                                    <p class="card-text">Nu trebuie sa opereze marile cantitati de documente provenite din gestiuni, ci doar sa verifice corecta lor introducere.</p>
-                                </div>
-                            </div>
+                        <p class="professional-text-secondary">Nu trebuie să aibă studii de contabilitate, pentru a opera documentele primare, atât cantitativ cât și valoric.</p>
+                    </div>
+                    <div class="professional-card service-reliability p-6">
+                        <div class="flex items-center mb-4">
+                            <i data-lucide="calculator" class="w-6 h-6 text-blue-600 mr-3"></i>
+                            <h5 class="text-lg font-semibold professional-text-primary">Pentru Contabili</h5>
                         </div>
+                        <p class="professional-text-secondary">Nu trebuie să opereze marile cantități de documente provenite din gestiuni, ci doar să verifice corecta lor introducere.</p>
                     </div>
                 </div>
             </div>
         </section>
 
         <!-- Document Production -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Producerea documentelor</h3>
-                </div>
-                <div class="card-body">
-                    <p>Foarte importanta este capacitatea programului de a facilita <strong>producerea rapida</strong> a documentelor primare, atat in format electronic cat si pe hartie in formularele obisnuite:</p>
-                    
-                    <div class="row">
-                        <div class="col-md-4">
-                            <h5>Documente de intrare:</h5>
-                            <ul>
-                                <li>NIR-uri</li>
-                                <li>Facturi de achizitie</li>
-                            </ul>
-                        </div>
-                        <div class="col-md-4">
-                            <h5>Documente de consum:</h5>
-                            <ul>
-                                <li>Bonuri de consum</li>
-                                <li>Bonuri de retur</li>
-                                <li>Bonuri de transfer</li>
-                            </ul>
-                        </div>
-                        <div class="col-md-4">
-                            <h5>Documente de vanzare:</h5>
-                            <ul>
-                                <li>Facturi de vanzare</li>
-                                <li>Facturi de retur marfa</li>
-                                <li>Avize de insotire</li>
-                            </ul>
-                        </div>
+        <section class="mb-12">
+            <div class="professional-card p-8">
+                <div class="flex items-center mb-8">
+                    <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                        <i data-lucide="file-text" class="w-8 h-8 text-white"></i>
                     </div>
-
-                    <div class="alert theme-alert-success mt-4" role="alert">
-                        <ul class="mb-0">
-                            <li>Producerea documentului primar pe hartie si a celui electronic se petrec aproape simultan</li>
-                            <li>Formularul electronic are atat efecte cantitative asupra stocurilor cat si efectele contabile corespunzatoare</li>
-                            <li>Generarea si tiparirea rapoartelor si formularelor este independenta de configuratia hardware</li>
+                    <h3 class="text-2xl font-semibold professional-text-primary">Producerea documentelor</h3>
+                </div>
+                <p class="text-lg professional-text-secondary mb-8">Foarte importantă este capacitatea programului de a facilita <strong class="professional-text-primary">producerea rapidă</strong> a documentelor primare, atât în format electronic cât și pe hârtie în formularele obișnuite:</p>
+                
+                <div class="grid md:grid-cols-3 gap-8 mb-8">
+                    <div class="professional-card service-technology p-6">
+                        <div class="flex items-center mb-4">
+                            <i data-lucide="arrow-down" class="w-6 h-6 text-green-600 mr-3"></i>
+                            <h5 class="text-lg font-semibold professional-text-primary">Documente de intrare</h5>
+                        </div>
+                        <ul class="space-y-2 professional-text-secondary">
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-green-600"></i>
+                                <span>NIR-uri</span>
+                            </li>
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-green-600"></i>
+                                <span>Facturi de achiziție</span>
+                            </li>
                         </ul>
                     </div>
+                    <div class="professional-card service-reliability p-6">
+                        <div class="flex items-center mb-4">
+                            <i data-lucide="arrow-right" class="w-6 h-6 text-blue-600 mr-3"></i>
+                            <h5 class="text-lg font-semibold professional-text-primary">Documente de consum</h5>
+                        </div>
+                        <ul class="space-y-2 professional-text-secondary">
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-blue-600"></i>
+                                <span>Bonuri de consum</span>
+                            </li>
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-blue-600"></i>
+                                <span>Bonuri de retur</span>
+                            </li>
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-blue-600"></i>
+                                <span>Bonuri de transfer</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="professional-card p-6" style="background: linear-gradient(135deg, rgba(184, 85, 85, 0.03), rgba(198, 123, 123, 0.03)); border-left: 4px solid var(--accent);">
+                        <div class="flex items-center mb-4">
+                            <i data-lucide="arrow-up" class="w-6 h-6 text-red-600 mr-3"></i>
+                            <h5 class="text-lg font-semibold professional-text-primary">Documente de vânzare</h5>
+                        </div>
+                        <ul class="space-y-2 professional-text-secondary">
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-red-600"></i>
+                                <span>Facturi de vânzare</span>
+                            </li>
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-red-600"></i>
+                                <span>Facturi de retur marfă</span>
+                            </li>
+                            <li class="flex items-center space-x-2">
+                                <i data-lucide="minus" class="w-4 h-4 text-red-600"></i>
+                                <span>Avize de însoțire</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="bg-green-50 border border-green-200 rounded-lg p-6 dark:bg-green-900 dark:border-green-700">
+                    <div class="flex items-start space-x-3">
+                        <i data-lucide="check-circle" class="w-6 h-6 text-green-600 mt-1 flex-shrink-0"></i>
+                        <div>
+                            <ul class="space-y-3 professional-text-secondary">
+                                <li>Producerea documentului primar pe hârtie și a celui electronic se petrec aproape simultan</li>
+                                <li>Formularul electronic are atât efecte cantitative asupra stocurilor cât și efectele contabile corespunzătoare</li>
+                                <li>Generarea și tipărirea rapoartelor și formularelor este independentă de configurația hardware</li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
 
         <!-- Features -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Facilitati</h3>
+        <section class="mb-12">
+            <div class="professional-card p-8">
+                <div class="flex items-center mb-8">
+                    <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                        <i data-lucide="zap" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold professional-text-primary">Facilități</h3>
                 </div>
-                <div class="card-body">
-                    <p><strong>ROA Gestiune</strong> rezolva problemele legate de:</p>
-                    
-                    <div class="row">
-                        <div class="col-md-6">
-                            <ul>
-                                <li>definirea articolelor impreuna cu atributele lor</li>
-                                <li>gestionarea datelor privind intrarile de articole in stocuri</li>
-                                <li>gestionarea cantitatilor de articole in stoc detaliata dupa criterii multiple</li>
-                                <li>inregistrarea iesirilor din gestiune pe baza mai multor metode de evaluare</li>
-                                <li>inregistrarea consumurilor de materiale pe lucrari</li>
-                            </ul>
+                <p class="text-lg professional-text-secondary mb-8"><strong class="professional-text-primary">ROA Gestiune</strong> rezolvă problemele legate de:</p>
+                
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div class="space-y-4">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="tag" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">definirea articolelor împreună cu atributele lor</span>
                         </div>
-                        <div class="col-md-6">
-                            <ul>
-                                <li>inregistrarea vanzarilor de marfuri pe contracte</li>
-                                <li>inregistrarea intrarilor si iesirilor de articole pe sectii</li>
-                                <li>vizualizarea situatiei stocurilor pe perioade definite</li>
-                                <li>obtinerea rapida a informatiilor asociate unui articol</li>
-                                <li>producerea unui istoric complex al evenimentelor</li>
-                            </ul>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="database" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">gestionarea datelor privind intrările de articole în stocuri</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="layers" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">gestionarea cantităților de articole în stoc detaliată după criterii multiple</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="minus-circle" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">înregistrarea ieșirilor din gestiune pe baza mai multor metode de evaluare</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="activity" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">înregistrarea consumurilor de materiale pe lucrări</span>
+                        </div>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="shopping-cart" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">înregistrarea vânzărilor de mărfuri pe contracte</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="shuffle" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">înregistrarea intrărilor și ieșirilor de articole pe secții</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="eye" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">vizualizarea situației stocurilor pe perioade definite</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="search" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">obținerea rapidă a informațiilor asociate unui articol</span>
+                        </div>
+                        <div class="flex items-start space-x-3">
+                            <i data-lucide="clock" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
+                            <span class="professional-text-secondary">producerea unui istoric complex al evenimentelor</span>
                         </div>
                     </div>
                 </div>
@@ -276,18 +380,18 @@
         </section>
 
         <!-- Navigation Links -->
-        <section class="mb-5">
-            <div class="row">
-                <div class="col-md-6 mb-3">
-                    <a href="aplicatii-erp.html" class="btn btn-outline-primary">
-                        <i class="bi bi-arrow-left me-2"></i>
-                        Inapoi la ROA Applications
+        <section class="mb-12">
+            <div class="grid md:grid-cols-2 gap-6">
+                <div>
+                    <a href="aplicatii-erp.html" class="professional-btn-secondary px-6 py-3 inline-flex items-center space-x-2 w-full md:w-auto justify-center">
+                        <i data-lucide="arrow-left" class="w-5 h-5"></i>
+                        <span>Înapoi la ROA Applications</span>
                     </a>
                 </div>
-                <div class="col-md-6 text-md-end mb-3">
-                    <a href="aplicatii.html" class="btn btn-primary">
-                        Vezi toate aplicatiile ROA
-                        <i class="bi bi-arrow-right ms-2"></i>
+                <div class="md:text-right">
+                    <a href="aplicatii.html" class="professional-btn-primary px-6 py-3 inline-flex items-center space-x-2 w-full md:w-auto justify-center">
+                        <span>Vezi toate aplicațiile ROA</span>
+                        <i data-lucide="arrow-right" class="w-5 h-5"></i>
                     </a>
                 </div>
             </div>
@@ -295,58 +399,25 @@
 
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../menu/politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidențialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/roa/roa-horeca.html b/roa/roa-horeca.html
new file mode 100644
index 0000000..d2bbe62
--- /dev/null
+++ b/roa/roa-horeca.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ROA HORECA - Sistem ERP pentru Hoteluri și Restaurante | Romfast</title>
+    <meta name="description" content="ROA HORECA - Soluția ERP completă pentru industria hotelieră și de restaurant. Managementul rezervărilor, camerelor, facturării și serviciilor pentru hoteluri moderne.">
+    <meta name="keywords" content="sistem hotel, program hotel, ROA HORECA, management rezervari, facturare hotel, ERP hotel, restaurant, cazare, rezervari camere, sistem informatic hotel">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
+</head>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
+                    </div>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Breadcrumb Navigation -->
+        <nav class="flex mb-8" aria-label="Breadcrumb">
+            <ol class="inline-flex items-center space-x-1 md:space-x-3">
+                <li class="inline-flex items-center">
+                    <a href="../index.html" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
+                        <i data-lucide="home" class="w-4 h-4 mr-2"></i>
+                        Prima pagină
+                    </a>
+                </li>
+                <li>
+                    <div class="flex items-center">
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+                        <a href="aplicatii-erp.html" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2">ROA</a>
+                    </div>
+                </li>
+                <li aria-current="page">
+                    <div class="flex items-center">
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+                        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">ROA HORECA</span>
+                    </div>
+                </li>
+            </ol>
+        </nav>
+
+        <!-- Professional Hero Section for HORECA -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper mx-auto mb-8">
+                    <i data-lucide="utensils" class="w-12 h-12 text-white"></i>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA HORECA
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Soluția completă pentru managementul hotelurilor și restaurantelor. 
+                    De la rezervări la facturare, toate operațiile într-un singur sistem integrat.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicită Demonstrație</span>
+                    </a>
+                    <button class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Vezi Funcționalități</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Overview -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Funcționalități HORECA Complete</h2>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Rezervări -->
+                <div class="professional-card service-technology p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="calendar-check" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Rezervări Avansate</h3>
+                    <p class="professional-text-secondary mb-4 leading-relaxed">
+                        Sistem complet de rezervări cu calendarul camerelor, gestionarea ocupării și confirmări automate.
+                    </p>
+                    <ul class="text-left professional-text-secondary text-sm space-y-2">
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Calendar interactiv rezervări</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Grupuri și evenimente</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Notificări automate</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Management Camere -->
+                <div class="professional-card service-reliability p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="bed" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Management Camere</h3>
+                    <p class="professional-text-secondary mb-4 leading-relaxed">
+                        Control complet asupra camerelor, tipurilor, tarifelor și stării camerelor în timp real.
+                    </p>
+                    <ul class="text-left professional-text-secondary text-sm space-y-2">
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Tipuri și categorii camere</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Sezoane și tarife dinamice</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Status și întreținere</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Facturare -->
+                <div class="professional-card service-technology p-6 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="receipt" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Facturare Integrată</h3>
+                    <p class="professional-text-secondary mb-4 leading-relaxed">
+                        Emitere automată de facturi, bonuri fiscale și gestionarea plăților pentru toate serviciile.
+                    </p>
+                    <ul class="text-left professional-text-secondary text-sm space-y-2">
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Facturare automată</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Multiple modalități plată</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span class="text-blue-500">•</span>
+                            <span>Bonuri fiscale integrate</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Configuration & Operations Section -->
+        <section class="mb-16">
+            <div class="grid lg:grid-cols-2 gap-12">
+                
+                <!-- Configurări -->
+                <div class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                            <i data-lucide="settings" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold professional-text-primary">Configurări Sistema</h3>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div class="border-l-4 border-blue-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">1. Tipuri de Camere</h4>
+                            <p class="text-gray-600 text-sm">Definirea categoriilor și caracteristicilor pentru toate tipurile de camere.</p>
+                        </div>
+                        
+                        <div class="border-l-4 border-blue-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">2. Sezoane și Tarife</h4>
+                            <p class="text-gray-600 text-sm mb-2">Configurarea structurii tarifelor pe sezoane:</p>
+                            <ul class="text-gray-600 text-sm space-y-1 ml-4">
+                                <li>• Definire/modificare sezoane</li>
+                                <li>• Definire/modificare tarife</li>
+                            </ul>
+                        </div>
+                        
+                        <div class="border-l-4 border-blue-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">3. Detalii Camere</h4>
+                            <p class="text-gray-600 text-sm">Modificare număr cameră și limita de copii cazați gratuit per cameră.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Operații -->
+                <div class="professional-card p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="professional-icon-wrapper mr-4" style="width: 60px; height: 60px;">
+                            <i data-lucide="activity" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-semibold professional-text-primary">Operații Zilnice</h3>
+                    </div>
+                    
+                    <div class="space-y-4 max-h-96 overflow-y-auto">
+                        <div class="border-l-4 border-green-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">1. Cazare Nouă</h4>
+                            <ul class="text-gray-600 text-sm space-y-1 ml-2">
+                                <li>• Adăugare client nou</li>
+                                <li>• Completare detalii adresă</li>
+                            </ul>
+                        </div>
+                        
+                        <div class="border-l-4 border-green-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">2. Modificare Date Client</h4>
+                            <ul class="text-gray-600 text-sm space-y-1 ml-2">
+                                <li>• Resetare date client</li>
+                                <li>• Căutare în baza de date</li>
+                            </ul>
+                        </div>
+                        
+                        <div class="border-l-4 border-green-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">3. Cazare Avansată</h4>
+                            <ul class="text-gray-600 text-sm space-y-1 ml-2">
+                                <li>• Modificare prețuri speciale</li>
+                                <li>• Gestionare adrese multiple</li>
+                            </ul>
+                        </div>
+                        
+                        <div class="border-l-4 border-yellow-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">4. Deschidere de Zi</h4>
+                            <p class="text-gray-600 text-sm">Procedura zilnică de inițializare sistem cu verificări automate.</p>
+                        </div>
+                        
+                        <div class="border-l-4 border-red-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">5. Facturare Completă</h4>
+                            <ul class="text-gray-600 text-sm space-y-1 ml-2">
+                                <li>• Facturare cazare cameră</li>
+                                <li>• Împărțire servicii multiple facturi</li>
+                                <li>• Modificare modalități achitare</li>
+                                <li>• Gestionare date client facturare</li>
+                            </ul>
+                        </div>
+                        
+                        <div class="border-l-4 border-purple-500 pl-4">
+                            <h4 class="font-semibold text-gray-800 mb-2">6-10. Operații Avansate</h4>
+                            <ul class="text-gray-600 text-sm space-y-1 ml-2">
+                                <li>• Relistare și reemitere facturi</li>
+                                <li>• Eliberare și curățare camere</li>
+                                <li>• Management rezervări complete</li>
+                                <li>• Gestionare grupuri și evenimente</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Benefits Section -->
+        <section class="professional-hero mb-16">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-8 professional-text-primary">De ce să alegi ROA HORECA?</h2>
+                
+                <div class="grid md:grid-cols-3 gap-8 mb-8">
+                    <div class="bg-white bg-opacity-90 rounded-lg p-6">
+                        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-lucide="zap" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="font-semibold mb-2">Eficiență Maximă</h3>
+                        <p class="text-sm text-gray-600">Automatizarea proceselor reduce timpul de operare cu până la 70%.</p>
+                    </div>
+                    
+                    <div class="bg-white bg-opacity-90 rounded-lg p-6">
+                        <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-lucide="shield-check" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="font-semibold mb-2">Siguranță Totală</h3>
+                        <p class="text-sm text-gray-600">Backup automat și securitate avansată pentru toate datele.</p>
+                    </div>
+                    
+                    <div class="bg-white bg-opacity-90 rounded-lg p-6">
+                        <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="font-semibold mb-2">Creștere Venituri</h3>
+                        <p class="text-sm text-gray-600">Optimizarea ocupării și tarifelor pentru profitabilitate maximă.</p>
+                    </div>
+                </div>
+                
+                <a href="../menu/contact.html" class="professional-btn-primary px-8 py-4 text-lg inline-block">
+                    <span>Contactează-ne pentru Ofertă</span>
+                </a>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/roa/roa-imobilizari.html b/roa/roa-imobilizari.html
index 6523664..6c76013 100644
--- a/roa/roa-imobilizari.html
+++ b/roa/roa-imobilizari.html
@@ -3,375 +3,454 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROA Imobilizari - Romfast</title>
+    <title>ROA Imobilizari - Managementul Imobilizărilor | Romfast</title>
     <meta name="description" content="ROA Imobilizari faciliteaza urmarirea imobilizarilor corporale, necorporale si in curs, cu calculul automat al amortismentului lunar.">
     <meta name="keywords" content="program imobilizari, mijloace fixe, amortisment, ROA, romfast, sistem informatic ERP, amortizare contabila, amortizare fiscala">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
+<body class="min-h-screen">
 
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="../menu/analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="../menu/implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="../menu/roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="../menu/alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
         
         <!-- Breadcrumb -->
-        <nav aria-label="breadcrumb" class="mb-4">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii-erp.html">ROA - Romfast applications</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii.html">Aplicatii ROA</a></li>
-                <li class="breadcrumb-item active" aria-current="page">ROA Imobilizari</li>
+        <nav class="flex mb-8" aria-label="Breadcrumb">
+            <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+                <li class="inline-flex items-center">
+                    <a href="../index.html" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
+                        <i data-lucide="home" class="w-3 h-3 me-2.5"></i>
+                        Prima pagina
+                    </a>
+                </li>
+                <li>
+                    <div class="flex items-center">
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400 mx-1"></i>
+                        <a href="aplicatii-erp.html" class="text-sm font-medium text-gray-700 hover:text-blue-600">ROA Applications</a>
+                    </div>
+                </li>
+                <li aria-current="page">
+                    <div class="flex items-center">
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400 mx-1"></i>
+                        <span class="text-sm font-medium text-gray-500">ROA Imobilizari</span>
+                    </div>
+                </li>
             </ol>
         </nav>
 
-        <!-- Page Header -->
-        <section class="mb-5">
-            <div class="row align-items-center">
-                <div class="col-12">
-                    <img src="images/roaimobilizari.png" alt="ROA Imobilizari" class="img-fluid mb-3" style="max-height: 60px;">
-                    <h1 class="h2">ROA Imobilizari</h1>
+        <!-- Professional Hero Section -->
+        <section class="professional-hero text-center mb-12">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper">
+                    <i data-lucide="building" class="w-10 h-10 text-white"></i>
                 </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA Imobilizari
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Managementul complet al imobilizărilor corporale, necorporale și în curs, cu calculul automat al amortismentului conform legii.
+                </p>
             </div>
         </section>
 
-        <!-- Main Description -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-body">
-                    <p class="lead">
-                        Aplicatia <strong>ROA Imobilizari</strong> este realizata pentru a facilita urmarirea imobilizarilor din proprietatea societatii si calculul automat al amortismentului lunar pana la amortizarea completa si/sau pana la iesirea din gestiune.
-                    </p>
+        <!-- Main Overview Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Aplicația <strong class="professional-text-primary">ROA Imobilizari</strong> este realizată pentru a facilita urmărirea imobilizărilor din proprietatea societății și calculul automat al amortismentului lunar până la amortizarea completă și/sau până la ieșirea din gestiune.
+                </p>
+                
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="professional-card service-technology p-6 text-center">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+                            <i data-lucide="hard-hat" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold mb-3 professional-text-primary">Imobilizări corporale</h3>
+                        <p class="professional-text-secondary">Echipamente, mașini, clădiri</p>
+                    </div>
                     
-                    <div class="row">
-                        <div class="col-md-4">
-                            <div class="card bg-primary text-white">
-                                <div class="card-body text-center">
-                                    <h5 class="card-title">Imobilizari corporale</h5>
-                                    <p class="card-text">Echipamente, masini, cladiri</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card bg-info text-white">
-                                <div class="card-body text-center">
-                                    <h5 class="card-title">Imobilizari necorporale</h5>
-                                    <p class="card-text">Software, licente, brevete</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card theme-card text-white">
-                                <div class="card-body text-center">
-                                    <h5 class="card-title">Imobilizari in curs</h5>
-                                    <p class="card-text">Investitii nefinalizate</p>
-                                </div>
-                            </div>
+                    <div class="professional-card service-technology p-6 text-center">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center">
+                            <i data-lucide="file-code" class="w-8 h-8 text-white"></i>
                         </div>
+                        <h3 class="text-lg font-semibold mb-3 professional-text-primary">Imobilizări necorporale</h3>
+                        <p class="professional-text-secondary">Software, licențe, brevete</p>
                     </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Organization -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Organizarea</h3>
-                </div>
-                <div class="card-body">
-                    <div class="alert theme-alert-info" role="alert">
-                        <i class="bi bi-info-circle-fill me-2"></i>
-                        <strong>Urmarirea imobilizarilor</strong> incepe la preluarea documentelor de intrare in evidenta, moment in care se definesc si specificatiile acestora. In continuare gestionarea mijloacelor fixe se realizeaza automat, efectuandu-se calculele de amortizare conform legii.
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Functions -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Functiuni</h3>
-                </div>
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-lg-6">
-                            <h5 class="text-primary">Clasificare si incadrare</h5>
-                            <ul class="list-unstyled">
-                                <li class="mb-2">
-                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
-                                    Stabilirea clasei de incadrare a mijloacelor fixe si a duratei normale de functionare
-                                </li>
-                                <li class="mb-2">
-                                    <i class="bi bi-check-circle-fill text-success me-2"></i>
-                                    Transpunerea legii privind clasificarea mijloacelor fixe (HG 964/23.12.1998)
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="col-lg-6">
-                            <h5 class="text-primary">Moduri de inregistrare</h5>
-                            <div class="row">
-                                <div class="col-12 mb-3">
-                                    <div class="card theme-card">
-                                        <div class="card-body">
-                                            <h6 class="card-title">1. Introducere directa</h6>
-                                            <p class="card-text small">Prin introducerea directa a documentelor de achizitie</p>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-12">
-                                    <div class="card theme-card">
-                                        <div class="card-body">
-                                            <h6 class="card-title">2. Preluare automata</h6>
-                                            <p class="card-text small">Din modulul <strong>ROA Financiar-Contabilitate</strong> a tuturor notelor de achizitii</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="alert theme-alert-warning mt-4" role="alert">
-                        <h5 class="alert-heading">Caracteristica importanta</h5>
-                        <p class="mb-0"><strong>Programul ROA Imobilizari prelucreaza atat calculele de amortizare contabila cat si de amortizare fiscala.</strong></p>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- System Integration -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Integrarea in Sistemul Informatic ROA</h3>
-                </div>
-                <div class="card-body">
-                    <p><strong>ROA Imobilizari</strong> comunica cu programul de contabilitate <strong>ROA Financiar-Contabilitate</strong> in scopul indeplinirii urmatoarelor functiuni:</p>
                     
-                    <div class="row">
-                        <div class="col-md-6">
-                            <div class="card border-primary">
-                                <div class="card-body">
-                                    <h5 class="card-title text-primary">Preluare selectiva</h5>
-                                    <p class="card-text">In evidenta imobilizarilor a documentelor de achizitie a mijloacelor fixe, precum si a altor documente in legatura cu imobilizarile necorporale si a celor in curs.</p>
-                                </div>
-                            </div>
+                    <div class="professional-card service-technology p-6 text-center">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center">
+                            <i data-lucide="construction" class="w-8 h-8 text-white"></i>
                         </div>
-                        <div class="col-md-6">
-                            <div class="card border-success">
-                                <div class="card-body">
-                                    <h5 class="card-title text-success">Nota de inchidere</h5>
-                                    <p class="card-text">Obtinerea notei de inchidere a amortizarii in mod automat.</p>
-                                </div>
-                            </div>
+                        <h3 class="text-lg font-semibold mb-3 professional-text-primary">Imobilizări în curs</h3>
+                        <p class="professional-text-secondary">Investiții nefinalizate</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Organization Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <h2 class="text-3xl font-bold mb-6 professional-text-primary flex items-center">
+                    <i data-lucide="clipboard-list" class="w-8 h-8 mr-3"></i>
+                    Organizarea
+                </h2>
+                
+                <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg">
+                    <div class="flex items-start">
+                        <i data-lucide="info" class="w-6 h-6 text-blue-600 mr-3 mt-0.5"></i>
+                        <div>
+                            <p class="professional-text-secondary text-lg leading-relaxed">
+                                <strong class="professional-text-primary">Urmărirea imobilizărilor</strong> începe la preluarea documentelor de intrare în evidență, moment în care se definesc și specificațiile acestora. În continuare gestionarea mijloacelor fixe se realizează automat, efectuându-se calculele de amortizare conform legii.
+                            </p>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- Features -->
-        <section class="mb-5">
-            <div class="card theme-card">
-                <div class="card-header">
-                    <h3 class="mb-0">Facilitati</h3>
-                </div>
-                <div class="card-body">
-                    <p><strong>ROA Imobilizari</strong> rezolva problemele legate de:</p>
+        <!-- Functions Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <h2 class="text-3xl font-bold mb-8 professional-text-primary flex items-center">
+                    <i data-lucide="settings" class="w-8 h-8 mr-3"></i>
+                    Funcțiuni
+                </h2>
+                
+                <div class="grid lg:grid-cols-2 gap-8">
+                    <!-- Classification Section -->
+                    <div class="professional-card service-technology p-6">
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary flex items-center">
+                            <i data-lucide="layers" class="w-6 h-6 mr-2"></i>
+                            Clasificare și încadrare
+                        </h3>
+                        <ul class="space-y-3">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">Stabilirea clasei de încadrare a mijloacelor fixe și a duratei normale de funcționare</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">Transpunerea legii privind clasificarea mijloacelor fixe (HG 964/23.12.1998)</span>
+                            </li>
+                        </ul>
+                    </div>
                     
-                    <div class="row">
-                        <div class="col-md-6">
-                            <h5 class="text-primary">Calcule si evidenta</h5>
-                            <ul>
-                                <li>calculul amortizarii lunare, a valorii totale amortizate, a valorii ramase de amortizat</li>
-                                <li>calculul altor valori adiacente, pentru fiecare mijloc fix in parte</li>
-                                <li>inregistrarea vanzarii, casarii si a iesirii din evidenta</li>
-                                <li>transformarea imobilizarilor in curs in mijloace fixe</li>
-                            </ul>
-                        </div>
-                        <div class="col-md-6">
-                            <h5 class="text-primary">Vizualizare si rapoarte</h5>
-                            <ul>
-                                <li>vizualizarea listei de mijloace fixe pe grupe, pe luni, pe gestiuni</li>
-                                <li>vizualizarea si listarea situatiei amortizarilor lunare</li>
-                                <li>vizualizarea si listarea rulajelor si sumelor totale pe conturi</li>
-                                <li>facilitarea calculelor de reevaluare a mijloacelor fixe</li>
-                            </ul>
+                    <!-- Registration Methods -->
+                    <div class="professional-card service-reliability p-6">
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary flex items-center">
+                            <i data-lucide="file-plus" class="w-6 h-6 mr-2"></i>
+                            Moduri de înregistrare
+                        </h3>
+                        <div class="space-y-4">
+                            <div class="bg-white border border-gray-200 rounded-lg p-4">
+                                <h4 class="font-semibold professional-text-primary mb-2">1. Introducere directă</h4>
+                                <p class="text-sm professional-text-secondary">Prin introducerea directă a documentelor de achiziție</p>
+                            </div>
+                            <div class="bg-white border border-gray-200 rounded-lg p-4">
+                                <h4 class="font-semibold professional-text-primary mb-2">2. Preluare automată</h4>
+                                <p class="text-sm professional-text-secondary">Din modulul <strong>ROA Financiar-Contabilitate</strong> a tuturor notelor de achiziții</p>
+                            </div>
                         </div>
                     </div>
+                </div>
 
-                    <div class="alert theme-alert-success mt-4" role="alert">
-                        <h5 class="alert-heading">Istoric complet</h5>
-                        <p class="mb-0">Crearea unui istoric bogat al evenimentelor cu efecte asupra imobilizarilor, cu posibilitatea accesarii in orice moment.</p>
+                <!-- Important Feature Highlight -->
+                <div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg mt-8">
+                    <div class="flex items-start">
+                        <i data-lucide="alert-circle" class="w-6 h-6 text-amber-600 mr-3 mt-0.5"></i>
+                        <div>
+                            <h3 class="text-lg font-semibold professional-text-primary mb-2">Caracteristică importantă</h3>
+                            <p class="professional-text-secondary text-lg"><strong>Programul ROA Imobilizari prelucrează atât calculele de amortizare contabilă cât și de amortizare fiscală.</strong></p>
+                        </div>
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- Key Benefits -->
-        <section class="mb-5">
-            <div class="card border-success">
-                <div class="card-header bg-success text-white">
-                    <h3 class="mb-0">Beneficii cheie</h3>
+        <!-- System Integration Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <h2 class="text-3xl font-bold mb-6 professional-text-primary flex items-center">
+                    <i data-lucide="network" class="w-8 h-8 mr-3"></i>
+                    Integrarea în Sistemul Informatic ROA
+                </h2>
+                
+                <p class="text-lg professional-text-secondary mb-8 leading-relaxed">
+                    <strong class="professional-text-primary">ROA Imobilizari</strong> comunică cu programul de contabilitate <strong class="professional-text-primary">ROA Financiar-Contabilitate</strong> în scopul îndeplinirii următoarelor funcțiuni:
+                </p>
+                
+                <div class="grid md:grid-cols-2 gap-6">
+                    <div class="professional-card p-6 border-l-4 border-blue-500">
+                        <div class="flex items-center mb-4">
+                            <i data-lucide="download" class="w-8 h-8 text-blue-600 mr-3"></i>
+                            <h3 class="text-xl font-semibold professional-text-primary">Preluare selectivă</h3>
+                        </div>
+                        <p class="professional-text-secondary">În evidența imobilizărilor a documentelor de achiziție a mijloacelor fixe, precum și a altor documente în legătură cu imobilizările necorporale și a celor în curs.</p>
+                    </div>
+                    
+                    <div class="professional-card p-6 border-l-4 border-green-500">
+                        <div class="flex items-center mb-4">
+                            <i data-lucide="file-check" class="w-8 h-8 text-green-600 mr-3"></i>
+                            <h3 class="text-xl font-semibold professional-text-primary">Notă de închidere</h3>
+                        </div>
+                        <p class="professional-text-secondary">Obținerea notei de închidere a amortizării în mod automat.</p>
+                    </div>
                 </div>
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-4 mb-3">
-                            <div class="text-center">
-                                <div class="display-4 text-success">⚡</div>
-                                <h5>Automatizare</h5>
-                                <p class="small">Calcul automat al amortismentului conform legii</p>
-                            </div>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <h2 class="text-3xl font-bold mb-6 professional-text-primary flex items-center">
+                    <i data-lucide="zap" class="w-8 h-8 mr-3"></i>
+                    Facilități
+                </h2>
+                
+                <p class="text-lg professional-text-secondary mb-8">
+                    <strong class="professional-text-primary">ROA Imobilizari</strong> rezolvă problemele legate de:
+                </p>
+                
+                <div class="grid lg:grid-cols-2 gap-8">
+                    <!-- Calculations Section -->
+                    <div class="professional-card service-technology p-6">
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary flex items-center">
+                            <i data-lucide="calculator" class="w-6 h-6 mr-2"></i>
+                            Calcule și evidență
+                        </h3>
+                        <ul class="space-y-3">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="minus-circle" class="w-5 h-5 text-blue-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">calculul amortizării lunare, a valorii totale amortizate, a valorii rămase de amortizat</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="minus-circle" class="w-5 h-5 text-blue-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">calculul altor valori adiacente, pentru fiecare mijloc fix în parte</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="minus-circle" class="w-5 h-5 text-blue-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">înregistrarea vânzării, casării și a ieșirii din evidență</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="minus-circle" class="w-5 h-5 text-blue-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">transformarea imobilizărilor în curs în mijloace fixe</span>
+                            </li>
+                        </ul>
+                    </div>
+                    
+                    <!-- Visualization Section -->
+                    <div class="professional-card service-reliability p-6">
+                        <h3 class="text-xl font-semibold mb-4 professional-text-primary flex items-center">
+                            <i data-lucide="bar-chart-3" class="w-6 h-6 mr-2"></i>
+                            Vizualizare și rapoarte
+                        </h3>
+                        <ul class="space-y-3">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="eye" class="w-5 h-5 text-teal-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">vizualizarea listei de mijloace fixe pe grupe, pe luni, pe gestiuni</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="eye" class="w-5 h-5 text-teal-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">vizualizarea și listarea situației amortizărilor lunare</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="eye" class="w-5 h-5 text-teal-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">vizualizarea și listarea rulajelor și sumelor totale pe conturi</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="eye" class="w-5 h-5 text-teal-600 mt-0.5"></i>
+                                <span class="professional-text-secondary">facilitarea calculelor de reevaluare a mijloacelor fixe</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Historic Feature Highlight -->
+                <div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg mt-8">
+                    <div class="flex items-start">
+                        <i data-lucide="clock" class="w-6 h-6 text-green-600 mr-3 mt-0.5"></i>
+                        <div>
+                            <h3 class="text-lg font-semibold professional-text-primary mb-2">Istoric complet</h3>
+                            <p class="professional-text-secondary text-lg">Crearea unui istoric bogat al evenimentelor cu efecte asupra imobilizărilor, cu posibilitatea accesării în orice moment.</p>
                         </div>
-                        <div class="col-md-4 mb-3">
-                            <div class="text-center">
-                                <div class="display-4 text-primary">🔗</div>
-                                <h5>Integrare</h5>
-                                <p class="small">Conectare perfecta cu modulul de contabilitate</p>
-                            </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Key Benefits Section -->
+        <section class="mb-16">
+            <div class="professional-card professional-card-featured p-8">
+                <h2 class="text-3xl font-bold mb-8 professional-text-primary text-center flex items-center justify-center">
+                    <i data-lucide="star" class="w-8 h-8 mr-3"></i>
+                    Beneficii cheie
+                </h2>
+                
+                <div class="grid md:grid-cols-3 gap-8">
+                    <!-- Automation Benefit -->
+                    <div class="professional-card service-technology p-6 text-center">
+                        <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
+                            <i data-lucide="zap" class="w-10 h-10 text-white"></i>
                         </div>
-                        <div class="col-md-4 mb-3">
-                            <div class="text-center">
-                                <div class="display-4 text-warning">📊</div>
-                                <h5>Raportare</h5>
-                                <p class="small">Rapoarte detaliate si istoric complet</p>
-                            </div>
+                        <h3 class="text-xl font-semibold mb-3 professional-text-primary">Automatizare</h3>
+                        <p class="professional-text-secondary">Calcul automat al amortismentului conform legii</p>
+                    </div>
+                    
+                    <!-- Integration Benefit -->
+                    <div class="professional-card service-technology p-6 text-center">
+                        <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+                            <i data-lucide="link" class="w-10 h-10 text-white"></i>
                         </div>
+                        <h3 class="text-xl font-semibold mb-3 professional-text-primary">Integrare</h3>
+                        <p class="professional-text-secondary">Conectare perfectă cu modulul de contabilitate</p>
+                    </div>
+                    
+                    <!-- Reporting Benefit -->
+                    <div class="professional-card service-technology p-6 text-center">
+                        <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center">
+                            <i data-lucide="trending-up" class="w-10 h-10 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-3 professional-text-primary">Raportare</h3>
+                        <p class="professional-text-secondary">Rapoarte detaliate și istoric complet</p>
                     </div>
                 </div>
             </div>
         </section>
 
         <!-- Navigation Links -->
-        <section class="mb-5">
-            <div class="row">
-                <div class="col-md-6 mb-3">
-                    <a href="aplicatii-erp.html" class="btn btn-outline-primary">
-                        <i class="bi bi-arrow-left me-2"></i>
-                        Inapoi la ROA Applications
-                    </a>
-                </div>
-                <div class="col-md-6 text-md-end mb-3">
-                    <a href="aplicatii.html" class="btn btn-primary">
-                        Vezi toate aplicatiile ROA
-                        <i class="bi bi-arrow-right ms-2"></i>
-                    </a>
-                </div>
+        <section class="mb-16">
+            <div class="flex flex-col sm:flex-row gap-4 justify-between">
+                <a href="aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg flex items-center justify-center">
+                    <i data-lucide="arrow-left" class="w-5 h-5 mr-2"></i>
+                    <span>Înapoi la ROA Applications</span>
+                </a>
+                <a href="aplicatii.html" class="professional-btn-primary px-8 py-4 text-lg flex items-center justify-center">
+                    <span>Vezi toate aplicațiile ROA</span>
+                    <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
+                </a>
             </div>
         </section>
 
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../menu/politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Professional Theme JavaScript -->
     <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
+        // Initialize Lucide icons
+        lucide.createIcons();
+        
+        // Professional theme toggle functionality
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeIcon = themeToggle?.querySelector('[data-lucide]');
+        
+        function setTheme(theme) {
+            if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.body.classList.add('dark-mode');
+                if (themeIcon) {
+                    themeIcon.setAttribute('data-lucide', 'moon');
+                    lucide.createIcons();
+                }
+            } else {
+                document.body.classList.remove('dark-mode');
+                if (themeIcon) {
+                    themeIcon.setAttribute('data-lucide', 'sun');
+                    lucide.createIcons();
                 }
             }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
+            localStorage.setItem('theme', theme);
         }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
+        
+        // Theme toggle click handler
+        themeToggle?.addEventListener('click', () => {
+            const currentTheme = localStorage.getItem('theme') || 'light';
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            setTheme(newTheme);
         });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
+        
+        // Initialize theme on page load
+        const savedTheme = localStorage.getItem('theme') || 'system';
+        setTheme(savedTheme);
+        
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            if (localStorage.getItem('theme') === 'system') {
+                setTheme('system');
             }
         });
     </script>
-    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/roa/roa-proiecte-devize.html b/roa/roa-proiecte-devize.html
new file mode 100644
index 0000000..ae56214
--- /dev/null
+++ b/roa/roa-proiecte-devize.html
@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ROA PROIECTE DEVIZE LUCRĂRI - Program pentru calculul devizelor de lucrări și managementul proiectelor | Romfast</title>
+    <meta name="description" content="ROA PROIECTE DEVIZE LUCRĂRI - Sistem specializat pentru calculul devizelor de lucrări, managementul proiectelor și estimarea costurilor de construcții. Program pentru firme de construcții și arhitectură.">
+    <meta name="keywords" content="program devize lucrari, calculul devizelor, managementul proiectelor, estimarea costurilor, construcții, arhitectură, ROA proiecte, devize constructii, proiectare, roa, romfast">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
+</head>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
+                    </div>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Breadcrumb -->
+        <nav class="mb-8">
+            <ol class="flex items-center space-x-2 text-sm professional-text-secondary">
+                <li><a href="../index.html" class="hover:text-blue-600 transition-colors">Prima pagină</a></li>
+                <li><i data-lucide="chevron-right" class="w-4 h-4 mx-2"></i></li>
+                <li><a href="aplicatii-erp.html" class="hover:text-blue-600 transition-colors">ROA Applications</a></li>
+                <li><i data-lucide="chevron-right" class="w-4 h-4 mx-2"></i></li>
+                <li class="professional-text-primary font-medium">ROA PROIECTE DEVIZE LUCRĂRI</li>
+            </ol>
+        </nav>
+
+        <!-- Hero Section -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper mb-6">
+                    <i data-lucide="calculator" class="w-12 h-12 text-white"></i>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA PROIECTE DEVIZE LUCRĂRI
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Sistem specializat pentru calculul devizelor de lucrări, managementul proiectelor 
+                    și estimarea costurilor de construcții și arhitectură.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <button class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Solicită Demo</span>
+                    </button>
+                    <a href="../menu/contact.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Contact Vânzări</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Main Features Grid -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Funcționalități Principale</h2>
+            
+            <div class="grid lg:grid-cols-3 gap-8">
+                <!-- Calculul Devizelor -->
+                <div class="professional-card service-technology p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="file-spreadsheet" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Calculul Devizelor</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Baza de date cu materiale și servicii</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Calcul automat al costurilor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Actualizare prețuri în timp real</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Export în multiple formate</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Managementul Proiectelor -->
+                <div class="professional-card service-reliability p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="folder-open" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Managementul Proiectelor</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #4a7ba7;"></i>
+                            <span>Organizarea proiectelor pe etape</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #4a7ba7;"></i>
+                            <span>Monitorizarea progresului</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #4a7ba7;"></i>
+                            <span>Planificarea termenelor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #4a7ba7;"></i>
+                            <span>Raportarea automată</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Estimarea Costurilor -->
+                <div class="professional-card service-technology p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="trending-up" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Estimarea Costurilor</h3>
+                    <ul class="text-left professional-text-secondary space-y-3 mb-6">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Analize de profitabilitate</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Compararea variantelor</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Previziuni bugetare</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 mt-0.5" style="color: #5288c4;"></i>
+                            <span>Control costuri în timp real</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Key Benefits Section -->
+        <section class="professional-hero mb-16">
+            <div class="max-w-6xl mx-auto">
+                <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">De Ce să Alegi ROA PROIECTE DEVIZE LUCRĂRI?</h2>
+                
+                <div class="grid md:grid-cols-2 gap-12 items-center">
+                    <div>
+                        <h3 class="text-2xl font-semibold mb-6 professional-text-primary">Avantajele Principale</h3>
+                        <ul class="space-y-4 professional-text-secondary">
+                            <li class="flex items-start space-x-4">
+                                <div class="bg-blue-100 rounded-full p-2 mt-1">
+                                    <i data-lucide="clock" class="w-5 h-5" style="color: #5288c4;"></i>
+                                </div>
+                                <div>
+                                    <strong class="professional-text-primary">Eficiență Maximă:</strong>
+                                    <span>Reducerea cu 70% a timpului de calculare a devizelor</span>
+                                </div>
+                            </li>
+                            <li class="flex items-start space-x-4">
+                                <div class="bg-blue-100 rounded-full p-2 mt-1">
+                                    <i data-lucide="target" class="w-5 h-5" style="color: #5288c4;"></i>
+                                </div>
+                                <div>
+                                    <strong class="professional-text-primary">Precizie Ridicată:</strong>
+                                    <span>Calcule exacte cu marje de eroare minime</span>
+                                </div>
+                            </li>
+                            <li class="flex items-start space-x-4">
+                                <div class="bg-blue-100 rounded-full p-2 mt-1">
+                                    <i data-lucide="users" class="w-5 h-5" style="color: #5288c4;"></i>
+                                </div>
+                                <div>
+                                    <strong class="professional-text-primary">Colaborare Echipă:</strong>
+                                    <span>Lucru în echipă pe proiecte complexe</span>
+                                </div>
+                            </li>
+                            <li class="flex items-start space-x-4">
+                                <div class="bg-blue-100 rounded-full p-2 mt-1">
+                                    <i data-lucide="bar-chart-3" class="w-5 h-5" style="color: #5288c4;"></i>
+                                </div>
+                                <div>
+                                    <strong class="professional-text-primary">Raportare Avansată:</strong>
+                                    <span>Rapoarte detaliate și analize comparative</span>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                    
+                    <div class="text-center">
+                        <div class="professional-card p-8">
+                            <div class="text-center mb-6">
+                                <div class="text-4xl font-bold professional-text-primary mb-2">70%</div>
+                                <div class="professional-text-secondary">Reducerea timpului de lucru</div>
+                            </div>
+                            <div class="text-center mb-6">
+                                <div class="text-4xl font-bold professional-text-primary mb-2">95%</div>
+                                <div class="professional-text-secondary">Precizie în calcule</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-4xl font-bold professional-text-primary mb-2">500+</div>
+                                <div class="professional-text-secondary">Proiecte finalizate cu succes</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Technical Specifications -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Specificații Tehnice</h2>
+            
+            <div class="grid lg:grid-cols-2 gap-8">
+                <!-- System Requirements -->
+                <div class="professional-card p-8">
+                    <h3 class="text-xl font-semibold mb-6 professional-text-primary flex items-center">
+                        <i data-lucide="monitor" class="w-6 h-6 mr-3" style="color: #5288c4;"></i>
+                        Cerințe de Sistem
+                    </h3>
+                    <div class="space-y-4 professional-text-secondary">
+                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
+                            <span class="font-medium">Sistem de Operare:</span>
+                            <span>Windows 10/11, Server 2016+</span>
+                        </div>
+                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
+                            <span class="font-medium">Memorie RAM:</span>
+                            <span>Minim 4GB, recomandat 8GB+</span>
+                        </div>
+                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
+                            <span class="font-medium">Spațiu pe Disk:</span>
+                            <span>2GB pentru instalare</span>
+                        </div>
+                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
+                            <span class="font-medium">Baza de Date:</span>
+                            <span>SQL Server, Oracle, MySQL</span>
+                        </div>
+                        <div class="flex justify-between items-center py-2">
+                            <span class="font-medium">Rețea:</span>
+                            <span>LAN/WAN pentru multiuser</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Integration Features -->
+                <div class="professional-card p-8">
+                    <h3 class="text-xl font-semibold mb-6 professional-text-primary flex items-center">
+                        <i data-lucide="link" class="w-6 h-6 mr-3" style="color: #5288c4;"></i>
+                        Integrări și Export
+                    </h3>
+                    <div class="space-y-4">
+                        <div class="flex items-center space-x-3">
+                            <i data-lucide="file-text" class="w-5 h-5" style="color: #4a7ba7;"></i>
+                            <span class="professional-text-secondary">Export Excel și PDF</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <i data-lucide="database" class="w-5 h-5" style="color: #4a7ba7;"></i>
+                            <span class="professional-text-secondary">Integrare cu ROA Contabilitate</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <i data-lucide="shopping-cart" class="w-5 h-5" style="color: #4a7ba7;"></i>
+                            <span class="professional-text-secondary">Sincronizare cu ROA Gestiune</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <i data-lucide="mail" class="w-5 h-5" style="color: #4a7ba7;"></i>
+                            <span class="professional-text-secondary">Trimitere automată email</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <i data-lucide="cloud" class="w-5 h-5" style="color: #4a7ba7;"></i>
+                            <span class="professional-text-secondary">Backup automat în cloud</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <i data-lucide="smartphone" class="w-5 h-5" style="color: #4a7ba7;"></i>
+                            <span class="professional-text-secondary">Acces mobil prin aplicație</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Call to Action Section -->
+        <section class="professional-support text-center mb-16">
+            <h2 class="text-2xl font-bold mb-6 professional-text-primary">Începe să Folosești ROA PROIECTE DEVIZE LUCRĂRI Astăzi</h2>
+            <p class="text-lg professional-text-secondary mb-8 max-w-3xl mx-auto">
+                Transformă-ți modul de lucru cu devizele și proiectele. Contactează echipa noastră pentru 
+                o demonstrație personalizată și descoperă cum poate ROA să îți eficientizeze activitatea.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button class="professional-btn-primary px-8 py-4 text-lg">
+                    <span>Demonstrație Gratuită</span>
+                </button>
+                <a href="../menu/contact.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                    <span>Contactează-ne</span>
+                </a>
+            </div>
+        </section>
+
+        <!-- Related ROA Modules -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-center mb-8 professional-text-primary">Module ROA Complementare</h2>
+            <div class="grid sm:grid-cols-3 gap-6">
+                <div class="professional-support-card">
+                    <i data-lucide="calculator" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">ROA Contabilitate</h3>
+                    <p class="text-sm professional-text-secondary mb-4">Integrează devizele direct în contabilitate</p>
+                    <a href="roa-financiar-contabilitate.html" class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                        <span>Vezi Detalii</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="package" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">ROA Gestiune</h3>
+                    <p class="text-sm professional-text-secondary mb-4">Gestionează materialele și stocurile</p>
+                    <a href="roa-gestiune.html" class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                        <span>Vezi Detalii</span>
+                    </a>
+                </div>
+                <div class="professional-support-card">
+                    <i data-lucide="file-text" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
+                    <h3 class="font-semibold mb-3 professional-text-primary">ROA Facturare</h3>
+                    <p class="text-sm professional-text-secondary mb-4">Facturează automat din devize</p>
+                    <a href="roa-facturare.html" class="professional-btn-secondary px-6 py-2 w-full inline-block text-sm">
+                        <span>Vezi Detalii</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/roa/roa-resurse-umane.html b/roa/roa-resurse-umane.html
index dd77b0f..7599977 100644
--- a/roa/roa-resurse-umane.html
+++ b/roa/roa-resurse-umane.html
@@ -3,246 +3,331 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROA Resurse umane - Romfast</title>
-    <meta name="description" content="Romfast produce programe de contabilitate, gestiune, resurse umane, imobilizari, salarizare: ROA - Sistem Informatic ERP. ROA Resurse Umane - management complet al personalului si salarizare.">
-    <meta name="keywords" content="programe horeca, Program service auto, program contabilitate gestiune salarii facturare mijloace fixe productie, roa, romfast, soft contabilitate gestiune salarii, sistem informatic contabilitate, analiza indicatori economici, note contabile, management financiar-contabil, resurse umane, relatii furnizori clientii, managementul obiectelor de inventar, aprovizionare, programe devize auto, prospectare ofertare, management contracte si comenzi la furnizori sau clienti, livrari, incasari, politici de preturi si tarife, analiza activitatii, analize de trend, top-down, eficienta centrelor de cost/profit, cash-flow, bugete, program normative auto, program restaurant, program hotel, suport tehnic, servicii implementare, business inteligence,instrument de management,sistem informatic complex de tip ERP,coduri activare">
-    <meta name="author" content="S.C. Romfast S.R.L.">
-    <meta name="copyright" content="Copyright - S.C. Romfast S.R.L.">
-    <meta name="revisit-after" content="3 days">
-    <meta name="distribution" content="GLOBAL">
-    <meta name="googlebot" content="index, follow, all">
-    <meta name="robots" content="index, follow, all">
-    <meta name="rating" content="General">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <title>ROA Resurse Umane - Management Complet al Personalului | Romfast</title>
+    <meta name="description" content="ROA Resurse Umane - modul ERP pentru managementul complet al personalului, salarizare, pontaj si raportari conforme cu legislatia. Sistem integrat de HR si payroll.">
+    <meta name="keywords" content="resurse umane, salarizare, pontaj, payroll, management personal, ROA ERP, sistem HR, fise fiscale, CAS, CASS, somaj, contabilitate salarii, romfast">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="../menu/analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="../menu/implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="../menu/roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="../menu/alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
 
-    <!-- Main Content -->
-    <main class="container my-5">
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
         
         <!-- Breadcrumb -->
-        <nav aria-label="breadcrumb" class="mb-4">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii-erp.html">ROA - Romfast applications</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii.html">Aplicatii ROA</a></li>
-                <li class="breadcrumb-item active" aria-current="page">ROA Resurse umane</li>
-            </ol>
+        <nav class="mb-8" aria-label="Breadcrumb">
+            <div class="flex items-center space-x-2 text-sm">
+                <a href="../index.html" class="text-blue-600 hover:text-blue-800 transition-colors">Prima pagina</a>
+                <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+                <a href="aplicatii-erp.html" class="text-blue-600 hover:text-blue-800 transition-colors">ROA</a>
+                <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+                <span class="text-gray-600">ROA Resurse Umane</span>
+            </div>
         </nav>
 
-        <!-- Page Header -->
-        <section class="mb-5">
-            <div class="row">
-                <div class="col-12">
-                    <div class="d-flex align-items-center mb-4">
-                        <img src="images/roaresurseumane.png" width="228" height="29" alt="ROA Resurse umane" class="me-3">
+        <!-- Professional Hero Section -->
+        <section class="professional-hero text-center mb-16">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="professional-icon-wrapper">
+                    <i data-lucide="users" class="w-16 h-16 text-white"></i>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA Resurse Umane
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed max-w-3xl mx-auto">
+                    Management complet al personalului si salarizare automata. 
+                    Informatii personale, profesionale si financiare cu raportari conforme cu legislatia in vigoare.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="aplicatii-erp.html" class="professional-btn-primary px-8 py-4 text-lg">
+                        <span>Vezi toate modulele ROA</span>
+                    </a>
+                    <button class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Solicita demonstratie</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Grid Section -->
+        <section class="mb-16">
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Key Benefits Card -->
+                <div class="professional-card service-technology p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="trending-up" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Avantaje Principale</h3>
+                    <ul class="text-left professional-text-secondary space-y-3">
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                            <span>Cresterea eficientei departamentului HR</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                            <span>Diminuarea eforturilor in salarizare</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                            <span>Istoric complet al datelor de personal</span>
+                        </li>
+                        <li class="flex items-start space-x-3">
+                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                            <span>Conformitate cu legislatia in vigoare</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Legislation Updates Card -->
+                <div class="professional-card service-reliability p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="refresh-cw" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Actualizare Legislatie</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Parametrii necesari pentru calculul drepturilor salariale si taxelor se actualizeaza rapid la deschiderea fiecarei luni contabile.
+                    </p>
+                    <ul class="text-left professional-text-secondary space-y-2 text-sm">
+                        <li>• Grila de impozitare pe venit</li>
+                        <li>• Zile lucratoare si concedii</li>
+                        <li>• Contributii CAS, CASS, somaj</li>
+                        <li>• Deduceri personale</li>
+                    </ul>
+                </div>
+
+                <!-- Flexible Calculation Card -->
+                <div class="professional-card service-technology p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="calculator" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Calcul Flexibil</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">
+                        Introducerea datelor pe baza documentelor primare cu calcul automat bidirectional brut-net.
+                    </p>
+                    <div class="bg-blue-50 p-4 rounded-lg">
+                        <p class="text-sm professional-text-secondary">
+                            <strong>Automat:</strong> Scrici brutul → calculez netul<br>
+                            <strong>Invers:</strong> Scrici netul → calculez brutul
+                        </p>
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- Main Content Section -->
-        <section class="mb-5">
-            <div class="row">
-                <div class="col-lg-12">
-                    <div class="card shadow-sm">
-                        <div class="card-body">
-                            <div class="mb-4">
-                                <p class="lead">Informatiile referitoare la personal sunt de natura personala, profesionala si financiara. In baza acestor informatii se pot genera o serie de rapoarte ce pot fi vizualizate si/sau listate, se creaza state de salarii ce pot fi modificate interactiv de utilizator si se calculeaza drepturile de natura salariala cu privire la concedii, sporuri si popriri.</p>
-                            </div>
+        <!-- Main Features Section -->
+        <section class="professional-card p-12 mb-16">
+            <div class="max-w-6xl mx-auto">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold mb-6 professional-text-primary">Functionalitati Complete</h2>
+                    <p class="text-xl professional-text-secondary leading-relaxed max-w-4xl mx-auto">
+                        Informatiile referitoare la personal sunt de natura personala, profesionala si financiara. 
+                        In baza acestor informatii se pot genera o serie de rapoarte ce pot fi vizualizate si/sau listate, 
+                        se creaza state de salarii ce pot fi modificate interactiv de utilizator si se calculeaza drepturile 
+                        de natura salariala cu privire la concedii, sporuri si popriri.
+                    </p>
+                </div>
 
-                            <h3 class="mb-3">Avantaje:</h3>
-                            <div class="mb-4">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item border-0 px-0">Utilizarea aplicatiei <strong>ROA Resurse Umane</strong> conduce la:</li>
-                                    <li class="list-group-item border-0 px-0">cresterea eficientei activitatii in cadrul departamentului de resurse umane;</li>
-                                    <li class="list-group-item border-0 px-0">diminuarea eforturilor depuse in activitatile curente privind salarizarea si evidenta personalului;</li>
-                                    <li class="list-group-item border-0 px-0">crearea si pastrarea unui istoric bogat al datelor de personal si salarizare, ce poate fi consultat oricand;</li>
-                                    <li class="list-group-item border-0 px-0">Efectuarea tuturor calculelor in conformitate cu legislatia in vigoare si actualizarea permanenta a legislatiei fara a afecta lunile precedente.</li>
-                                </ul>
-                            </div>
-
-                            <h3 class="mb-3">Actualizare rapida la legislatie:</h3>
-                            <div class="mb-4">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item border-0 px-0">Programele includ posibilitati de actualizare rapida a diferitilor parametri necesari in calculul drepturilor salariale lunare si a taxelor aferente.</li>
-                                    <li class="list-group-item border-0 px-0">Astfel, la deschiderea fiecarei luni contabile, se pot actualiza numarul de zile lucratoare al lunii respective, grila de impozitare pentru calculul impozitului pe venit in functie de reglementarile legislative, grila zilelor de concediu de odihna cuvenite in functie de vechimea in munca, procentele stabilite de lege pentru calculul contributiei la asigurarile sociale, fondului de somaj, deducerilor personale, etc.</li>
-                                </ul>
-                            </div>
-
-                            <h3 class="mb-3">Calcul flexibil al statelor:</h3>
-                            <div class="mb-4">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item border-0 px-0">Introducerea datelor despre personal se realizeaza avand la baza documentele primare - fisa personala, cartea de munca, deciziile de majorare a salariului sau de schimbare a incadrarii in munca etc. Programul ofera posibilitatea realizarii operatiilor privind avansurile, concediile, avansurile pentru concedii, stabilirea premiilor sau a altor drepturi salariale, precum si a popririlor.</li>
-                                    <li class="list-group-item border-0 px-0">Dupa realizarea acestor operatii, calcul statelor se realizeaza simplu prin stabilirea sumelor reprezentand salariul brut sau salariul net.</li>
-                                    <li class="list-group-item border-0 px-0">In momentul scrierii salariului brut, netul este recalculat automat si invers, schimbarea sumei nete determina recalcularea salariului brut.</li>
-                                </ul>
-                            </div>
-
-                            <h3 class="mb-3">Facilitati:</h3>
-                            <div class="mb-4">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item border-0 px-0"><strong>ROA Resurse Umane</strong> rezolva problemele legate de:</li>
-                                    <li class="list-group-item border-0 px-0">inregistrarea datelor personalul angajat al firmei;</li>
-                                    <li class="list-group-item border-0 px-0">pontajul lunar al angajatilor;</li>
-                                    <li class="list-group-item border-0 px-0">calculul drepturilor salariale lunare si a taxelor aferente;</li>
-                                    <li class="list-group-item border-0 px-0">generarea de state de plata;</li>
-                                    <li class="list-group-item border-0 px-0">rapoarte in format electronic ale declaratiilor de CAS, CASS, somaj, in conformitate cu legislatia in vigoare;</li>
-                                    <li class="list-group-item border-0 px-0">fise fiscale;</li>
-                                    <li class="list-group-item border-0 px-0">crearea si mentinerea istoricului privind datele angajatilor si salarizarii.</li>
-                                </ul>
-                            </div>
-
-                            <h3 class="mb-3">Raportari interne si catre stat:</h3>
-                            <div class="mb-4">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item border-0 px-0">Dupa realizarea operatiei de calcul a statelor de plata, programul ofera utilizatorului raportarile necesare interne sau catre stat. Astfel se pot obtine diferite situatii:</li>
-                                    <li class="list-group-item border-0 px-0">situatia salariatilor si a persoanelor aflate in intretinerea acestora;</li>
-                                    <li class="list-group-item border-0 px-0">situatia concediilor cuvenite;</li>
-                                    <li class="list-group-item border-0 px-0">fisele anuale;</li>
-                                    <li class="list-group-item border-0 px-0">situatiile avansurilor si premiilor;</li>
-                                    <li class="list-group-item border-0 px-0">statele de plata din luna curenta pentru toate formatiile, o singura formatie, anumite persoane sau exceptand anumite persoane;</li>
-                                    <li class="list-group-item border-0 px-0">foaia de lucru, fluturasi, state concedii;</li>
-                                    <li class="list-group-item border-0 px-0">documentele speciale privind CAS-ul, CASS-ul si fondul de somaj, atat listate cat si in format electronic;</li>
-                                    <li class="list-group-item border-0 px-0">fise fiscale atat listate cat si in format electronic;</li>
-                                    <li class="list-group-item border-0 px-0">situatiile centralizatoare ale statelor si foii de lucru pe formatii, situatia concediilor si a retinerilor, calculul impozitului si componenta brutului;</li>
-                                    <li class="list-group-item border-0 px-0">borderoul general al societatii;</li>
-                                    <li class="list-group-item border-0 px-0">nota de salarii completa, eventual defalcata pe formatii/sectii.</li>
-                                </ul>
-                            </div>
-
-                            <h3 class="mb-3">Integrarea in Sistemul Informatic ROA:</h3>
-                            <div class="mb-4">
-                                <ul class="list-group list-group-flush">
-                                    <li class="list-group-item border-0 px-0"><strong>ROA Managementul Resurselor Umane si Salarizarea Personalului</strong> conlucreaza cu celelalte aplicatii ale sistemului pentru indeplinirea urmatoarelor functiuni:</li>
-                                    <li class="list-group-item border-0 px-0">Preluarea sumelor reprezentand drepturile salariale brute ale angajatilor direct productivi, sume ce se calculeaza prin intermediul programelor specifice de productie. Aceste valori sunt transmise automat din programele de productie catre <strong>ROA Salarizarea personalului</strong>, pentru a fi prelucrate din punct de vedere financiar;</li>
-                                    <li class="list-group-item border-0 px-0">Exportarea valorilor drepturilor salariale in vederea transmiterii catre banca a borderourilor de plati pe card a salariilor;</li>
-                                    <li class="list-group-item border-0 px-0">Calcularea si transmiterea catre <strong>ROA Fianciar-Contabilitate</strong> a setului de note contabile lunare aferente salarizarii.</li>
-                                </ul>
-                            </div>
-
-                            <div class="d-flex justify-content-end mt-4">
-                                <button onclick="history.back();" class="btn btn-secondary">Inapoi</button>
+                <div class="grid md:grid-cols-2 gap-12">
+                    <!-- HR Management Features -->
+                    <div>
+                        <div class="flex items-center mb-6">
+                            <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-4">
+                                <i data-lucide="user-check" class="w-6 h-6 text-white"></i>
                             </div>
+                            <h3 class="text-2xl font-semibold professional-text-primary">Management Personal</h3>
                         </div>
+                        <ul class="space-y-3 professional-text-secondary">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Inregistrarea datelor personalului angajat</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Pontajul lunar al angajatilor</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Calculul drepturilor salariale lunare si taxe</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Generarea de state de plata</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Istoric complet personal si salarizare</span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!-- Reporting Features -->
+                    <div>
+                        <div class="flex items-center mb-6">
+                            <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-4">
+                                <i data-lucide="file-text" class="w-6 h-6 text-white"></i>
+                            </div>
+                            <h3 class="text-2xl font-semibold professional-text-primary">Raportari si Declaratii</h3>
+                        </div>
+                        <ul class="space-y-3 professional-text-secondary">
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Declaratii CAS, CASS, somaj (electronic)</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Fise fiscale (listate si electronice)</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Foaia de lucru si fluturasi</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Situatii centralizatoare pe formatii</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <i data-lucide="arrow-right" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
+                                <span>Borderou general si note de salarii</span>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </section>
 
+        <!-- Integration Section -->
+        <section class="professional-card professional-card-featured p-12 mb-16">
+            <div class="max-w-4xl mx-auto text-center">
+                <div class="professional-icon-wrapper">
+                    <i data-lucide="link" class="w-12 h-12 text-white"></i>
+                </div>
+                <h2 class="text-3xl font-bold mb-6 professional-text-primary">Integrare in Sistemul ROA</h2>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    ROA Managementul Resurselor Umane si Salarizarea Personalului conlucreaza cu celelalte aplicatii ale sistemului.
+                </p>
+                
+                <div class="grid md:grid-cols-3 gap-8 mt-12">
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-lucide="download" class="w-8 h-8 text-blue-600"></i>
+                        </div>
+                        <h4 class="font-semibold professional-text-primary mb-2">Preluare Automata</h4>
+                        <p class="text-sm professional-text-secondary">
+                            Salariile din productie se transmit automat pentru procesare financiara
+                        </p>
+                    </div>
+                    
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-lucide="upload" class="w-8 h-8 text-green-600"></i>
+                        </div>
+                        <h4 class="font-semibold professional-text-primary mb-2">Export Bancar</h4>
+                        <p class="text-sm professional-text-secondary">
+                            Borderouri de plati pe card direct catre banca
+                        </p>
+                    </div>
+                    
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-lucide="share" class="w-8 h-8 text-purple-600"></i>
+                        </div>
+                        <h4 class="font-semibold professional-text-primary mb-2">Sincronizare Contabila</h4>
+                        <p class="text-sm professional-text-secondary">
+                            Note contabile lunare transmise automat la ROA Financiar-Contabilitate
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Action Buttons -->
+        <section class="text-center">
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="aplicatii-erp.html" class="professional-btn-primary px-8 py-4 text-lg">
+                    <span>Exploreaza toate modulele ROA</span>
+                </a>
+                <button onclick="history.back();" class="professional-btn-secondary px-8 py-4 text-lg">
+                    <span>Inapoi la pagina anterioara</span>
+                </button>
+            </div>
+        </section>
+
     </main>
 
-    <!-- Footer -->
-    <footer class="bg-dark text-light py-4">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-6">
-                    <p class="mb-0">Copyright 2018 &copy; <strong>Romfast SRL</strong>.</p>
-                </div>
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
             </div>
         </div>
     </footer>
 
-    </div>
-
-    <!-- Bootstrap JavaScript Bundle -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    
-    <!-- Theme Switcher Script -->
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const themeButtons = document.querySelectorAll('[data-theme]');
-            const htmlElement = document.documentElement;
-            
-            // Load saved theme or default to system
-            const savedTheme = localStorage.getItem('theme') || 'system';
-            setTheme(savedTheme);
-            
-            themeButtons.forEach(button => {
-                button.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    const theme = this.getAttribute('data-theme');
-                    setTheme(theme);
-                    localStorage.setItem('theme', theme);
-                });
-            });
-            
-            function setTheme(theme) {
-                if (theme === 'system') {
-                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                    htmlElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
-                } else {
-                    htmlElement.setAttribute('data-bs-theme', theme);
-                }
-            }
-            
-            // Listen for system theme changes
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
-                const currentTheme = localStorage.getItem('theme');
-                if (currentTheme === 'system' || !currentTheme) {
-                    setTheme('system');
-                }
-            });
-        });
-    </script>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/roa/roa-service-auto.html b/roa/roa-service-auto.html
index 62b9c6f..c3d7c39 100644
--- a/roa/roa-service-auto.html
+++ b/roa/roa-service-auto.html
@@ -3,331 +3,442 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROA - Program pentru service auto</title>
-    <meta name="description" content="ROA Service Auto - Program specializat pentru managementul activitatii de service auto, de la intrarea autovehiculului pana la facturare.">
+    <title>ROA AUTO - Program pentru Service Auto | Romfast Applications</title>
+    <meta name="description" content="ROA Service Auto - Soluție completă pentru managementul activității de service auto: comenzi, normative, devize, facturare automată și rapoarte de salarizare.">
     <meta name="keywords" content="program service auto, management contracte, comenzi furnizori clienti, livrari, incasari, politici preturi, analiza activitatii, analize de trend, eficienta centre cost profit, cash-flow, bugete, normative auto, business intelligence">
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Flowbite -->
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
-    <link href="../new-style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Professional Theme CSS -->
+    <link href="../professional-theme.css" rel="stylesheet">
 </head>
-<body>
-    <div class="page-wrapper">
-
-    <!-- Navigation & Branding Header -->
-    <header class="shadow-sm">
-        <nav class="navbar navbar-expand-lg navbar-dark py-3">
-            <div class="container">
-                <!-- Branding Section -->
-                <a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
-                    <img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
-                    <div>
-                        <div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
+<body class="min-h-screen">
+    
+    <!-- Soft Professional Blue Header -->
+    <header class="professional-navbar sticky top-0 z-50">
+        <nav class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo Section -->
+                <div class="flex items-center space-x-3">
+                    <img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
+                    <div class="hidden md:block">
+                        <p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
                     </div>
-                </a>
-
-                <!-- Toggler -->
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <!-- Links -->
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/desprenoi.html">Despre noi</a></li>
-                        <li class="nav-item"><a class="nav-link active" href="aplicatii-erp.html">ROA</a></li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Servicii
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
-                                <li><a class="dropdown-item" href="../menu/analiza.html">Analiza</a></li>
-                                <li><a class="dropdown-item" href="../menu/implementare.html">Implementare</a></li>
-                                <li><a class="dropdown-item" href="../menu/roa-suport-tehnic.html">Suport tehnic ROA</a></li>
-                                <li><a class="dropdown-item" href="../menu/alteservicii.html">Alte servicii</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/referinte.html">Referinte</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/angajari.html">Angajari</a></li>
-                        <li class="nav-item"><a class="nav-link" href="../menu/contact.html">Contact</a></li>
-                        <li class="nav-item dropdown">
-                            <button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-                                Theme
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
-                                <li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
-                                <li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
-                            </ul>
-                        </li>
-                    </ul>
+                </div>
+                
+                <!-- Centered Navigation -->
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="../index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
+                    <a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
+                    <a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
+                    <div class="relative group">
+                        <button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
+                            <span>Servicii</span>
+                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
+                            <a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
+                            <a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
+                            <a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
+                            <a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
+                        </div>
+                    </div>
+                    <a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
+                    <a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
+                    <a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
+                </div>
+                
+                <!-- Theme Toggle & Mobile Menu -->
+                <div class="flex items-center space-x-4">
+                    <button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
+                        <i data-lucide="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button class="lg:hidden text-white p-2">
+                        <i data-lucide="menu" class="w-6 h-6"></i>
+                    </button>
                 </div>
             </div>
         </nav>
     </header>
-    <!-- Main Content -->
-    <main class="container my-5">
-        <!-- Breadcrumb -->
-        <nav aria-label="breadcrumb" class="mb-4">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="../index.html">Home</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii-erp.html">ROA - Romfast applications</a></li>
-                <li class="breadcrumb-item"><a href="aplicatii.html">Aplicatii ROA</a></li>
-                <li class="breadcrumb-item active" aria-current="page">ROA Service Auto</li>
-            </ol>
-        </nav>
 
-        <!-- Page Header -->
-        <div class="row mb-5">
-            <div class="col-12">
-                <h1 class="mb-3">ROA Service Auto</h1>
-                <p class="lead">Managementul complet al activitatii de service auto</p>
-            </div>
-        </div>
-
-        <!-- Description Section -->
-        <section class="mb-5">
-            <div class="row">
-                <div class="col-lg-8">
-                    <h2>Descriere</h2>
-                    <p>Aplicatia <strong>ROA-AUTO</strong> este realizata pentru managementul activitatii de service auto si are ca scop urmarirea completa a ciclului de executie a reparatiilor auto, de la intrarea autovehiculului in service pana la emiterea facturii de reparatii.</p>
+    <!-- Main Content Container -->
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Professional Hero Section for ROA AUTO -->
+        <section class="professional-hero text-center">
+            <div class="max-w-4xl mx-auto relative z-10">
+                <div class="flex items-center justify-center mb-8">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="wrench" class="w-12 h-12 text-white"></i>
+                    </div>
                 </div>
-                <div class="col-lg-4 text-center">
-                    <div class="alert theme-alert-info">
-                        <h5 class="alert-heading">Testeaza acum!</h5>
-                        <a href="../servicii/acceseazaroaonline.html" target="_blank" class="btn btn-primary">
-                            <strong>Testeaza ROA AUTO!</strong>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
+                    ROA AUTO - Service Auto
+                </h1>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed">
+                    Soluție completă pentru managementul activității de service auto - de la intrarea autovehiculului până la facturarea automată
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../servicii/acceseazaroaonline.html" target="_blank" class="professional-btn-urgent px-8 py-4 text-lg">
+                        <span>Testează ROA AUTO acum!</span>
+                    </a>
+                    <a href="aplicatii-erp.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Vezi toate aplicațiile ROA</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Urgent Problems Section with Red Accent -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Te confrunți cu aceste probleme urgente?</h2>
+            
+            <div class="professional-card professional-card-featured p-8">
+                <h3 class="text-2xl font-semibold mb-8 professional-text-primary text-center">
+                    <i data-lucide="alert-triangle" class="w-8 h-8 inline-block mr-3" style="color: var(--accent);"></i>
+                    Probleme zilnice în service-ul tău
+                </h3>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <ul class="space-y-4 professional-text-secondary">
+                            <li class="flex items-start space-x-3">
+                                <span class="red-bullet text-lg">🔧</span>
+                                <span>Factura, bonul fiscal și înregistrarea în contabilitate durează mai mult de 1 minut?</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <span class="red-bullet text-lg">🔧</span>
+                                <span>Clienții așteaptă prea mult la recepție pentru un deviz estimativ?</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <span class="red-bullet text-lg">🔧</span>
+                                <span>Șeful de service pregătește manual rapoartele de manoperă pentru calculul salariilor?</span>
+                            </li>
+                            <li class="flex items-start space-x-3">
+                                <span class="red-bullet text-lg">🔧</span>
+                                <span>Contabilul are dureri de cap în fiecare lună din cauza producției neterminate?</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="text-center">
+                        <img src="images/roaauto3.jpg" alt="ROA Auto Interface" class="rounded-lg shadow-lg max-w-full h-auto">
+                    </div>
+                </div>
+                <div class="text-center mt-8">
+                    <a href="../servicii/acceseazaroaonline.html" target="_blank" class="professional-btn-urgent px-8 py-4 text-lg">
+                        <span>Elimină aceste probleme ACUM!</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- ROA AUTO Solution Section -->
+        <section class="mb-16">
+            <div class="professional-card p-8">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="check-circle" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <h3 class="text-2xl font-semibold mb-6 professional-text-primary text-center">ROA AUTO - Soluția Completă</h3>
+                <p class="professional-text-secondary mb-6 leading-relaxed text-center max-w-4xl mx-auto">
+                    Aplicația <strong>ROA-AUTO</strong> este realizată pentru managementul activității de service auto și are ca scop urmărirea completă a ciclului de execuție a reparațiilor auto, de la intrarea autovehiculului în service până la emiterea facturii de reparații.
+                </p>
+            </div>
+        </section>
+
+        <!-- Process Flow Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Ciclul complet de execuție</h2>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Step 1 -->
+                <div class="professional-card p-6 text-center">
+                    <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">1</div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Generarea comenzii</h3>
+                    <p class="professional-text-secondary text-sm leading-relaxed">Documentul care însoțește autovehiculul pe tot parcursul reparației</p>
+                </div>
+                
+                <!-- Step 2 -->
+                <div class="professional-card p-6 text-center">
+                    <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">2</div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Normare pe operații</h3>
+                    <p class="professional-text-secondary text-sm leading-relaxed">Reparațiile ce vor fi efectuate și repartizarea pe mecanici a manoperei aferente</p>
+                </div>
+                
+                <!-- Step 3 -->
+                <div class="professional-card p-6 text-center">
+                    <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">3</div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Consum materiale</h3>
+                    <p class="professional-text-secondary text-sm leading-relaxed">Înregistrarea consumului de materiale pentru reparație (ROA Gestiune generală)</p>
+                </div>
+                
+                <!-- Step 4 -->
+                <div class="professional-card p-6 text-center">
+                    <div class="w-12 h-12 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">4</div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Verificarea devizului</h3>
+                    <p class="professional-text-secondary text-sm leading-relaxed">Verificarea și validarea devizului de reparații</p>
+                </div>
+                
+                <!-- Step 5 -->
+                <div class="professional-card p-6 text-center md:col-span-2 lg:col-span-2">
+                    <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">5</div>
+                    <h3 class="text-lg font-semibold mb-3 professional-text-primary">Emiterea devizului și facturarea</h3>
+                    <p class="professional-text-secondary text-sm leading-relaxed">Se pot emite facturi de avans sau finale; se poate emite o singură factură pentru mai multe comenzi ale aceluiași client</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Process Steps with Images -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Interfețele procesului pas cu pas</h2>
+            
+            <div class="grid md:grid-cols-2 gap-8">
+                <!-- Step 1 - Generation -->
+                <div class="professional-card overflow-hidden hover:scale-105 transition-transform duration-300">
+                    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4">
+                        <h3 class="text-xl font-semibold text-center">1. Generarea comenzii</h3>
+                    </div>
+                    <div class="p-6 text-center">
+                        <a href="ROA-SERVICE-AUTO/roaauto_generare.html" target="_blank" class="block hover:opacity-90 transition-opacity">
+                            <img src="images/auto1p-generare.jpg" alt="ROAAUTO - Generare comanda" class="w-full rounded-lg shadow-lg">
+                        </a>
+                    </div>
+                </div>
+                
+                <!-- Step 2 - Norming -->
+                <div class="professional-card overflow-hidden hover:scale-105 transition-transform duration-300">
+                    <div class="bg-gradient-to-r from-green-600 to-green-700 text-white p-4">
+                        <h3 class="text-xl font-semibold text-center">2. Normare pe operații</h3>
+                    </div>
+                    <div class="p-6 text-center">
+                        <a href="ROA-SERVICE-AUTO/roaauto_normare.html" target="_blank" class="block hover:opacity-90 transition-opacity">
+                            <img src="images/auto2p-normare.jpg" alt="ROAAUTO - Normare comanda" class="w-full rounded-lg shadow-lg">
+                        </a>
+                    </div>
+                </div>
+                
+                <!-- Step 3 - Validation -->
+                <div class="professional-card overflow-hidden hover:scale-105 transition-transform duration-300">
+                    <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white p-4">
+                        <h3 class="text-xl font-semibold text-center">3. Verificarea și validarea devizului</h3>
+                    </div>
+                    <div class="p-6 text-center">
+                        <a href="ROA-SERVICE-AUTO/roaauto_validare.html" target="_blank" class="block hover:opacity-90 transition-opacity">
+                            <img src="images/auto3p-validare.jpg" alt="ROAAUTO - Validare comanda" class="w-full rounded-lg shadow-lg">
+                        </a>
+                    </div>
+                </div>
+                
+                <!-- Step 4 - Billing -->
+                <div class="professional-card overflow-hidden hover:scale-105 transition-transform duration-300">
+                    <div class="bg-gradient-to-r from-purple-600 to-purple-700 text-white p-4">
+                        <h3 class="text-xl font-semibold text-center">4. Emiterea devizului și facturarea</h3>
+                    </div>
+                    <div class="p-6 text-center">
+                        <a href="ROA-SERVICE-AUTO/roaauto_facturare.html" target="_blank" class="block hover:opacity-90 transition-opacity">
+                            <img src="images/auto4p-facturare.jpg" alt="ROAAUTO - Facturare comanda" class="w-full rounded-lg shadow-lg">
                         </a>
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- Ciclul de executie -->
-        <section class="mb-5">
-            <h2>Ciclul de executie</h2>
-            <div class="row">
-                <div class="col-md-6">
-                    <ul class="list-group theme-list-group list-group-flush">
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-1-circle text-primary me-2"></i>
-                            Generarea comenzii (documentul care insoteste autovehiculul pe tot parcursul reparatiei)
+        <!-- Key Features Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Avantaje cheie ROA AUTO</h2>
+            
+            <div class="grid lg:grid-cols-3 gap-8">
+                <!-- Automatizare -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="zap" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Automatizare</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed">Toate etapele se realizează integral cu ajutorul calculatorului. Documentele se emit electronic și apoi pe hârtie. O singură intrare în sistem pentru orice document.</p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="check" class="w-4 h-4 mt-1 text-green-500"></i>
+                            <span>Înregistrarea datelor urmată de emiterea documentelor</span>
                         </li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-2-circle text-primary me-2"></i>
-                            Normare pe operatii a reparatiilor ce vor fi efectuate, precum si repartizarea pe mecanici a manoperei aferente
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="check" class="w-4 h-4 mt-1 text-green-500"></i>
+                            <span>Devizele se calculează automat</span>
                         </li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-3-circle text-primary me-2"></i>
-                            Inregistrarea consumului de materiale pentru reparatie (ROA Gestiune generala)
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="check" class="w-4 h-4 mt-1 text-green-500"></i>
+                            <span>Facturile se calculează automat pe baza devizelor</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="check" class="w-4 h-4 mt-1 text-green-500"></i>
+                            <span>Înregistrarea automată în contabilitate</span>
                         </li>
                     </ul>
                 </div>
-                <div class="col-md-6">
-                    <ul class="list-group theme-list-group list-group-flush">
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-4-circle text-primary me-2"></i>
-                            Verificarea si validarea devizului de reparatii
+                
+                <!-- Lucru în timp real -->
+                <div class="professional-card p-8 text-center service-technology">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="clock" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Lucru în timp real</h3>
+                    <p class="professional-text-secondary mb-4 leading-relaxed">Programul comunică cu modulele de contabilitate și salarizare în timp real astfel încât datele sunt preluate automat realizându-se balanța contabilă cât și statele de salarii fără alte introduceri de date.</p>
+                    <p class="professional-text-secondary leading-relaxed">Vizualizarea și listarea de rapoarte, având posibilitatea de a ști în orice moment activitatea efectuată pe perioada de referință, cât și istoricul activității anterioare.</p>
+                </div>
+                
+                <!-- Eficiența maximă -->
+                <div class="professional-card p-8 text-center">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="trending-up" class="w-10 h-10 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-4 professional-text-primary">Eficiența maximă</h3>
+                    <p class="professional-text-secondary mb-6 leading-relaxed font-semibold">Cât mai puține introduceri, cât mai multe rezultate!</p>
+                    <ul class="text-left professional-text-secondary space-y-2">
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="check" class="w-4 h-4 mt-1 text-green-500"></i>
+                            <span>Documentele sunt operate o singură dată, la sursă</span>
                         </li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">
-                            <i class="bi bi-5-circle text-primary me-2"></i>
-                            Emiterea devizului si facturarea (se pot emite facturi de avans sau finale; se poate emite o singura factura pentru mai multe comenzi ale aceluiasi client)
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="check" class="w-4 h-4 mt-1 text-green-500"></i>
+                            <span>Introducerea de către gestionar a documentelor de consum materiale</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="check" class="w-4 h-4 mt-1 text-green-500"></i>
+                            <span>Operatorii pot avea sau nu cunoștințe de contabilitate</span>
                         </li>
                     </ul>
                 </div>
             </div>
         </section>
 
-        <!-- Process Steps with Images -->
-        <section class="mb-5">
-            <h2 class="text-center mb-4">Etapele procesului</h2>
-            <div class="row g-4">
-                <div class="col-lg-6">
-                    <div class="card h-100">
-                        <div class="card-header text-center bg-primary text-white">
-                            <h5 class="mb-0">Generarea comenzii</h5>
-                        </div>
-                        <div class="card-body text-center">
-                            <a href="ROA-SERVICE-AUTO/roaauto_generare.html" target="_blank">
-                                <img src="images/auto1p-generare.jpg" alt="ROAAUTO - Generare comanda" class="img-fluid rounded shadow">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="card h-100">
-                        <div class="card-header text-center bg-success text-white">
-                            <h5 class="mb-0">Normare pe operatii</h5>
-                        </div>
-                        <div class="card-body text-center">
-                            <a href="ROA-SERVICE-AUTO/roaauto_normare.html" target="_blank">
-                                <img src="images/auto2p-normare.jpg" alt="ROAAUTO - Normare comanda" class="img-fluid rounded shadow">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="card h-100">
-                        <div class="card-header text-center bg-warning text-dark">
-                            <h5 class="mb-0">Verificarea si validarea devizului</h5>
-                        </div>
-                        <div class="card-body text-center">
-                            <a href="ROA-SERVICE-AUTO/roaauto_validare.html" target="_blank">
-                                <img src="images/auto3p-validare.jpg" alt="ROAAUTO - Validare comanda" class="img-fluid rounded shadow">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="card h-100">
-                        <div class="card-header text-center bg-info text-white">
-                            <h5 class="mb-0">Emiterea devizului si facturarea</h5>
-                        </div>
-                        <div class="card-body text-center">
-                            <a href="ROA-SERVICE-AUTO/roaauto_facturare.html" target="_blank">
-                                <img src="images/auto4p-facturare.jpg" alt="ROAAUTO - Facturare comanda" class="img-fluid rounded shadow">
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Features -->
-        <div class="row g-4 mb-5">
-            <div class="col-lg-4">
-                <div class="card border-primary h-100">
-                    <div class="card-header bg-primary text-white">
-                        <h4 class="mb-0">Automatizare</h4>
-                    </div>
-                    <div class="card-body">
-                        <p>Toate etapele se realizeaza integral cu ajutorul calculatorului. Documentele se emit electronic si apoi pe hartie. O singura intrare in sistem pentru orice document.</p>
-                        <ul class="list-unstyled">
-                            <li>• Inregistrarea datelor urmata de emiterea documentelor</li>
-                            <li>• Devizele se calculeaza automat</li>
-                            <li>• Facturile se calculeaza automat pe baza devizelor</li>
-                            <li>• Inregistrarea automata in contabilitate</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4">
-                <div class="card border-success h-100">
-                    <div class="card-header bg-success text-white">
-                        <h4 class="mb-0">Lucru in timp real</h4>
-                    </div>
-                    <div class="card-body">
-                        <p>Programul comunica cu modulele de contabilitate si salarizare in timp real astfel incat datele sunt preluate automat realizandu-se balanta contabila cat si statele de salarii fara alte introduceri de date.</p>
-                        <p>Vizualizarea si listarea de rapoarte, avand posibilitatea de a sti in orice moment activitatea efectuata pe perioada de referinta, cat si istoricul activitatii anterioare.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4">
-                <div class="card border-info h-100">
-                    <div class="card-header bg-info text-white">
-                        <h4 class="mb-0">Eficienta maxima</h4>
-                    </div>
-                    <div class="card-body">
-                        <p><strong>Cat mai putine introduceri, cat mai multe rezultate!</strong></p>
-                        <ul class="list-unstyled">
-                            <li>• Documentele sunt operate o singura data, la sursa</li>
-                            <li>• Introducerea de catre gestionar a documentelor de consum materiale</li>
-                            <li>• Operatorii pot avea sau nu cunostinte de contabilitate</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Rapoarte -->
-        <section class="mb-5">
-            <h2>Rapoarte disponibile</h2>
-            <div class="row">
-                <div class="col-md-6">
-                    <ul class="list-group theme-list-group list-group-flush">
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Facturi emise in luna aleasa</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Rapoarte de verificare articole</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Rapoarte despre productia realizata si nefacturata</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Rapoarte despre manopera: totala, detaliata pe comenzi sau operatii</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Rapoarte despre orele de manopera pentru societatile de asigurare</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Rapoarte de salarizare personal direct productiv</li>
+        <!-- Reports Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Rapoarte disponibile</h2>
+            
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="professional-card p-8">
+                    <h3 class="text-xl font-semibold mb-6 professional-text-primary">
+                        <i data-lucide="file-text" class="w-6 h-6 inline-block mr-2"></i>
+                        Rapoarte de activitate
+                    </h3>
+                    <ul class="space-y-3 professional-text-secondary">
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Facturi emise în luna aleasă</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Rapoarte de verificare articole</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Rapoarte despre producția realizată și nefacturată</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Rapoarte despre manoperă: totală, detaliată pe comenzi sau operații</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Rapoarte despre orele de manoperă pentru societățile de asigurare</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Rapoarte de salarizare personal direct productiv</span>
+                        </li>
                     </ul>
                 </div>
-                <div class="col-md-6">
-                    <ul class="list-group theme-list-group list-group-flush">
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Raport de verificare venituri din manopera si materiale</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Facturile emise: pe clienti, asiguratori, facturi ITP, spalare, pe sectii</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Comenzi validate pe marci de masini</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Facturare automata a devizelor</li>
-                        <li class="list-group-item theme-list-group-item border-0 px-0">Centralizatoare de comenzi validate</li>
+                
+                <div class="professional-card p-8">
+                    <h3 class="text-xl font-semibold mb-6 professional-text-primary">
+                        <i data-lucide="bar-chart" class="w-6 h-6 inline-block mr-2"></i>
+                        Rapoarte financiare
+                    </h3>
+                    <ul class="space-y-3 professional-text-secondary">
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Raport de verificare venituri din manoperă și materiale</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Facturile emise: pe clienți, asigurători, facturi ITP, spălare, pe secții</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Comenzi validate pe mărci de mașini</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Facturare automată a devizelor</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <i data-lucide="chevron-right" class="w-4 h-4 mt-1 text-blue-500"></i>
+                            <span>Centralizatoare de comenzi validate</span>
+                        </li>
                     </ul>
                 </div>
             </div>
         </section>
 
-        <!-- Normative -->
-        <section class="mb-5">
-            <div class="alert theme-alert-secondary">
-                <h4 class="alert-heading">Normative de reparatii</h4>
-                <p class="mb-0">Programul este insotit de normative de reparatii pentru mai multe tipuri de autovehicule, existand posibilitatea ca aceasta baza de date sa fie completata si de catre utilizator.</p>
+        <!-- Normative Section -->
+        <section class="mb-16">
+            <div class="professional-card professional-card-featured p-8 text-center">
+                <div class="flex items-center justify-center mb-6">
+                    <div class="professional-icon-wrapper">
+                        <i data-lucide="book-open" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <h3 class="text-2xl font-semibold mb-4 professional-text-primary">Normative de reparații</h3>
+                <p class="professional-text-secondary mb-6 leading-relaxed max-w-3xl mx-auto">
+                    Programul este însoțit de normative de reparații pentru mai multe tipuri de autovehicule, existând posibilitatea ca această bază de date să fie completată și de către utilizator.
+                </p>
             </div>
         </section>
+
+        <!-- CTA Section -->
+        <section class="text-center mb-16">
+            <div class="professional-hero">
+                <h2 class="text-3xl font-bold mb-6 professional-text-primary">Gata să eficientizezi service-ul tău?</h2>
+                <p class="text-xl professional-text-secondary mb-8 leading-relaxed max-w-3xl mx-auto">
+                    Nu mai pierde timp cu procese manuale! ROA AUTO îți automatizează întreaga activitate de service auto.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="../servicii/acceseazaroaonline.html" target="_blank" class="professional-btn-urgent px-8 py-4 text-lg">
+                        <span>Începe testul GRATUIT</span>
+                    </a>
+                    <a href="../menu/contact.html" class="professional-btn-secondary px-8 py-4 text-lg">
+                        <span>Contactează-ne pentru detalii</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
     </main>
-    <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-4 mt-5">
-        <div class="container">
-            <p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
-            <p><a href="../menu/politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
+
+    <!-- Professional Footer -->
+    <footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
+        <div class="container mx-auto px-4 text-center">
+            <div class="mb-6">
+                <img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
+                <p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
+            </div>
+            <div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
+                <p class="text-sm text-gray-400 mb-2">
+                    Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.
+                </p>
+                <a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
+                    Politica de confidentialitate
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function applyTheme(theme) {
-            const body = document.body;
-            const themeDropdownButton = document.getElementById('themeDropdown');
-
-            body.classList.remove('dark-mode'); // Always remove first
-
-            if (theme === 'dark') {
-                body.classList.add('dark-mode');
-            } else if (theme === 'system') {
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    body.classList.add('dark-mode');
-                }
-            }
-            themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
-            localStorage.setItem('themePreference', theme);
-        }
-
-        document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
-            item.addEventListener('click', function(event) {
-                event.preventDefault();
-                const theme = this.getAttribute('data-theme');
-                applyTheme(theme);
-            });
-        });
-
-        // Initial theme application based on saved preference or system preference
-        const savedTheme = localStorage.getItem('themePreference');
-        if (savedTheme) {
-            applyTheme(savedTheme);
-        } else {
-            // Default to system mode if no preference is saved
-            applyTheme('system');
-        }
-
-        // Listen for system theme changes if currently in system mode
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (localStorage.getItem('themePreference') === 'system') {
-                applyTheme('system');
-            }
-        });
-    </script>
-    </div>
+    <!-- Professional Theme JavaScript -->
+    <script src="../professional-theme.js"></script>
 </body>
 </html>
\ No newline at end of file
