diff --git a/chatbot.js b/chatbot.js
index ee34f3f..db4bba7 100644
--- a/chatbot.js
+++ b/chatbot.js
@@ -1,134 +1,193 @@
 /*
     DEDICATED JAVASCRIPT FOR AIMOJSTER.SI CHATBOT WIDGET
-    Last Updated: 16. September 2025 (v8.0 - Final Production Version)
+    Last Updated: 16. September 2025 (v15.0 - Relaunch with Demo Center)
     Author: Gemini AI for AIMojster.si
 
-    This is the final, clean production version of the chatbot script.
-    It reliably creates, stores (per session), and sends a unique session ID with every user message,
-    ensuring that the n8n workflow functions correctly.
+    This script powers the interactive demo center on the redesigned website.
+    It includes logic to launch specific demo bots directly from the main page content,
+    ensuring a seamless and engaging user experience.
 */
 
 document.addEventListener('DOMContentLoaded', function() {
 
-    // --- DOM ELEMENTI ---
+    //======================================================================
+    // 1. KONFIGURACIJA IN IZBIRA DOM ELEMENTOV
+    //======================================================================
+
     const chatWidgetButton = document.getElementById('chat-widget-button');
     const chatContainer = document.getElementById('chat-widget-container');
     const closeChatBtn = document.getElementById('close-chat-btn');
+    const chatHeaderTitle = document.getElementById('chat-header-title');
     const chatMessagesContainer = document.getElementById('chat-messages');
     const chatInputForm = document.getElementById('chat-input-form');
     const chatInputField = document.getElementById('chat-input');
-    
-    // --- KONFIGURACIJA ---
-    const N8N_WEBHOOK_URL = 'https://n8n.spletnimojster.si/webhook/joze/chat';
+    const chatResetBtn = document.getElementById('chat-reset-btn');
+    const demoLaunchButtons = document.querySelectorAll('.launch-demo-btn'); // NOVO: Gumbi v demo centru
 
-    // Preverimo, ali obstajajo vsi potrebni HTML elementi za delovanje.
-    if (!chatWidgetButton || !chatContainer || !chatInputForm) {
-        console.error("Chatbot HTML elements could not be found. The script will not initialize.");
+    if (!chatWidgetButton || !chatContainer || !chatInputForm || !chatHeaderTitle || !chatResetBtn) {
+        console.error("Critical chatbot HTML elements are missing. The script will not initialize.");
         return;
     }
 
-    // ====================================================================== //
-    // === UPRAVLJANJE S SEJO (SESSION ID MANAGEMENT) ===                     //
-    // ====================================================================== //
+    const bots = {
+        main: {
+            name: "AI Mojster Asistent",
+            url: 'https://n8n.spletnimojster.si/webhook/013f5fb3-52bd-44bb-bc0a-41027d9916af/chat',
+            greeting: "Pozdravljeni! Sem AI asistent podjetja AIMojster. 🤖 Tukaj sem, da vam v živo pokažem, kaj zmorejo naši pametni boti. Izberite enega od spodnjih primerov in ga preizkusite!"
+        },
+        rag: {
+            name: "Demo: Pekarna Novak",
+            url: 'https://n8n.spletnimojster.si/webhook/joze/chat',
+            greeting: "Dober dan in dobrodošli v Pekarni Novak! 🥐 Diši po sveže pečenem, kajne? Sem vaš virtualni pomočnik in poznam celotno našo ponudbo. Vprašajte me, kaj imamo danes dobrega, ali preverite alergene za kateri koli izdelek."
+        },
+        calendar: {
+            name: "Demo: Potovalni Svetovalec",
+            url: 'https://n8n.spletnimojster.si/webhook/d0b3a15a-8d1c-437c-8523-00e108af14a4/chat',
+            greeting: "Pozdravljeni v agenciji Sončni Pobegi! ☀️ Pripravljeni na sanjsko potovanje? Povejte mi svoje želje – iščete sprostitev na plaži, aktivne počitnice v gorah ali raziskovanje mest? Skupaj bova našla popolno destinacijo za vas!"
+        },
+        sales: {
+            name: "Demo: Fitnes Svetovalec",
+            url: 'https://n8n.spletnimojster.si/webhook/63f6f29f-54a2-4a6c-bf5e-0767a590a2a8/chat',
+            greeting: "Živjo, bodoči član! 💪 Sem vaš osebni AI svetovalec v fitnes centru FitLife. Tukaj sem, da vam pomagam najti popoln paket članstva. Pripravljeni, da začneva vašo fitnes pot?"
+        }
+    };
+    
+    let activeBotKey = 'main';
+
+    // ======================================================================
+    // 2. UPRAVLJANJE STANJA IN Vmesnika (UI)
+    // ======================================================================
+
+    function startConversation() {
+        chatContainer.classList.remove('hidden');
+        activeBotKey = 'main';
+        updateChatHeader();
+        chatMessagesContainer.innerHTML = '';
+        
+        showTypingIndicator();
+        setTimeout(() => {
+            hideTypingIndicator();
+            addMessageToUI(bots.main.greeting, 'bot');
+            showBotSelectionButtons();
+        }, 1200);
+
+        chatResetBtn.classList.remove('visible');
+        chatInputForm.classList.remove('hidden');
+        chatInputField.focus();
+    }
+    
+    function switchBot(botKey) {
+        if (!bots[botKey]) {
+            console.error(`Bot with key "${botKey}" does not exist.`);
+            return;
+        }
+        activeBotKey = botKey;
+        updateChatHeader();
+        chatMessagesContainer.innerHTML = '';
+        
+        showTypingIndicator();
+        setTimeout(() => {
+            hideTypingIndicator();
+            addMessageToUI(bots[activeBotKey].greeting, 'bot');
+        }, 1200);
+        
+        chatResetBtn.classList.add('visible');
+        chatInputForm.classList.remove('hidden');
+        chatInputField.focus();
+    }
+
+    function updateChatHeader() {
+        chatHeaderTitle.textContent = bots[activeBotKey].name;
+    }
+
+    function showBotSelectionButtons() {
+        const container = document.createElement('div');
+        container.className = 'bot-selection-container';
+        const buttonsToShow = [
+            { key: 'rag', text: 'Preizkusi Bota za Pekarno' },
+            { key: 'calendar', text: 'Preizkusi Potovalnega Agenta' },
+            { key: 'sales', text: 'Preizkusi Fitnes Svetovalca' }
+        ];
+        buttonsToShow.forEach(btnInfo => {
+            const button = document.createElement('button');
+            button.className = 'bot-selection-btn';
+            button.textContent = btnInfo.text;
+            button.addEventListener('click', () => switchBot(btnInfo.key));
+            container.appendChild(button);
+        });
+        chatMessagesContainer.appendChild(container);
+    }
+
+    // ======================================================================
+    // 3. UPRAVLJANJE S SEJO IN KOMUNIKACIJA Z N8N
+    // ======================================================================
 
-    /**
-     * Zanesljivo pridobi ali ustvari unikaten Session ID za trenutni pogovor.
-     * Uporablja `sessionStorage`, kar pomeni, da ID obstane med osveževanjem strani,
-     * a se ponastavi, ko uporabnik zapre zavihek brskalnika.
-     * @returns {string} The unique session ID for the current chat session.
-     */
     function getSessionId() {
-        const SESSION_KEY = 'aimojster_chatbot_session_id'; // Uporabimo unikatno ime ključa
-        let sessionId = sessionStorage.getItem(SESSION_KEY);
-
+        let sessionId = sessionStorage.getItem('aimojster_multibot_session_id');
         if (!sessionId) {
-            // crypto.randomUUID() je moderen, varen in standarden način za generiranje UUID-jev.
             sessionId = crypto.randomUUID();
-            sessionStorage.setItem(SESSION_KEY, sessionId);
+            sessionStorage.setItem('aimojster_multibot_session_id', sessionId);
         }
         return sessionId;
     }
 
-    // ====================================================================== //
-    // === KOMUNIKACIJA Z N8N ===                                             //
-    // ====================================================================== //
-
-    /**
-     * Sestavi in pošlje uporabnikovo sporočilo skupaj s session ID-jem na n8n webhook.
-     * @param {string} userMessage - Sporočilo, ki ga je vnesel uporabnik.
-     */
     async function sendMessageToBot(userMessage) {
         showTypingIndicator();
-
-        // Pridobimo ali ustvarimo session ID za to sejo.
-        const currentSessionId = getSessionId();
-
-        // Sestavimo pravilen objekt (payload), ki ga n8n pričakuje.
-        const payload = {
-            sessionId: currentSessionId,
-            chatInput: userMessage,
-            action: "sendMessage"
-        };
+        const currentBot = bots[activeBotKey];
+        const webhookUrl = currentBot.url;
+        const sessionId = getSessionId();
+        const payload = { sessionId, chatInput: userMessage, action: "sendMessage" };
         
         try {
-            const response = await fetch(N8N_WEBHOOK_URL, {
+            const response = await fetch(webhookUrl, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
             });
-
-            if (!response.ok) {
-                throw new Error(`Server returned status: ${response.status}`);
-            }
-
+            if (!response.ok) throw new Error(`Server returned status: ${response.status}`);
             const data = await response.json();
             const botReply = data.output;
-
+            
+            hideTypingIndicator();
             if (botReply) {
-                addBotMessageToUI(botReply);
+                addMessageToUI(botReply, 'bot');
             } else {
-                // To se zgodi, če n8n vrne prazen odgovor ali napačno strukturo.
-                console.error("Response from bot was empty or in a malformed structure.", data);
                 throw new Error("Malformed response from server.");
             }
-
         } catch (error) {
-            console.error('Error communicating with the chatbot API:', error);
-            addBotMessageToUI("Oprostite, prišlo je do tehnične napake. Poskusite znova kasneje.");
+            console.error(`Error communicating with bot "${activeBotKey}":`, error);
+            hideTypingIndicator();
+            addMessageToUI("Oprostite, prišlo je do tehnične napake. Poskusite znova kasneje.", 'bot');
         }
     }
 
-    // ====================================================================== //
-    // === UPRAVLJANJE Z UI IN DOGODKI ===                                    //
-    // ====================================================================== //
+    // ======================================================================
+    // 4. UI POMOČNIKI IN EVENT LISTENERS
+    // ======================================================================
     
-    // --- Pomožne UI funkcije ---
-    function openChatWidget() {
-        chatContainer.classList.remove('hidden');
-        chatInputField.focus();
-    }
-    
-    function closeChatWidget() {
-        chatContainer.classList.add('hidden');
-    }
-
     function addMessageToUI(text, sender) {
         const messageElement = document.createElement('div');
         messageElement.classList.add('chat-message', `${sender}-message`);
-        messageElement.textContent = text;
+        if (sender === 'bot') {
+            if (typeof marked !== 'undefined') {
+                messageElement.innerHTML = marked.parse(text);
+            } else {
+                messageElement.textContent = text;
+            }
+        } else {
+            messageElement.textContent = text;
+        }
         chatMessagesContainer.appendChild(messageElement);
-        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
+        scrollToBottom();
     }
 
     function showTypingIndicator() {
         if (chatMessagesContainer.querySelector('.typing-indicator')) return;
         const indicator = document.createElement('div');
         indicator.classList.add('chat-message', 'bot-message', 'typing-indicator');
-        indicator.innerHTML = '<span>.</span><span>.</span><span>.</span>';
+        indicator.innerHTML = '<span></span><span></span><span></span>';
         chatMessagesContainer.appendChild(indicator);
-        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
+        scrollToBottom();
     }
 
     function hideTypingIndicator() {
@@ -136,27 +195,45 @@ document.addEventListener('DOMContentLoaded', function() {
         if (indicator) indicator.remove();
     }
     
-    const addUserMessageToUI = (message) => addMessageToUI(message, 'user');
-    const addBotMessageToUI = (message) => {
-        hideTypingIndicator();
-        addMessageToUI(message, 'bot');
-    };
+    function scrollToBottom() {
+        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
+    }
 
-    // --- Glavni Event Listener za oddajo sporočila ---
     chatInputForm.addEventListener('submit', function(event) {
         event.preventDefault();
         const userMessage = chatInputField.value.trim();
-
         if (userMessage) {
-            addUserMessageToUI(userMessage);
+            const selectionContainer = chatMessagesContainer.querySelector('.bot-selection-container');
+            if (selectionContainer) {
+                selectionContainer.remove();
+            }
+            addMessageToUI(userMessage, 'user');
             sendMessageToBot(userMessage);
             chatInputField.value = '';
         }
     });
 
-    // --- Event Listenerji za odpiranje in zapiranje okna ---
-    chatWidgetButton.addEventListener('click', openChatWidget);
-    closeChatBtn.addEventListener('click', closeChatWidget);
+    // --- Glavni Event Listenerji ---
 
-    console.log("Chatbot v8.0 (Final Production) initialized successfully.");
+    // 1. Klik na plavajoči gumb (odpre glavnega bota)
+    chatWidgetButton.addEventListener('click', startConversation);
+
+    // 2. Klik na gumb za zapiranje
+    closeChatBtn.addEventListener('click', () => chatContainer.classList.add('hidden'));
+    
+    // 3. Klik na gumb za vrnitev v glavni meni
+    chatResetBtn.addEventListener('click', startConversation);
+
+    // 4. NOVO: Klik na gumbe v "Demo Centru" na strani
+    demoLaunchButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const botKey = this.dataset.botKey; // Preberemo ključ bota (npr. 'rag')
+            if (botKey) {
+                chatContainer.classList.remove('hidden'); // Najprej odpremo okno
+                switchBot(botKey); // Nato zaženemo izbranega bota
+            }
+        });
+    });
+
+    console.log("Multi-Bot Demo Center (v15.0 - Relaunch) initialized successfully.");
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index f3bc894..fff55ab 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <!-- Primary Meta Tags -->
     <title>AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje</title>
     <meta name="title" content="AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje">
-    <meta name="description" content="Povečajte prodajo, znižajte stroške in zagotovite podporo 24/7 z naprednimi AI chatboti in avtomatizacijo poslovnih procesov po meri.">
+    <meta name="description" content="Povečajte prodajo, znižajte stroške in zagotovite podporo 24/7 z naprednimi AI chatboti in avtomatizacijo poslovnih procesov po meri. Preizkusite naše demo bote v živo!">
     <meta name="keywords" content="ai chatbot, umetna inteligenca, avtomatizacija, izdelava chatbota, poslovna avtomatizacija, ai mojster, n8n, chatbot slovenija">
     <meta name="author" content="AI Mojster">
     <meta name="robots" content="index, follow">
@@ -45,7 +45,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
 </head>
 <body>
     <header class="header">
@@ -59,11 +59,10 @@
                 <i class="fas fa-bars"></i>
             </div>
             <div class="nav-links">
-                <a href="#solutions">Rešitve</a>
-                <a href="#packages">Paketi</a>
+                <a href="#demos">Demo Boti</a>
                 <a href="#benefits">Prednosti</a>
+                <a href="#packages">Paketi</a>
                 <a href="#process">Postopek</a>
-                <a href="#about">O nas</a>
                 <a href="#contact" class="cta-button">Kontakt</a>
                 <a href="tel:040654730" class="phone-number"><i class="fas fa-phone"></i> 040 654 730</a>
                 <a href="/en/" class="language-switch"><i class="fas fa-globe"></i> EN</a>
@@ -75,146 +74,91 @@
         <section class="hero">
             <h1>Preobrazite Svoje Poslovanje z Močjo Umetne Inteligence</h1>
             <p class="hero-text">Nudimo napredne AI chatbote in avtomatizacijo po meri, ki znižujejo stroške, povečujejo prodajo in zagotavljajo podporo 24/7.</p>
-            <div class="hero-features">
-                <div class="hero-feature">
-                    <i class="fas fa-headset"></i>
-                    <span>Podpora 24/7</span>
-                </div>
-                <div class="hero-feature">
-                    <i class="fas fa-chart-line"></i>
-                    <span>Povečana Prodaja</span>
-                </div>
-                <div class="hero-feature">
-                    <i class="fas fa-cogs"></i>
-                    <span>Avtomatizacija Procesov</span>
-                </div>
-                <div class="hero-feature">
-                    <i class="fas fa-euro-sign"></i>
-                    <span>Znižanje Stroškov</span>
-                </div>
-            </div>
-            <a href="#packages" class="cta-button">Odkrijte Svojo AI Rešitev</a>
+            <a href="#demos" class="cta-button">Preizkusite Demo Bote v Živo</a>
         </section>
 
-        <section id="solutions" class="about">
+        <!-- NOVO: Interaktivni Demo Center -->
+        <section id="demos" class="demos">
             <div class="container">
-                <h2>Naše Rešitve za Vaš Uspeh</h2>
-                <p class="section-subtitle">Specializirani smo za dve ključni področji, ki prinašata takojšnje in merljive rezultate za vaše podjetje.</p>
-                <div class="about-content">
-                    <div class="about-text">
-                        <h3><i class="fas fa-comments"></i> AI Chatboti po Meri</h3>
-                        <p>Pozabite na generične odgovore. Razvijemo inteligentne chatbote, ki razumejo vaše stranke, odgovarjajo na njihova vprašanja v realnem času, zbirajo povpraševanja in jih vodijo skozi nakupni proces. Izboljšajte uporabniško izkušnjo in pretvorite obiskovalce v zveste stranke.</p>
+                <h2>Doživite Moč AI v Akciji</h2>
+                <p class="section-subtitle">Ne verjemite nam na besedo. Preizkusite naše demo bote in se sami prepričajte, kako lahko AI pomaga vašemu poslu.</p>
+                <div class="demo-grid">
+                    <!-- Demo Kartica 1: Pekarna -->
+                    <div class="demo-card">
+                        <div class="demo-card-icon"><i class="fas fa-cookie-bite"></i></div>
+                        <h3>Bot za Pekarno (RAG)</h3>
+                        <div class="demo-description">
+                            <span class="description-title">Za kaj gre?</span>
+                            <p>Avtomatsko odgovarja na vprašanja strank o ponudbi, cenah in alergenih, 24/7, na podlagi vaše baze znanja.</p>
+                            <span class="description-title">Kako deluje?</span>
+                            <p>Bot se nauči vse informacije iz dokumenta, ki nam ga posredujete. Ko stranka postavi vprašanje, bot v trenutku poišče in postreže z najbolj relevantnim odgovorom.</p>
+                        </div>
+                        <button class="launch-demo-btn" data-bot-key="rag">Preizkusi Bota za Pekarno</button>
                     </div>
-                    <div class="about-text">
-                        <h3><i class="fas fa-robot"></i> AI Avtomatizacija Procesov</h3>
-                        <p>Osvobodite svojo ekipo ponavljajočih se nalog. Povežemo vaše aplikacije (CRM, e-pošta, socialna omrežja) v pametne delovne tokove, ki delujejo samodejno. Od avtomatiziranega pošiljanja ponudb do sinhronizacije podatkov – prihranite čas, zmanjšajte napake in se osredotočite na rast.</p>
-                    </div>
-                </div>
-            </div>
-        </section>
 
-        <section id="packages" class="packages">
-            <h2>Izberite Paket, ki Poganja Vašo Rast</h2>
-            <p class="section-subtitle">Pregledne cene, brez skritih stroškov. Naložba v AI se vam bo večkratno povrnila.</p>
-            <div class="billing-toggle">
-                <span>Mesečni najem</span>
-                <label class="toggle-switch">
-                    <input type="checkbox" id="billing-toggle">
-                    <span class="toggle-slider"></span>
-                </label>
-                <span>Letni najem <span class="yearly-discount">Prihranite do 20%</span></span>
-            </div>
-            <div class="package-grid">
-                <div class="package-card" data-package="asistent">
-                    <h3>AI Asistent</h3>
-                    <p class="subtitle">Za podjetja, ki želijo avtomatizirati podporo in zbirati kontakte.</p>
-                    <div class="price-period">
-                        <div class="price">39 €<span>/mesec</span></div>
-                        <small class="vat-price">47,58 € z DDV</small>
+                    <!-- Demo Kartica 2: Potovanja -->
+                    <div class="demo-card">
+                        <div class="demo-card-icon"><i class="fas fa-plane-departure"></i></div>
+                        <h3>Potovalni Svetovalec</h3>
+                        <div class="demo-description">
+                            <span class="description-title">Za kaj gre?</span>
+                            <p>Interaktivno svetuje uporabnikom in jim pomaga najti popolno potovalno destinacijo glede na njihove želje, proračun in interese.</p>
+                            <span class="description-title">Kako deluje?</span>
+                            <p>Bot skozi pogovor zbira ključne informacije (tip oddiha, cena, trajanje) in na podlagi tega iz baze znanja priporoči najboljše možnosti, kot bi to storil pravi agent.</p>
+                        </div>
+                        <button class="launch-demo-btn" data-bot-key="calendar">Preizkusi Potovalnega Agenta</button>
                     </div>
-                    <ul>
-                        <li>Chatbot z odgovori na pogosta vprašanja</li>
-                        <li>Zbiranje kontaktnih podatkov (leadov)</li>
-                        <li>Namestitev na vašo spletno stran</li>
-                        <li>Osnovno poročanje o pogovorih</li>
-                        <li>E-mail podpora</li>
-                    </ul>
-                    <a href="#contact" class="package-button">Izberi Asistenta</a>
-                </div>
 
-                <div class="package-card featured" data-package="partner">
-                    <div class="popular-badge">Najbolj priljubljen</div>
-                    <h3>AI Strateški Partner</h3>
-                    <p class="subtitle">Za podjetja, ki želijo integracijo, personalizacijo in večjo prodajo.</p>
-                    <div class="price-period">
-                        <div class="price">89 €<span>/mesec</span></div>
-                        <small class="vat-price">108,58 € z DDV</small>
+                    <!-- Demo Kartica 3: Fitnes -->
+                    <div class="demo-card">
+                        <div class="demo-card-icon"><i class="fas fa-dumbbell"></i></div>
+                        <h3>Fitnes Svetovalec</h3>
+                        <div class="demo-description">
+                            <span class="description-title">Za kaj gre?</span>
+                            <p>Pomaga potencialnim članom izbrati pravi fitnes paket in na koncu zbere njihov kontakt za pošiljanje personalizirane ponudbe.</p>
+                            <span class="description-title">Kako deluje?</span>
+                            <p>Bot skozi nekaj ciljanih vprašanj o urniku in interesih uporabnika kvalificira in mu priporoči enega od treh paketov. Na koncu uporabi orodje za pošiljanje e-maila.</p>
+                        </div>
+                        <button class="launch-demo-btn" data-bot-key="sales">Preizkusi Fitnes Svetovalca</button>
                     </div>
-                    <ul>
-                        <li>Vse iz paketa AI Asistent</li>
-                        <li>Integracija s CRM sistemom</li>
-                        <li>Napredni pogovorni scenariji</li>
-                        <li>Kvalifikacija potencialnih strank</li>
-                        <li>Možnost večjezične podpore</li>
-                        <li>Telefonska podpora</li>
-                    </ul>
-                    <a href="#contact" class="package-button">Izberi Partnerja</a>
-                </div>
-
-                <div class="package-card" data-package="avtomatizacija">
-                    <h3>AI Avtomatizacija</h3>
-                    <p class="subtitle">Za podjetja, ki želijo celovito avtomatizacijo internih in zunanjih procesov.</p>
-                    <div class="price-period">
-                        <div class="price">149 €<span>/mesec</span></div>
-                        <small class="vat-price">181,78 € z DDV</small>
-                    </div>
-                    <ul>
-                        <li>Vse iz paketa AI Partner</li>
-                        <li>Kompleksni avtomatizacijski tokovi (n8n)</li>
-                        <li>API integracije po meri</li>
-                        <li>Povezava z e-poštnimi orodji</li>
-                        <li>Avtomatizirano upravljanje s podatki</li>
-                        <li>Prioritetna tehnična podpora</li>
-                    </ul>
-                    <a href="#contact" class="package-button">Izberi Avtomatizacijo</a>
                 </div>
             </div>
         </section>
 
         <section id="benefits" class="why-us">
             <div class="container">
-                <h2>Prednosti Umetne Inteligence za Vas</h2>
-                <p class="section-subtitle">To niso le tehnične rešitve. To so konkretne koristi, ki jih bo vaše podjetje občutilo takoj.</p>
+                <h2>Kaj To Pomeni za Vas?</h2>
+                <p class="section-subtitle">To niso le tehnične rešitve. To so konkretne poslovne koristi, ki jih boste občutili takoj.</p>
                 <div class="benefits-grid">
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-clock"></i></div>
                         <h3>Neprekinjena Dosegljivost 24/7</h3>
-                        <p>Vaš AI asistent nikoli ne spi. Strankam je na voljo podnevi in ponoči, med vikendi in prazniki, kar zagotavlja takojšnjo podporo in večje zadovoljstvo.</p>
+                        <p>Kot ste videli pri Botu za Pekarno, vaš AI asistent nikoli ne spi. Strankam je na voljo podnevi in ponoči, kar zagotavlja takojšnjo podporo in večje zadovoljstvo.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-piggy-bank"></i></div>
                         <h3>Takojšnji Prihranki</h3>
-                        <p>Zmanjšajte stroške za podporo strankam za do 30%. Avtomatizirajte odgovore na ponavljajoča se vprašanja in sprostite svojo ekipo za naloge, ki prinašajo večjo vrednost.</p>
+                        <p>Avtomatizirajte odgovore na ponavljajoča se vprašanja in sprostite svojo ekipo za naloge, ki prinašajo večjo vrednost – zmanjšajte stroške za podporo strankam za do 30%.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-rocket"></i></div>
                         <h3>Povečana Prodaja in Leadi</h3>
-                        <p>AI chatbot aktivno nagovarja obiskovalce, jih kvalificira in zbira njihove podatke. Nikoli več ne zamudite priložnosti za posel, tudi ko niste na voljo.</p>
+                        <p>Fitnes Svetovalec je odličen primer, kako AI aktivno nagovarja obiskovalce, jih kvalificira in zbira njihove podatke. Nikoli več ne zamudite priložnosti za posel.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-brain"></i></div>
-                        <h3>Inteligentno Zbiranje Podatkov</h3>
-                        <p>Spoznajte svoje stranke bolje kot kdajkoli prej. Chatbot zbira ključne informacije o njihovih željah in težavah, kar vam omogoča sprejemanje pametnejših poslovnih odločitev.</p>
+                        <h3>Inteligentno Svetovanje</h3>
+                        <p>Potovalni Agent dokazuje, da bot ni le za odgovore, ampak lahko uporabnike vodi skozi kompleksne odločitve in jim ponudi personalizirane rešitve, ki povečajo konverzije.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-tasks"></i></div>
                         <h3>Nič Več Ponavljajočega Dela</h3>
-                        <p>Ročno prepisovanje podatkov, pošiljanje istih e-mailov in ostala dolgočasna opravila postanejo preteklost. Osredotočite se na tisto, kar je resnično pomembno – rast vašega posla.</p>
+                        <p>Ročno prepisovanje podatkov in pošiljanje istih e-mailov postaneta preteklost. Osredotočite se na tisto, kar je resnično pomembno – rast vašega posla.</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon"><i class="fas fa-user-friends"></i></div>
                         <h3>Izjemna Uporabniška Izkušnja</h3>
-                        <p>Stranke cenijo hitre in natančne odgovore. Z AI zagotovite dosledno in profesionalno komunikacijo, ki gradi zaupanje in lojalnost vaši blagovni znamki.</p>
+                        <p>Stranke cenijo hitre, natančne in personalizirane odgovore. Z AI zagotovite dosledno in profesionalno komunikacijo, ki gradi zaupanje in lojalnost.</p>
                     </div>
                 </div>
             </div>
@@ -222,7 +166,7 @@
 
         <section id="process" class="process">
             <div class="container">
-                <h2>Od Ideje do Rezultatov v 4 Korakih</h2>
+                <h2>Kako Deluje? Naš Proces v 4 Korakih</h2>
                 <p class="section-subtitle">Naš proces je preprost, pregleden in osredotočen na doseganje vaših ciljev.</p>
                 <div class="process-steps">
                     <div class="step">
@@ -249,23 +193,54 @@
             </div>
         </section>
         
-        <section id="about" class="about">
+        <section id="packages" class="packages">
             <div class="container">
+                <h2>Izberite Paket, ki Poganja Vašo Rast</h2>
+                <p class="section-subtitle">Pregledne cene, brez skritih stroškov. Naložba v AI se vam bo večkratno povrnila.</p>
+                <div class="package-grid">
+                    <div class="package-card" data-package="asistent">
+                        <h3>AI Asistent</h3>
+                        <p class="subtitle">Za podjetja, ki želijo avtomatizirati podporo in zbirati kontakte.</p>
+                        <ul class="package-features">
+                            <li>Chatbot z odgovori na pogosta vprašanja (RAG)</li>
+                            <li>Zbiranje kontaktnih podatkov (leadov)</li>
+                            <li>Namestitev na vašo spletno stran</li>
+                        </ul>
+                    </div>
+                    <div class="package-card featured" data-package="partner">
+                        <div class="popular-badge">Najbolj priljubljen</div>
+                        <h3>AI Strateški Partner</h3>
+                        <p class="subtitle">Za podjetja, ki želijo integracijo, personalizacijo in večjo prodajo.</p>
+                        <ul class="package-features">
+                            <li>Vse iz paketa AI Asistent</li>
+                            <li>Integracija s CRM sistemom ali koledarjem</li>
+                            <li>Napredni pogovorni scenariji in prodajni lijaki</li>
+                        </ul>
+                    </div>
+                    <div class="package-card" data-package="avtomatizacija">
+                        <h3>AI Avtomatizacija</h3>
+                        <p class="subtitle">Za podjetja, ki želijo celovito avtomatizacijo procesov.</p>
+                        <ul class="package-features">
+                            <li>Vse iz paketa AI Partner</li>
+                            <li>Kompleksni avtomatizacijski tokovi (n8n)</li>
+                            <li>API integracije po meri in povezava z več sistemi</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="contact-for-price">
+                    <p>Cene so odvisne od kompleksnosti. Za personalizirano ponudbo nas kontaktirajte.</p>
+                    <a href="#contact" class="cta-button">Pridobi Ponudbo</a>
+                </div>
+            </div>
+        </section>
+
+        <section id="about" class="about">
+             <div class="container">
                 <h2>Kdo Smo?</h2>
                 <div class="about-content">
                     <div class="about-text">
                         <h3>Vaši Strokovnjaki za Umetno Inteligenco</h3>
                         <p>Smo ekipa navdušencev nad tehnologijo, ki verjame, da umetna inteligenca ni več prihodnost, ampak sedanjost. Naše poslanstvo je, da napredne AI rešitve približamo podjetjem vseh velikosti in jim pomagamo postati učinkovitejši, bolj konkurenčni in uspešnejši.</p>
-                        
-                        <h3>Zaupajo nam uspešni:</h3>
-                        <ul class="client-list">
-                            <li><strong><a href="https://4spaces.io" target="_blank">4spaces</a></strong> - Podjetje za pametne rešitve</li>
-                            <li><strong><a href="https://oblikovalnica.eu" target="_blank">Oblikovalnica</a></strong> - Kopirnica</li>
-                            <li><strong><a href="https://pc-pomlad.si" target="_blank">PC Pomlad</a></strong> - Psihoterapevtski center</li>
-                            <li><strong><a href="https://pekarnakovac.si" target="_blank">Pekarna Kovač</a></strong> - Pekarna in slaščičarna</li>
-                        </ul>
-                        
-                        <a href="#contact" class="about-cta">Naredimo korak naprej skupaj!</a>
                     </div>
                     <div class="about-features">
                         <div class="about-feature">
@@ -278,11 +253,6 @@
                             <h4>Razvoj po Meri</h4>
                             <p>Vsak chatbot in avtomatizacija sta 100% prilagojena vašemu poslu in ciljem.</p>
                         </div>
-                        <div class="about-feature">
-                            <i class="fas fa-wrench"></i>
-                            <h4>Zanesljiva Podpora</h4>
-                            <p>Smo vaš dolgoročni partner. Nudimo redno vzdrževanje, optimizacijo in tehnično podporo.</p>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -305,15 +275,6 @@
                     <label for="phone">Telefonska številka (neobvezno)</label>
                     <input type="tel" id="phone" name="phone" placeholder="Vnesite vašo telefonsko številko">
                 </div>
-                <div class="form-group">
-                    <label for="package">Zanima me paket</label>
-                    <select id="package" name="package" required>
-                        <option value="">Izberite paket...</option>
-                        <option value="asistent">AI Asistent - 39€/mesec</option>
-                        <option value="partner">AI Strateški Partner - 89€/mesec</option>
-                        <option value="avtomatizacija">AI Avtomatizacija - 149€/mesec</option>
-                    </select>
-                </div>
                 <div class="form-group">
                     <label for="message">Vaše sporočilo</label>
                     <textarea id="message" name="message" required placeholder="Na kratko opišite vaše potrebe in cilje..."></textarea>
@@ -335,9 +296,10 @@
             </div>
             <div class="footer-links">
                 <h4>Navigacija</h4>
-                <a href="#solutions">Rešitve</a>
-                <a href="#packages">Paketi</a>
+                <a href="#demos">Demo Boti</a>
                 <a href="#benefits">Prednosti</a>
+                <a href="#packages">Paketi</a>
+                <a href="#process">Postopek</a>
                 <a href="#about">O nas</a>
                 <a href="#contact">Kontakt</a>
             </div>
@@ -363,35 +325,28 @@
     <!-- Chatbot Widget HTML -->
     <div id="chat-widget-container" class="hidden">
         <div class="chat-header">
-            <h3>AI Asistent</h3>
+            <h3 id="chat-header-title">AI Asistent</h3>
             <button id="close-chat-btn">&times;</button>
         </div>
         <div id="chat-messages"></div>
-        <form id="chat-input-form">
-            <input type="text" id="chat-input" placeholder="Vpišite sporočilo..." autocomplete="off">
-            <button type="submit" aria-label="Pošlji sporočilo"><i class="fas fa-paper-plane"></i></button>
-        </form>
+        <div class="chat-footer">
+            <button id="chat-reset-btn" class="hidden">Nazaj na glavni meni</button>
+            <form id="chat-input-form">
+                <input type="text" id="chat-input" placeholder="Vpišite sporočilo..." autocomplete="off">
+                <button type="submit" aria-label="Pošlji sporočilo"><i class="fas fa-paper-plane"></i></button>
+            </form>
+        </div>
     </div>
     <button id="chat-widget-button" aria-label="Odpri klepet">
         <i class="fas fa-robot"></i>
     </button>
     
     <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="script.js"></script>
-    <script src="chatbot.js?version=20250916"></script> 
+    <script src="chatbot.js?version=20250916-redesign"></script> 
     <script>
-        // Register Service Worker
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', () => {
-                navigator.serviceWorker.register('/sw.js')
-                    .then(registration => {
-                        console.log('ServiceWorker registration successful');
-                    })
-                    .catch(err => {
-                        console.log('ServiceWorker registration failed: ', err);
-                    });
-            });
-        }
+        // Service Worker registration remains the same
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index 12c7a04..df27ca2 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
 /*
     STYLESHEET FOR AIMOJSTER.SI
-    Last Updated: 16. September 2025
+    Last Updated: 16. September 2025 (v2.1 - Full Styles & Fixes)
     Author: Gemini AI for AIMojster.si
 */
 
@@ -30,6 +30,11 @@
     box-sizing: border-box;
 }
 
+html,
+body {
+    overflow-x: hidden;
+}
+
 html {
     scroll-behavior: smooth;
 }
@@ -60,27 +65,27 @@ body {
     align-items: center;
 }
 
-.logo {
-    height: 20px;
+.logo-header {
+    height: 20px; /* POPRAVEK: Velikost logotipa v glavi */
     display: flex;
     align-items: center;
 }
 
-.logo a {
+.logo-header a {
     height: 100%;
     display: flex;
     align-items: center;
     text-decoration: none;
 }
 
-.logo img {
+.logo-header img {
     height: 100%;
     width: auto;
 }
 
 .nav-links {
     display: flex;
-    gap: 2rem;
+    gap: clamp(1.25rem, 2.5vw, 2rem);
     align-items: center;
 }
 
@@ -144,91 +149,64 @@ body {
     box-shadow: var(--shadow);
 }
 
+/* --- Mobile Menu & Responsive --- */
+.menu-toggle {
+    display: none;
+    font-size: 1.5rem;
+    color: var(--text-color);
+    cursor: pointer;
+    z-index: 1001;
+}
+
 /* --- Hero Section --- */
 .hero {
-    padding: 8rem 1rem 4rem;
+    padding: clamp(6rem, 12vw, 8rem) 1.5rem clamp(3rem, 6vw, 4rem);
     text-align: center;
     background: linear-gradient(rgba(29, 43, 72, 0.7), rgba(29, 43, 72, 0.6)), url('images/hero-bg-ai.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    min-height: 90vh;
+    min-height: 85vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 2.5rem;
+    gap: clamp(1.5rem, 4vw, 2.5rem);
     position: relative;
     overflow: hidden;
 }
 
 .hero h1 {
-    font-size: 4.5rem;
+    font-size: clamp(2.6rem, 5.5vw, 4.5rem);
     max-width: 900px;
     margin: 0 auto;
-    line-height: 1.2;
+    line-height: 1.15;
     color: white;
     font-weight: 800;
-    letter-spacing: -1px;
-    animation: fadeInUp 1s ease-out;
+    letter-spacing: -0.5px;
 }
 
 .hero-text {
     max-width: 800px;
     margin: 0 auto;
-    font-size: 1.5rem;
+    font-size: clamp(1.05rem, 2.25vw, 1.5rem);
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.8;
     font-weight: 400;
-    animation: fadeInUp 1s ease-out 0.2s backwards;
-}
-
-.hero-features {
-    display: flex;
-    gap: 2rem;
-    margin-top: 2rem;
-    flex-wrap: wrap;
-    justify-content: center;
-    animation: fadeInUp 1s ease-out 0.6s backwards;
-}
-
-.hero-feature {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    color: var(--text-color);
-    font-weight: 500;
-    padding: 0.75rem 1.5rem;
-    background: rgba(255, 255, 255, 0.95);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 1rem;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    transition: all 0.3s ease;
-}
-
-.hero-feature:hover {
-    transform: translateY(-5px) scale(1.05);
-    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
-}
-
-.hero-feature i {
-    color: var(--primary-color);
-    font-size: 1.5rem;
 }
 
 .hero .cta-button {
-    font-size: 1.2rem;
-    padding: 1.2rem 3.5rem;
+    font-size: clamp(1rem, 2.2vw, 1.2rem);
+    padding: clamp(1rem, 2.5vw, 1.2rem) clamp(2.5rem, 6vw, 3.5rem);
     border-radius: 50px;
     background: var(--gradient-primary);
     color: white;
     text-decoration: none;
     box-shadow: var(--shadow);
-    animation: fadeInUp 1s ease-out 0.4s backwards;
     transition: all 0.3s ease;
     border: none;
     font-weight: 600;
+    margin-top: 1rem;
 }
 
 .hero .cta-button:hover {
@@ -240,7 +218,7 @@ body {
 
 /* --- General Section Styling --- */
 section {
-    padding: 6rem 1.5rem;
+    padding: clamp(4rem, 7vw, 6rem) 1.5rem;
 }
 
 .container {
@@ -250,8 +228,8 @@ section {
 
 h2 {
     text-align: center;
-    margin-bottom: 1.5rem;
-    font-size: 2.8rem;
+    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
+    font-size: clamp(2rem, 4vw, 2.8rem);
     color: var(--text-color);
     font-weight: 700;
 }
@@ -259,87 +237,18 @@ h2 {
 .section-subtitle {
     text-align: center;
     color: var(--light-text);
-    font-size: 1.2rem;
+    font-size: clamp(1rem, 2vw, 1.2rem);
     max-width: 700px;
-    margin: 0 auto 4rem;
+    margin: 0 auto clamp(2rem, 5vw, 4rem);
     line-height: 1.6;
 }
 
-
-/* --- Packages Section --- */
-.packages {
-    background: var(--light-background);
+/* --- NOVO: Demo Center Section --- */
+.demos {
+    background-color: var(--background);
 }
 
-.billing-toggle {
-    text-align: center;
-    margin-bottom: 3rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-}
-
-.billing-toggle span {
-    font-weight: 500;
-}
-
-.toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 30px;
-}
-
-.toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.toggle-slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--secondary-color);
-    transition: .4s;
-    border-radius: 34px;
-}
-
-.toggle-slider:before {
-    position: absolute;
-    content: "";
-    height: 22px;
-    width: 22px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    transition: .4s;
-    border-radius: 50%;
-}
-
-input:checked + .toggle-slider {
-    background: var(--gradient-accent);
-}
-
-input:checked + .toggle-slider:before {
-    transform: translateX(30px);
-}
-
-.yearly-discount {
-    background: var(--gradient-accent);
-    color: var(--text-color);
-    padding: 0.4rem 1rem;
-    border-radius: 1rem;
-    font-size: 0.8rem;
-    margin-left: 0.5rem;
-    font-weight: 600;
-}
-
-.package-grid {
+.demo-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
@@ -347,91 +256,56 @@ input:checked + .toggle-slider:before {
     margin: 0 auto;
 }
 
-.package-card {
-    background: white;
+.demo-card {
+    background: var(--light-background);
     border: 1px solid var(--border-color);
     border-radius: 1.5rem;
     padding: 2.5rem 2rem;
     text-align: center;
-    position: relative;
-    transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
+    transition: all 0.3s ease-in-out;
     box-shadow: var(--shadow);
 }
 
-.package-card:hover {
+.demo-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary-color);
 }
 
-.package-card h3 {
-    font-size: 1.8rem;
+.demo-card-icon {
+    font-size: 3rem;
+    color: var(--primary-color);
+    margin-bottom: 1.5rem;
+    height: 48px;
+}
+
+.demo-card h3 {
+    font-size: 1.6rem;
+    margin-bottom: 1rem;
     color: var(--text-color);
 }
 
-.package-card .subtitle {
-    font-size: 1.1rem;
-    color: var(--light-text);
-    margin: 0.5rem 0 1rem;
-    min-height: 44px; /* Align heights */
-}
-
-.price-period {
-    margin: 1rem 0;
-}
-
-.price {
-    font-size: 3.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    line-height: 1;
-}
-
-.price span {
-    font-size: 1.2rem;
-    color: var(--light-text);
-    margin-left: 0.3rem;
-    font-weight: 400;
-}
-
-.vat-price {
-    font-size: 0.9rem;
-    color: var(--light-text);
-    display: block;
-    margin-top: 0.5rem;
-}
-
-.package-card ul {
-    list-style: none;
-    margin: 1.5rem 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    text-align: left;
+.demo-description {
     flex-grow: 1;
 }
 
-.package-card li {
-    font-size: 1rem;
+.demo-description .description-title {
+    font-weight: 600;
     color: var(--text-color);
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-    line-height: 1.4;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    display: block;
 }
 
-.package-card li::before {
-    content: "✓";
-    color: var(--success-color);
-    font-weight: bold;
-    font-size: 1.2rem;
-    min-width: 20px;
+.demo-description p {
+    color: var(--light-text);
+    font-size: 1rem;
+    line-height: 1.6;
 }
 
-.package-button {
+.launch-demo-btn {
     display: inline-block;
     padding: 1rem 2.5rem;
     background: var(--gradient-primary);
@@ -441,71 +315,46 @@ input:checked + .toggle-slider:before {
     font-weight: 600;
     font-size: 1.1rem;
     transition: all 0.3s ease;
-    margin-top: auto;
+    margin-top: 2rem;
     border: none;
+    cursor: pointer;
 }
 
-.package-button:hover {
+.launch-demo-btn:hover {
     background: var(--gradient-accent);
     color: var(--text-color);
     transform: translateY(-2px);
     box-shadow: var(--shadow);
 }
 
-.package-card.featured {
-    border: 2px solid var(--primary-color);
-    transform: scale(1.05);
-    z-index: 2;
-}
-
-.package-card.featured .package-button {
-    background: var(--gradient-primary);
-}
-
-.popular-badge {
-    position: absolute;
-    top: -15px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--gradient-primary);
-    color: white;
-    padding: 0.7rem 2rem;
-    border-radius: 50px;
-    font-size: 1rem;
-    font-weight: 600;
-    white-space: nowrap;
-    box-shadow: var(--shadow);
-}
-
-/* --- Why Us / Benefits Section --- */
+/* --- Benefits Section ("Why Us") --- */
 .why-us {
-    background: var(--background);
+    background: var(--light-background);
 }
 
 .benefits-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: clamp(1.5rem, 3vw, 2rem);
 }
 
 .benefit-card {
-    background: var(--light-background);
+    background: white;
     border: 1px solid var(--border-color);
     border-radius: 1.5rem;
-    padding: 2rem;
+    padding: clamp(1.75rem, 3vw, 2rem);
     transition: all 0.3s ease;
 }
 
 .benefit-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow);
-    background: white;
 }
 
 .benefit-icon {
     width: 70px;
     height: 70px;
-    background: white;
+    background: var(--light-background);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -533,7 +382,7 @@ input:checked + .toggle-slider:before {
 
 /* --- Process Section --- */
 .process {
-    background: var(--light-background);
+    background: var(--background);
 }
 
 .process-steps {
@@ -579,6 +428,82 @@ input:checked + .toggle-slider:before {
     color: var(--light-text);
 }
 
+/* --- Packages Section --- */
+.packages {
+    background: var(--light-background);
+}
+
+.package-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.package-card {
+    background: white;
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    padding: 2.5rem 2rem;
+    text-align: center;
+    position: relative;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow);
+}
+
+.package-card:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+.package-card h3 {
+    font-size: 1.8rem;
+    color: var(--text-color);
+}
+
+.package-card .subtitle {
+    font-size: 1.1rem;
+    color: var(--light-text);
+    margin: 0.5rem 0 1rem;
+    min-height: 44px; /* Align heights */
+}
+
+.package-features {
+    list-style: none;
+    padding: 0;
+    margin: 1.5rem 0;
+    text-align: left;
+    flex-grow: 1;
+}
+
+.package-features li {
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+}
+
+.package-features li::before {
+    content: "✓";
+    color: var(--success-color);
+    font-weight: bold;
+    margin-top: 2px;
+}
+
+.contact-for-price {
+    text-align: center;
+    margin-top: 3rem;
+}
+
+.contact-for-price p {
+    color: var(--light-text);
+    margin-bottom: 1.5rem;
+}
+
 /* --- About Section --- */
 .about {
     background: white;
@@ -604,38 +529,26 @@ input:checked + .toggle-slider:before {
     margin-bottom: 1.5rem;
 }
 
-.client-list {
-    list-style: none;
-    padding: 0;
-    margin-top: 2rem;
+.about-features {
+    display: grid;
+    gap: 1.5rem;
 }
 
-.client-list li {
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
+.about-feature {
+    background-color: var(--light-background);
+    padding: 1.5rem;
+    border-radius: 1rem;
 }
 
-.client-list a {
+.about-feature i {
+    font-size: 2rem;
     color: var(--primary-color);
-    text-decoration: none;
-    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
-.about-cta {
-    display: inline-block;
-    margin-top: 1.5rem;
-    padding: 1rem 2rem;
-    background: var(--gradient-primary);
-    color: white;
-    text-decoration: none;
-    border-radius: 50px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-}
-
-.about-cta:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
+.about-feature h4 {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
 }
 
 /* --- Contact Section --- */
@@ -643,31 +556,6 @@ input:checked + .toggle-slider:before {
     background: var(--light-background);
 }
 
-.contact-text {
-    max-width: 600px;
-    margin: 0 auto 2rem;
-    font-size: 1.2rem;
-    line-height: 1.8;
-    color: var(--light-text);
-}
-
-.contact-options {
-    text-align: center;
-    margin-bottom: 2rem;
-    color: var(--light-text);
-}
-
-.contact-options a {
-    color: var(--primary-color);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-}
-
-.contact-options a:hover {
-    color: var(--accent-color);
-}
-
 .contact-form {
     max-width: 600px;
     margin: 0 auto;
@@ -687,7 +575,6 @@ input:checked + .toggle-slider:before {
 .form-group label {
     display: block;
     margin-bottom: 0.5rem;
-    color: var(--text-color);
     font-weight: 500;
 }
 
@@ -699,18 +586,6 @@ input:checked + .toggle-slider:before {
     border: 1px solid var(--border-color);
     border-radius: 12px;
     font-size: 1rem;
-    color: var(--text-color);
-    background: var(--light-background);
-    transition: all 0.3s ease;
-}
-
-.form-group input:focus,
-.form-group select:focus,
-.form-group textarea:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(123, 45, 255, 0.1);
-    background: white;
 }
 
 .form-group textarea {
@@ -725,20 +600,9 @@ input:checked + .toggle-slider:before {
     border: none;
     border-radius: 12px;
     font-weight: 600;
-    font-size: 1.1rem;
     cursor: pointer;
-    transition: all 0.3s ease;
-    margin-top: 1rem;
 }
 
-.submit-button:hover {
-    background: var(--gradient-accent);
-    color: var(--text-color);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow);
-}
-
-
 /* --- Footer --- */
 .footer {
     background: var(--text-color);
@@ -756,51 +620,23 @@ input:checked + .toggle-slider:before {
 }
 
 .footer-logo img {
-    height: 20px;
+    height: 16px; /* POPRAVEK: Velikost logotipa v nogi */
     margin-bottom: 1rem;
 }
 
-.footer-logo p {
-    color: rgba(255, 255, 255, 0.8);
-}
-
 .footer h4 {
     color: white;
     font-size: 1.1rem;
     margin-bottom: 1.5rem;
-    font-weight: 600;
-}
-
-.footer-links {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
 }
 
 .footer-links a {
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.footer-links a:hover {
-    color: var(--accent-color);
-}
-
-.contact-methods a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
+    display: block;
     margin-bottom: 0.75rem;
 }
 
-.contact-methods a:hover {
-    color: var(--accent-color);
-}
-
 .footer-bottom {
     max-width: 1200px;
     margin: 0 auto;
@@ -808,24 +644,6 @@ input:checked + .toggle-slider:before {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 0.9rem;
-}
-
-.legal-links {
-    display: flex;
-    gap: 2rem;
-}
-
-.legal-links a {
-    color: rgba(255, 255, 255, 0.6);
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.legal-links a:hover {
-    color: white;
 }
 
 /* --- Chatbot Widget --- */
@@ -844,17 +662,16 @@ input:checked + .toggle-slider:before {
     align-items: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     z-index: 998;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    transition: transform 0.3s ease;
 }
 
 #chat-widget-button:hover {
     transform: scale(1.1);
-    box-shadow: var(--shadow-lg);
 }
 
-#chat-widget-button img {
-    width: 32px;
-    height: 32px;
+#chat-widget-button i {
+    font-size: 28px;
+    color: white;
 }
 
 #chat-widget-container {
@@ -872,14 +689,10 @@ input:checked + .toggle-slider:before {
     flex-direction: column;
     overflow: hidden;
     z-index: 999;
-    transform-origin: bottom right;
-    transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
 #chat-widget-container.hidden {
-    transform: scale(0);
-    opacity: 0;
-    pointer-events: none;
+    display: none;
 }
 
 .chat-header {
@@ -888,13 +701,6 @@ input:checked + .toggle-slider:before {
     padding: 1rem;
     display: flex;
     justify-content: space-between;
-    align-items: center;
-}
-
-.chat-header h3 {
-    font-size: 1.1rem;
-    font-weight: 600;
-    margin: 0;
 }
 
 #close-chat-btn {
@@ -903,56 +709,53 @@ input:checked + .toggle-slider:before {
     color: white;
     font-size: 1.8rem;
     cursor: pointer;
-    line-height: 1;
-    opacity: 0.8;
-    transition: opacity 0.2s ease;
-}
-
-#close-chat-btn:hover {
-    opacity: 1;
 }
 
 #chat-messages {
     flex-grow: 1;
     padding: 1rem;
     overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
 }
 
 .chat-message {
     padding: 0.75rem 1rem;
     border-radius: 18px;
-    max-width: 80%;
-    line-height: 1.5;
+    max-width: 85%;
+    margin-bottom: 0.75rem;
 }
 
 .bot-message {
     background-color: var(--light-background);
-    color: var(--text-color);
-    border-bottom-left-radius: 4px;
     align-self: flex-start;
 }
 
 .user-message {
     background-color: var(--primary-color);
     color: white;
-    border-bottom-right-radius: 4px;
     align-self: flex-end;
 }
 
-.typing-indicator {
-    align-self: flex-start;
+.chat-footer {
+    padding: 0.5rem 1rem 1rem 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+#chat-reset-btn {
+    background: none;
+    border: none;
     color: var(--light-text);
-    font-style: italic;
-    font-size: 0.9rem;
+    cursor: pointer;
+    font-size: 0.8rem;
+    margin: 0 auto 8px;
+    display: none;
+}
+
+#chat-reset-btn.visible {
+    display: block;
 }
 
 #chat-input-form {
     display: flex;
-    padding: 1rem;
-    border-top: 1px solid var(--border-color);
 }
 
 #chat-input {
@@ -960,13 +763,6 @@ input:checked + .toggle-slider:before {
     border: 1px solid var(--border-color);
     border-radius: 50px;
     padding: 0.75rem 1rem;
-    font-size: 1rem;
-    transition: border-color 0.2s;
-}
-
-#chat-input:focus {
-    outline: none;
-    border-color: var(--primary-color);
 }
 
 #chat-input-form button {
@@ -977,60 +773,115 @@ input:checked + .toggle-slider:before {
     width: 45px;
     height: 45px;
     margin-left: 0.5rem;
-    cursor: pointer;
-    font-size: 1.2rem;
-    transition: background-color 0.2s;
 }
 
-#chat-input-form button:hover {
-    background-color: var(--secondary-color);
+.bot-selection-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 15px 0;
 }
 
-
-/* --- Mobile Menu & Responsive --- */
-.menu-toggle {
-    display: none;
-    font-size: 1.5rem;
-    color: var(--text-color);
+.bot-selection-btn {
+    background-color: white;
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
+    padding: 12px 20px;
+    border-radius: 25px;
     cursor: pointer;
 }
 
+.bot-selection-btn:hover {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+/* --- Responsive Design --- */
+@media (max-width: 1200px) {
+    .navbar {
+        padding: 1rem 1.25rem;
+    }
+
+    .demo-grid,
+    .package-grid {
+        grid-template-columns: repeat(2, minmax(260px, 1fr));
+        gap: 1.75rem;
+    }
+
+    .footer-content {
+        grid-template-columns: repeat(2, minmax(220px, 1fr));
+        gap: 3rem;
+    }
+}
+
+@media (max-width: 1024px) {
+    section {
+        padding: clamp(3.5rem, 6vw, 5rem) 1.25rem;
+    }
+
+    .hero {
+        min-height: 70vh;
+        padding-top: clamp(5rem, 10vw, 6.5rem);
+    }
+
+    .hero h1 {
+        max-width: 760px;
+    }
+
+    .demo-grid,
+    .package-grid {
+        gap: 1.5rem;
+    }
+
+    .benefits-grid {
+        gap: 1.5rem;
+    }
+
+    .about-content {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+        text-align: center;
+    }
+
+    .about-feature {
+        text-align: left;
+    }
+
+    .process-steps {
+        gap: 1.5rem;
+    }
+}
+
 @media (max-width: 992px) {
+    .demo-grid,
     .package-grid {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(2, minmax(240px, 1fr));
     }
-    .package-card.featured {
-        grid-column: 1 / -1;
-        max-width: 500px;
-        margin: 0 auto;
-        transform: scale(1);
+
+    .package-card {
+        padding: 2.25rem 1.75rem;
+    }
+
+    .footer-content {
+        gap: 2.75rem;
     }
 }
 
 @media (max-width: 768px) {
-    body {
-        font-size: 16px;
-    }
-
-    h2 {
-        font-size: 2.2rem;
-    }
-    
-    .section-subtitle {
-        font-size: 1.1rem;
+    section {
+        padding: clamp(2.5rem, 9vw, 3.5rem) 1.25rem;
     }
 
     .navbar {
-        padding: 1rem;
+        padding: 0.75rem 1.25rem;
     }
 
     .menu-toggle {
         display: block;
-        z-index: 1001;
     }
 
     .nav-links {
-        display: flex;
+        display: none;
         position: fixed;
         top: 0;
         left: 0;
@@ -1047,81 +898,169 @@ input:checked + .toggle-slider:before {
     }
 
     .nav-links.active {
+        display: flex;
         transform: translateX(0);
     }
 
     .hero {
-        padding: 6rem 1rem 4rem;
-        min-height: 80vh;
+        min-height: auto;
+        padding-top: clamp(5rem, 12vw, 6rem);
+        padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
     }
-    
+
     .hero h1 {
-        font-size: 2.5rem;
+        font-size: clamp(2.2rem, 7vw, 2.5rem);
     }
 
     .hero-text {
-        font-size: 1.2rem;
-    }
-
-    .hero-features {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    
-    .package-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .package-card.featured {
-        max-width: 100%;
-        transform: scale(1);
-    }
-
-    .benefits-grid {
-        grid-template-columns: 1fr;
+        font-size: 1.1rem;
     }
 
+    .demo-grid,
+    .package-grid,
+    .benefits-grid,
     .process-steps {
         grid-template-columns: 1fr;
     }
 
-    .about-content {
-        grid-template-columns: 1fr;
+    .process-steps {
+        gap: 1.25rem;
+    }
+
+    .step {
+        padding: 1.75rem 1.5rem;
+    }
+
+    .contact-form {
+        padding: 2.25rem 1.75rem;
     }
 
     .footer-content {
         grid-template-columns: 1fr;
         text-align: center;
+        gap: 2.5rem;
     }
 
     .footer-bottom {
         flex-direction: column;
-        gap: 1rem;
-    }
-
-    #chat-widget-container {
-        width: 100%;
-        height: 100%;
-        bottom: 0;
-        right: 0;
-        border-radius: 0;
-        max-height: 100%;
+        gap: 1.25rem;
+        align-items: center;
+        text-align: center;
     }
 
     #chat-widget-button {
         bottom: 20px;
         right: 20px;
+        width: 56px;
+        height: 56px;
+    }
+
+    #chat-widget-container {
+        bottom: 85px;
+        right: 16px;
+        width: calc(100vw - 32px);
+        max-width: 420px;
+        height: 65vh;
+        max-height: 520px;
+    }
+}
+
+@media (max-width: 600px) {
+    .hero {
+        padding-top: clamp(4.5rem, 14vw, 5.5rem);
+    }
+
+    .hero-text {
+        font-size: 1.05rem;
+    }
+
+    section {
+        padding: clamp(2rem, 8vw, 3rem) 1.25rem;
+    }
+
+    .benefits-grid {
+        gap: 1.5rem;
+    }
+
+    .benefit-card {
+        padding: 1.75rem 1.5rem;
+    }
+
+    .contact-form {
+        padding: 2rem 1.5rem;
+        gap: 1.25rem;
+    }
+
+    .submit-button {
+        width: 100%;
+    }
+
+    .footer-bottom {
+        gap: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero {
+        gap: 1.5rem;
+        background-position: center;
+    }
+
+    .hero h1 {
+        font-size: clamp(2rem, 8vw, 2.3rem);
+        letter-spacing: -0.25px;
+    }
+
+    .hero .cta-button {
+        width: 100%;
+        padding: 1rem 1.5rem;
+    }
+
+    .language-switch {
+        padding: 0.4rem 0.75rem;
+    }
+
+    .benefit-card,
+    .package-card,
+    .about-feature,
+    .step {
+        padding: 1.5rem;
+    }
+
+    .benefit-icon {
+        width: 56px;
+        height: 56px;
+        margin-bottom: 1rem;
+    }
+
+    #chat-widget-container {
+        bottom: 75px;
+        right: 12px;
+        width: calc(100vw - 24px);
+        height: 60vh;
+        max-height: none;
+    }
+
+    #chat-widget-button {
+        bottom: 16px;
+        right: 16px;
     }
 }
 
 /* --- Animations --- */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
\ No newline at end of file
+.typing-indicator span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--light-text);
+    margin: 0 2px;
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); } 
+    40% { transform: scale(1.0); }
+}