diff --git a/Resume.html b/Resume.html
new file mode 100644
index 0000000..87d78cb
--- /dev/null
+++ b/Resume.html
@@ -0,0 +1,466 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Haitham's Resume Manager</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+        
+        :root {
+            --sidebar-gray: #f3f3f3;
+            --accent-dark: #1a1a1a;
+            --accent-blue: #2563eb;
+        }
+
+        body { 
+            font-family: 'Roboto', sans-serif;
+            background-color: #e5e7eb;
+            -webkit-print-color-adjust: exact;
+        }
+
+        /* Resume Styling */
+        .resume-page {
+            width: 850px;
+            min-height: 1100px;
+            background: white;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            margin: 2rem auto;
+            display: flex;
+        }
+
+        .sidebar {
+            width: 280px;
+            background-color: var(--sidebar-gray);
+            padding: 2.5rem 1.5rem;
+        }
+
+        .main-content {
+            flex: 1;
+            padding: 3.5rem 3rem;
+            background: white;
+        }
+
+        .circle-frame {
+            width: 176px;
+            height: 176px;
+            border-radius: 9999px;
+            border: 10px solid #e2e2e2;
+            overflow: hidden;
+            margin: 0 auto 2rem;
+            background: #d1d1d1;
+            position: relative;
+            group: hover;
+        }
+
+        .circle-frame img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .photo-edit-overlay {
+            position: absolute;
+            inset: 0;
+            background: rgba(0,0,0,0.4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.2s;
+            cursor: pointer;
+            color: white;
+            font-size: 0.8rem;
+            font-weight: bold;
+        }
+
+        .circle-frame:hover .photo-edit-overlay {
+            opacity: 1;
+        }
+
+        .section-header {
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: var(--accent-dark);
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 4px;
+            margin-bottom: 12px;
+            text-transform: capitalize;
+        }
+
+        .main-header {
+            font-size: 1.6rem;
+            font-weight: 800;
+            letter-spacing: 0.15em;
+            color: var(--accent-dark);
+            border-bottom: 2px solid var(--accent-dark);
+            padding-bottom: 8px;
+            margin-bottom: 24px;
+            text-transform: uppercase;
+        }
+
+        [contenteditable="true"] {
+            outline: none;
+            border: 1px dashed transparent;
+            transition: border 0.2s;
+        }
+
+        [contenteditable="true"]:hover {
+            border: 1px dashed #3b82f6;
+            background-color: rgba(59, 130, 246, 0.05);
+        }
+
+        [contenteditable="true"]:focus {
+            background-color: white;
+            border: 1px solid #3b82f6;
+        }
+
+        .experience-dot {
+            position: absolute;
+            left: -9px;
+            top: 6px;
+            width: 16px;
+            height: 16px;
+            background-color: #333;
+            border: 3px solid white;
+            border-radius: 9999px;
+            z-index: 10;
+        }
+
+        .experience-dot-sub {
+            background-color: #999;
+        }
+
+        /* Toolbar Styling */
+        .toolbar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 60px;
+            background: #1f2937;
+            color: white;
+            display: flex;
+            align-items: center;
+            padding: 0 2rem;
+            z-index: 1000;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        }
+
+        @media print {
+            .no-print, .toolbar, .photo-edit-overlay { display: none !important; }
+            body { background: white; padding: 0; margin: 0; }
+            .resume-page { margin: 0; box-shadow: none; width: 100%; }
+            [contenteditable="true"]:hover { border-color: transparent; background: transparent; }
+        }
+    </style>
+</head>
+<body class="pt-20 pb-10">
+
+    <!-- Toolbar -->
+    <div class="toolbar flex justify-between no-print">
+        <div class="flex items-center gap-4">
+            <h1 class="font-bold text-lg text-blue-400">Haitham's Resume Manager</h1>
+            <select id="resumeSelect" class="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 outline-none">
+                <!-- Profiles will load here -->
+            </select>
+        </div>
+        <div class="flex gap-2">
+            <button onclick="createNewProfile()" class="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded text-sm font-medium transition">New Version</button>
+            <button onclick="saveCurrentProfile()" class="bg-green-600 hover:bg-green-700 px-4 py-1 rounded text-sm font-medium transition">Save Changes</button>
+            <button onclick="window.print()" class="bg-gray-600 hover:bg-gray-700 px-4 py-1 rounded text-sm font-medium transition">Print to PDF</button>
+            <button onclick="deleteProfile()" class="bg-red-600 hover:bg-red-700 px-4 py-1 rounded text-sm font-medium transition">Delete</button>
+        </div>
+    </div>
+
+    <!-- Resume Container -->
+    <div id="resumeRoot" class="resume-page">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <div class="circle-frame" onclick="document.getElementById('photoInput').click()">
+                <img id="userPhoto" src="Resume.jpg" alt="Haitham Khalifa" onerror="this.src='https://via.placeholder.com/180?text=Photo'">
+                <div class="photo-edit-overlay no-print">EDIT PHOTO</div>
+                <input type="file" id="photoInput" class="hidden" accept="image/*" onchange="handlePhotoUpload(this)">
+            </div>
+
+            <h1 id="userName" contenteditable="true" class="text-2xl font-black text-center text-gray-900 mb-8 tracking-tighter uppercase leading-none">HAITHAM KHALIFA</h1>
+
+            <!-- Contact -->
+            <div class="space-y-3 text-[11px] text-gray-700 mb-10">
+                <div class="flex items-center gap-3">
+                    <span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">📞</span>
+                    <span contenteditable="true" id="userPhone" class="font-medium">+34 614 821 331</span>
+                </div>
+                <div class="flex items-center gap-3">
+                    <span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">✉️</span>
+                    <span contenteditable="true" id="userEmail" class="font-medium">Haitham@Khalifa.se</span>
+                </div>
+                <div class="flex items-center gap-3">
+                    <span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px] font-bold">in</span>
+                    <span contenteditable="true" id="userLinkedin" class="font-medium">linkedin.com/in/haithamekhalifa/</span>
+                </div>
+                <div class="flex items-center gap-3">
+                    <span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">📍</span>
+                    <span contenteditable="true" id="userLocation" class="font-medium">Málaga, Spain</span>
+                </div>
+            </div>
+
+            <div class="mb-10">
+                <h2 class="section-header">About Me</h2>
+                <div id="aboutMe" contenteditable="true" class="text-[10px] leading-relaxed text-gray-600 font-medium text-justify">
+                    A results-oriented leader with 15+ years of experience in driving e-commerce growth, optimizing online platforms, and implementing successful digital marketing strategies. Proven ability to increase online sales, improve customer engagement, and manage cross-functional teams to achieve business objectives.
+                </div>
+            </div>
+
+            <div class="mb-10">
+                <h2 class="section-header">Education</h2>
+                <div id="educationList" contenteditable="true" class="space-y-4">
+                    <div>
+                        <p class="text-[11px] font-bold text-gray-800 leading-tight">Intensive Software Development Academy</p>
+                        <p class="text-[10px] text-gray-600">Lund University</p>
+                        <p class="text-[9px] text-gray-400 font-bold">Sweden, Lund - 2019</p>
+                    </div>
+                    <div>
+                        <p class="text-[11px] font-bold text-gray-800 leading-tight">Bachelor of Computer Science</p>
+                        <p class="text-[10px] text-gray-600">Modern Academy Maadi</p>
+                        <p class="text-[9px] text-gray-400 font-bold">Egypt, Cairo 2001 - 2006</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mb-10">
+                <h2 class="section-header">Skills</h2>
+                <div id="skillsList" contenteditable="true" class="text-[11px] text-gray-700 space-y-2 font-medium">
+                    • E-commerce Strategy<br>
+                    • Digital Marketing<br>
+                    • SEO/SEM<br>
+                    • Product Ownership<br>
+                    • Team Leadership
+                </div>
+            </div>
+
+            <div>
+                <h2 class="section-header">Language</h2>
+                <div id="languageList" contenteditable="true" class="text-[11px] text-gray-700 space-y-1 font-medium">
+                    • Arabic<br>
+                    • English<br>
+                    • Swedish
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Experience -->
+        <div class="main-content">
+            <h2 class="main-header">Experience</h2>
+            <div id="experienceContainer" contenteditable="true" class="space-y-10">
+                
+                <!-- Protein.com -->
+                <div class="relative pl-8 border-l-2 border-gray-200 pb-2">
+                    <div class="experience-dot"></div>
+                    <div class="flex justify-between items-baseline mb-1">
+                        <h3 class="text-lg font-bold text-gray-800 leading-none">Product Owner & IT Consultant</h3>
+                        <span class="text-xs font-bold text-gray-400">2020-2025</span>
+                    </div>
+                    <p class="text-sm font-bold text-blue-600 mb-3">Protein.com | Sweden, Malmö</p>
+                    <div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
+                        • Managed product backlog to drive e-commerce sales.<br>
+                        • Developed/executed SEO strategies (+20% organic traffic).<br>
+                        • Implemented/managed MarTech for e-commerce performance.<br>
+                        • Drove Agile practices.<br>
+                        • Utilized data analytics to optimize e-commerce growth.<br>
+                        • Managed product data feeds.
+                    </div>
+                </div>
+
+                <!-- HostPioneers -->
+                <div class="relative pl-8 border-l-2 border-gray-200 pb-2">
+                    <div class="experience-dot experience-dot-sub"></div>
+                    <div class="flex justify-between items-baseline mb-1">
+                        <h3 class="text-lg font-bold text-gray-800 leading-none">Founder & CEO</h3>
+                        <span class="text-xs font-bold text-gray-400">2012-2021</span>
+                    </div>
+                    <p class="text-sm font-bold text-blue-600 mb-3">HostPioneers.com | Denmark, Copenhagen</p>
+                    <div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
+                        • Led e-commerce platform development/optimization.<br>
+                        • Implemented MarTech to drive engagement/revenue.<br>
+                        • Developed/executed e-commerce marketing strategies.<br>
+                        • Managed all aspects of the online business.<br>
+                        • Executed e-commerce marketing (SEO, email, social).<br>
+                        • Oversaw customer journey.
+                    </div>
+                </div>
+
+                <!-- Red Cross -->
+                <div class="relative pl-8 border-l-2 border-gray-200 pb-2">
+                    <div class="experience-dot experience-dot-sub"></div>
+                    <div class="flex justify-between items-baseline mb-1">
+                        <h3 class="text-lg font-bold text-gray-800 leading-none">Social Media Manager (Volunteer)</h3>
+                        <span class="text-xs font-bold text-gray-400">2013-2016</span>
+                    </div>
+                    <p class="text-sm font-bold text-blue-600 mb-3">Danish Red Cross - Newtimes.dk</p>
+                    <div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
+                        • EU-funded project to raise awareness of asylum seekers and policymakers.<br>
+                        • Developed and managed the website, enhancing SEO and user engagement.<br>
+                        • Wrote articles and managed social media to increase brand visibility.
+                    </div>
+                </div>
+
+                <!-- Cayenne -->
+                <div class="relative pl-8 border-l-2 border-gray-200 pb-2">
+                    <div class="experience-dot experience-dot-sub"></div>
+                    <div class="flex justify-between items-baseline mb-1">
+                        <h3 class="text-lg font-bold text-gray-800 leading-none">C.I.O Deputy</h3>
+                        <span class="text-xs font-bold text-gray-400">2007-2012</span>
+                    </div>
+                    <p class="text-sm font-bold text-blue-600 mb-3">Cayenne Technologies | Egypt, Cairo</p>
+                    <div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
+                        • Web Business Manager & Deputy Chief Information Officer.<br>
+                        • Managed projects in the web technology department.<br>
+                        • Developed and presented web projects to clients and stakeholders.<br>
+                        • Installed and supported web servers and applications.<br>
+                        • Improved website traffic and SEO scores for clients.
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Data Structure
+        let resumes = JSON.parse(localStorage.getItem('haitham_resumes_v2')) || {};
+        let currentProfileName = localStorage.getItem('haitham_current_profile_v2') || 'Main Resume';
+
+        const initialContent = {
+            name: "HAITHAM KHALIFA",
+            photo: "Resume.jpg",
+            phone: "+34 614 821 331",
+            email: "Haitham@Khalifa.se",
+            linkedin: "linkedin.com/in/haithamekhalifa/",
+            location: "Málaga, Spain",
+            about: "A results-oriented leader with 15+ years of experience in driving e-commerce growth, optimizing online platforms, and implementing successful digital marketing strategies. Proven ability to increase online sales, improve customer engagement, and manage cross-functional teams to achieve business objectives.",
+            education: document.getElementById('educationList').innerHTML,
+            skills: document.getElementById('skillsList').innerHTML,
+            language: document.getElementById('languageList').innerHTML,
+            experience: document.getElementById('experienceContainer').innerHTML
+        };
+
+        function init() {
+            if (Object.keys(resumes).length === 0) {
+                resumes['Main Resume'] = { ...initialContent };
+                saveToDisk();
+            }
+            updateSelect();
+            loadProfile(currentProfileName);
+        }
+
+        function handlePhotoUpload(input) {
+            const file = input.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const base64Image = e.target.result;
+                    document.getElementById('userPhoto').src = base64Image;
+                    // Auto-save photo to current profile
+                    saveCurrentProfile();
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+
+        function updateSelect() {
+            const select = document.getElementById('resumeSelect');
+            select.innerHTML = '';
+            Object.keys(resumes).forEach(name => {
+                const opt = document.createElement('option');
+                opt.value = name;
+                opt.textContent = name;
+                if (name === currentProfileName) opt.selected = true;
+                select.appendChild(opt);
+            });
+        }
+
+        function loadProfile(name) {
+            const p = resumes[name] || resumes[Object.keys(resumes)[0]];
+            currentProfileName = name;
+            localStorage.setItem('haitham_current_profile_v2', name);
+
+            document.getElementById('userName').innerText = p.name;
+            document.getElementById('userPhoto').src = p.photo || "Resume.jpg";
+            document.getElementById('userPhone').innerText = p.phone;
+            document.getElementById('userEmail').innerText = p.email;
+            document.getElementById('userLinkedin').innerText = p.linkedin;
+            document.getElementById('userLocation').innerText = p.location;
+            document.getElementById('aboutMe').innerText = p.about;
+            document.getElementById('educationList').innerHTML = p.education;
+            document.getElementById('skillsList').innerHTML = p.skills;
+            document.getElementById('languageList').innerHTML = p.language || initialContent.language;
+            document.getElementById('experienceContainer').innerHTML = p.experience;
+        }
+
+        function saveCurrentProfile() {
+            resumes[currentProfileName] = {
+                name: document.getElementById('userName').innerText,
+                photo: document.getElementById('userPhoto').src,
+                phone: document.getElementById('userPhone').innerText,
+                email: document.getElementById('userEmail').innerText,
+                linkedin: document.getElementById('userLinkedin').innerText,
+                location: document.getElementById('userLocation').innerText,
+                about: document.getElementById('aboutMe').innerText,
+                education: document.getElementById('educationList').innerHTML,
+                skills: document.getElementById('skillsList').innerHTML,
+                language: document.getElementById('languageList').innerHTML,
+                experience: document.getElementById('experienceContainer').innerHTML
+            };
+            saveToDisk();
+            showStatus('Changes Saved');
+        }
+
+        function createNewProfile() {
+            const name = prompt("Name this version (e.g., Geely IT Manager):");
+            if (name && !resumes[name]) {
+                resumes[name] = { ...resumes[currentProfileName] };
+                currentProfileName = name;
+                saveToDisk();
+                updateSelect();
+                loadProfile(name);
+            } else if (resumes[name]) {
+                alert("This name already exists.");
+            }
+        }
+
+        function deleteProfile() {
+            if (Object.keys(resumes).length <= 1) return alert("You need at least one profile.");
+            if (confirm(`Delete "${currentProfileName}"?`)) {
+                delete resumes[currentProfileName];
+                currentProfileName = Object.keys(resumes)[0];
+                saveToDisk();
+                updateSelect();
+                loadProfile(currentProfileName);
+            }
+        }
+
+        function saveToDisk() {
+            localStorage.setItem('haitham_resumes_v2', JSON.stringify(resumes));
+        }
+
+        function showStatus(msg) {
+            const btn = document.querySelector('button[onclick="saveCurrentProfile()"]');
+            const original = btn.textContent;
+            btn.textContent = msg;
+            btn.style.backgroundColor = '#059669';
+            setTimeout(() => {
+                btn.textContent = original;
+                btn.style.backgroundColor = '';
+            }, 2000);
+        }
+
+        document.getElementById('resumeSelect').addEventListener('change', (e) => {
+            loadProfile(e.target.value);
+        });
+
+        init();
+    </script>
+</body>
+</html>
diff --git a/batch-300-business.csv b/batch-300-business.csv
new file mode 100644
index 0000000..83e02a2
--- /dev/null
+++ b/batch-300-business.csv
@@ -0,0 +1,301 @@
+email	company	country
+botters@archmage.net		US
+imcooldude2012@rediff.com		IN
+exp0s3d@Tormail.net		US
+brandon.wamboldt@northernlightstechnology.ca	_	CA
+martin@vestjyskdata.dk	Vestjyskdata	SY
+pritchett@neyardpha.com		US
+th5tuananh@netzero.net	abc	US
+abele62@tiscali.it		IT
+kevin@uhelios.com	uhelios	US
+support@lifescapehosting.com	Lifescapehosting.com	CA
+lukasz.piotrowski@connected.pl	none	PL
+qa000067@kill3r.net		PE
+kathleen123threadwel@me.com		GB
+ginaz111@sbcglobal.net		US
+jakob@spinzone.net		PK
+ps9@live.fr	majj	MA
+admin@fenris-gaming.net		GB
+charlesgrimm@zing.vn		US
+info@moynahanmultimedia.com	Moynahan Multimedia	GB
+grigori22@wp.pl	-	PL
+houyee@foxmail.com	hy	CN
+mario.klein80@web.de		DE
+diana@dr-point.net		AU
+serser@ser.com		AE
+baaaaaary@msn.com		IL
+mat@dangs.ag		US
+admin@wiki-pedia.biz		US
+xm5@live.fr	Secrityeme	US
+swartsopia@allmail.net		GB
+vmfear@ymail.com	VM	US
+oriake001@ovi.com	john &amp;co ltd	GH
+lkj@YAHKDF.COM	jjkl	US
+ankaboot2010@live.com	crouzmind	US
+linda.sachs@giadinhnahi.org		US
+service@blackshades.biz		US
+xggzohqm@sharklasers.com	Mexico	MX
+white_hat@null.net		FR
+qweqweqwe@mailinator.com	qweqweqwe	US
+vpnmuell@trash-mail.com		US
+pay@animesll.tugaspeed.info	HelpSys	TG
+tedibushi@live.com	tedi-ndertim	AL
+marcduffy@ymail.com		GB
+vailon@vncoder.sharkserve.com		US
+chieutannang@live.com	Kimberley Edgmon	US
+ryan@naturalsourcestore.com	Natural Source Store	US
+raul@mailinator.com	microshuit	GB
+freeredirect@fastmail.co.uk	none	DE
+admin@loanvu.com	microsoft	US
+watumbe@web.de	-	DE
+kcqbeiek@sharklasers.com	momdomdom	US
+ilyes@infinityways.com	INFINITY WAYS INT'L	TN
+0678024136@orange.fr		BE
+f4b3r@op.pl		PL
+mark@oceanviewnetworks.com		US
+rosimiere12@live.com	MairaLopes	BR
+Thatcher@dominhit.pro		US
+vaiqvai23@bol.com.br		BR
+julioreymiamifl@msn.com	nop	GB
+admin@Gytis.eu	nee	LT
+anarchoi@anarkhia.org		CA
+nereafannucci@armyspy.com		IT
+info@tukangshopping.org		US
+ger@vnugroup.us	ATILAHOSTING	CA
+tomas@duomenucentras.lt	UAB Duomenu centras	LT
+idontknowwhyyoursendingmeinvoices@google.com		GB
+samuelgtc@gmx.com	WPW	IN
+soxkid999@aim.com	MuRKRoW :)	US
+cathy.easter@ymail.com		US
+suporte@tugaspeed.info	isepic	PT
+joshuajroche@me.com		AU
+z0rank@live.com		US
+z0mb1-@live.com		US
+admin@9srv.com	non	US
+paulford877@rocketmail.com		US
+ph.huguet@wanadoo.fr		FR
+norton.garmar@att.net		US
+JosephWatts@mailcatch.com		US
+za.hosting23@googlemail.com		DE
+DICC@anonymousspeech.com		US
+gongstar@live.fr	devloper	US
+RACHELMTHOMAS@goodmail.us		US
+bkay@bax.co.za		ZA
+bery@cyberindon.co.cc	Melbourne	AU
+mo.motamedifar@googlemail.com		MY
+josue.2021@live.com	Capo	US
+erland.larsson@storliens.com		GB
+flighttime121@safe-mail.net	none	TH
+rojam_liu@126.com	Discover high tech	CN
+esrothebest@free.fr	piere	FR
+pazarche@email.bg		US
+payments@pwnxile.com		GB
+voyage999@blumail.org		US
+lind_otr@msn.com		US
+Adam.jones19@live.co.uk	AJ-Host	GB
+freemanelectric@googlemail.com		SE
+Ico-ns@m00dy.org	Ico-ns M00dy	US
+jfkkuhn@mac.com	Luvideez	US
+boxcase@ymail.com	javanet	GB
+nana@instrumentbirth.com		GB
+kontakt@urynowicz.com.pl		UG
+to1@zaaap.net		DE
+dark-hill@live.fr	Dz	DZ
+feeldark@enonmovies.com		MX
+Hax@me.com		DK
+asim@techbytes.pk		PK
+ircnet@waphacker.zzn.com		AU
+Donald2013@lavabit.com		US
+hillmanfaris@follower.com		US
+chile@san-sebastian.com		US
+tracethegod@live.com		CA
+webmaster@hosting022.com	hosting022	RS
+cshacksxe@live.com		AL
+santander.seguro@gerenteatendimento.com	Fabio Informatica CIA	BR
+nemnon123@googlemail.com		DE
+burim-x@msn.com		AL
+oran@tele2.nl		NL
+zoam@Live.com		AL
+celibataire24@live.fr		MA
+info@mosli.com	Abudlli	AU
+iport@idiotreturn.com		US
+ashy152@googlemail.com		GB
+mrubinetti@nsvn.org		US
+vdele.support@ya.ru	none	US
+tony_94@gmx.fr		FR
+qwertzblubber@googlemail.com		GB
+aresvie@me.com		US
+blasco007@tiscali.it		IT
+pratik@phybersecurity.net	Phyber Security	US
+oconner@gmx.net	Eisregen Ltd.	CY
+yassss121@live.com	dhsjsk	GB
+pietro.alfieri@email.it	Pietrolf Corp	IT
+tsleo@gwi.net	Laurie Elliott	US
+remo_demo@ymail.com	Iraqi Hoster	IQ
+kevinwood@vfemail.net		GB
+asupasu@ymail.com		US
+drlogin@live.com		EG
+pier@vip-clinique.com.br	BRlink	BR
+ludovic.dereeper@wanadoo.fr		FR
+robert.holmes@marriott.com	n/a	US
+kumar.sushant@rocketmail.com	Darknez	IN
+jgvffjj@hjdh.com		DK
+Gen4601@yandex.ru	gennoss	RU
+amy83@beagle.com.au		AU
+zs@zs.com		GB
+Kobrinsky@shiftwh.org		US
+webmaster@youngt.vn	Friedman Company	US
+heroturko2010@live.com	Heroturko	PK
+kgibson@unr.edu		US
+jonathan.obama@ymail.com		US
+zasekakvapotreba1@live.com		US
+nickn@live.fr		FR
+uzzo_tiziana@libero.it		IT
+admin@terrybackmail.com		GB
+williamflee@fleckens.hu	Abtrusive Security Audit	US
+serverplans@live.com	ServerPlans Inc	EG
+mccannc@g7world.com		US
+JorgCoort@email.cz	n/a	CZ
+dcs@dcarrsmith.com		GB
+m-switzer@admin118.us		US
+962488@8fc.7z.lt		US
+admin@tonngokhong.org	MARY ELLEN SEINER	US
+mbarnes2012@live.com		GB
+vperez@mailinator.net		US
+marinewhite0809@live.com	guy	US
+fauzi@tago.re	Hostia.CO	ID
+neopan@omninet.com.cy		CY
+linzag@e-mail.ua	benkanim group	US
+dortmundfan79@googlemail.com		DE
+sheila@videotam.com	n/a	PR
+lesley@homeinsteadottawa.ca	Home Instead Senior Care	CA
+send2toni@googlemail.com		DE
+shater@live.com.mx	Monkihost.com	MX
+jamesluthor@ymail.com	n/a	US
+rotten_cabbage@live.com		SE
+air@hushmail.me		ES
+coco-2009@windowslive.com	eee	SA
+varbibin@googlemail.com	MB media network	US
+dnusax@hushmail.com	None	US
+anass.anonyme@hush.ai	veo	US
+chuck@tutugon.com		US
+chomenk615@live.com		US
+lautoja@z1p.biz		NL
+ONeal@tete.us		US
+brian.hawley@live.com		US
+cosmo@dot.net		US
+samy@liberman.com.br		BR
+askary@askary.fr		FR
+lo0ves0sa@live.com	Sosa	US
+onerouting@ymail.com	johndkey	TN
+leviz@live.com		US
+juliankoehn@googlemail.com		DE
+robertwells@screenlay.com		US
+sales@richpixel.co.uk		GB
+dirtball@in.com		GB
+crazygirl25@live.nl		US
+sir.bulldog@ofir.dk		DK
+none@none.com		CA
+cameron@ministryofsound.co.nz		NZ
+lopes.newton@bol.com.br		BR
+romain197300@live.fr		FR
+oops@messengertrick.pl.ua		GB
+ghostee1234@googlemail.com		GB
+arskreo@free.fr		US
+encode@ymail.com	IRD	US
+palooo@itmehal.com	Student	PK
+slee34@me.com		AU
+kimberly@secretary.net		US
+antoine.marlieu@gmx.com		FR
+mootaz001@live.com	MootazBot	NZ
+wrongrules2@live.com		US
+rociogonzales4@msn.com	banda S.A	PE
+francois.sartelet@free.fr		FR
+colgate@accountant.com		US
+talk2sebastin@rediffmail.com	Dogm	IN
+Dodds-craig@gmx.com		US
+ewfewd@zghdd.de		UA
+fishfan@lilian.hu		HU
+jackichan11@live.com	jack	US
+h3ck4r@w.cn	carding	US
+jansky@mommy-mommy.biz		US
+gadhafi-balms@postino.net	akuwanta concept computers	NG
+tmhl1ghts0ut@aim.com	Quantum Booter	US
+pejelagarto_obrador@rocketmail.com	partido revolucionario democratico	MX
+idrinkciroc@live.com		US
+Ellensims@zippymail.info		US
+x0fpt3@walla.com		BR
+bladnes@wp.pl		PL
+xavier.place@club-internet.fr	xavierplace	FR
+ninguno@tormail.org	teamsec	ES
+chefk0ch@Safe-mail.net		RO
+fettiboyx1@live.com	BrickSquad Marketers	US
+oiseng@ymail.com		GB
+alex.lyle@bt.com	AlMeK	GB
+azza_bouhjar@w.cn		FR
+joyce.milgram@live.com		US
+angieb1958@dozercentral.net		GB
+Snatch@live.fr		FR
+vukutuku@hushmail.com		CN
+unnheresa@msn.com		US
+suporte@planetjogos.com.br	planetjogos.com.br	BR
+frederic.seguin@live.fr	perso	FR
+h.ljung@telia.com		SE
+contact@ximensions.com	Ximensions	DE
+janszuster@gazeta.pl		PL
+larrighetti@downloadzoneforum.net		IT
+deadwalking@hushmail.com		US
+sales@im-hoster.org	im-hoster.org	US
+resellervps@netzero.net	reseller	US
+sky@essx.net		NZ
+bee.cf@9.cn	-	TH
+onlyshop@rocketmail.com		US
+s.evans1@live.com	N/A	DE
+adameva10s@live.com		US
+rosenbergrene@ofir.dk	Eventours	DK
+sopie22@lovingu.biz		US
+blcksky2@googlemail.com		GB
+tompkins@iname.com		US
+allan@baeklund.org		DK
+nhokcredit@me.com		IS
+ronal-16@live.com	Arenaie Wilson	GB
+loucoabreu10@bol.com.br	dasilva	US
+admin@speedyvds.com	SpeedyVDS Pty Ltd	AU
+anderson004@blumail.org		US
+traor@0-mail.com		FR
+td-nobrega@uol.com.br		BR
+Smoot@warnatar.org		US
+Dsm517@autovip.biz		US
+adamswinberg@mail.com		BE
+cemeteryluv@juno.com		US
+vl@priv8.in		BR
+giant@flash-candy.com		US
+management@stereo-band.net		US
+info2@egypt-deal.com		EG
+saramarso@earthlink.net		US
+dias3535@live.com		DE
+mal4ikoleg@yandex.ru	no company	RU
+admin@ctrx-design.com	CTRX-Design	GB
+guenouxs@laposte.net		FR
+jacobhasemann@me.com		DK
+scarface_b40@windowslive.com	anna_reseller	US
+sexyfast@live.com.mx		MX
+lazycat87@juno.com		GB
+3.141zfnever@googlemail.com		GB
+beto@rentaphone.com		DE
+mpvancu@ilstu.edu		US
+joe_faulkner@joefunerals.co.uk	Joe Funerals Ltd	GB
+luigiitaly@alice.it		IT
+laxzor@hmamail.com		US
+ysk3@live.com	Home	MX
+decrypt@live.com		US
+Intecteur1@live.fr	vpshosting	US
+norbert.vachal@aim.com		US
+stuart@denfield.co.uk	Denfield Advertising	GB
+mail@samrelan.com	SamRelan	IN
+granierromain@msn.com		FR
+na@void.com		IN
+nock50@live.com	Sammy's Record Shack	US
+hendra@consultant.com		ID
+k1ttensarec00l@disposeamail.com		US
+106223482@qq.com		CN
diff --git a/contacts.json b/contacts.json
index 437d219..f1823e1 100644
--- a/contacts.json
+++ b/contacts.json
@@ -40,5 +40,19 @@
         "phone": "+34614821331",
         "message": "sdksodksdlskdd\u00f6l",
         "date": "2026-03-18 17:46:42"
+    },
+    {
+        "name": "New Assistant",
+        "email": "Haitham@Essam-eldin.com",
+        "phone": "004553523253",
+        "message": "ha aha ajaha",
+        "date": "2026-03-19 23:12:02"
+    },
+    {
+        "name": "Grace Walker",
+        "email": "grace.walker@healthcoreit.com",
+        "phone": "13025205097",
+        "message": "Hi Team,\n\nWe help businesses connect with companies that match their ICP.\n\nI was going through your website and wanted to see if companies using cloud infrastructure tools, virtualization platforms, and IT management solutions fall within your target market.\n\nHappy to share more details if this is relevant.\n\nBest,\nGrace Walker\nBusiness Development Manager\n302 520 5097\nGTU",
+        "date": "2026-03-26 18:20:02"
     }
 ]
\ No newline at end of file
diff --git a/crm/outreach-template.md b/crm/outreach-template.md
new file mode 100644
index 0000000..8233550
--- /dev/null
+++ b/crm/outreach-template.md
@@ -0,0 +1,73 @@
+# Restaurant Outreach — Email Template
+
+## Subject Line Options
+- "Quick question about [Restaurant Name]"
+- "[Restaurant Name] — web audit free for 5 min"
+- "Saw [Restaurant Name]'s site, have an idea"
+
+---
+
+## Email Template
+
+```
+Hi [Name],
+
+I noticed [Restaurant Name]'s website and I have an idea that could 
+bring you more bookings — happy to share for free.
+
+I run HostPioneers — we build professional websites for restaurants 
+in Benalmádena and the Costa del Sol. Currently offering a complete 
+website setup for €399 (essential) or €699 (professional, includes AI).
+
+I have templates ready that match your restaurant style. 
+You can preview them here:
+→ https://hostpioneers.com/demos/ristorante/
+
+No commitment, no contracts. Just a conversation.
+
+Would a quick 10-min call this week work?
+
+Best,
+Haitham
+HostPioneers — Benalmádena Costa
+```
+
+---
+
+## Follow-up (if no reply in 3 days)
+```
+Hi [Name],
+
+Just following up — did you get my last message?
+
+I put together a quick preview template for [Restaurant Name] 
+based on what I saw on your site:
+
+→ https://hostpioneers.com/demos/ristorante/
+
+Worth a look before the summer season hits.
+
+Happy to jump on a quick call.
+```
+
+---
+
+## High Priority Prospects (site-down / no site)
+| Restaurant | Demo to Send | Notes |
+|-----------|-------------|-------|
+| La Sirena | Spanish / Steakhouse | Seafood focus, TripAdvisor 4.5 |
+| Ai Coppa Ristorante | Italian | Italian cuisine |
+| Il Boccaccio | Italian | Italian cuisine |
+| All Grill Burger | Steakhouse/Burger | Burger + grill |
+| Los Mellizos | Spanish/Seafood | Bot protection on site |
+| La Nueva | Spanish | NEW - no official website |
+
+## Medium Priority (has site, poor quality)
+| Restaurant | Issues | Demo to Send |
+|-----------|--------|-------------|
+| Ocampo Cocina Argentina | No menu, no contact, no HTTPS | Steakhouse |
+| SALU Grill & Wine | No contact | Steakhouse |
+| Narhal Mahal | No HTTPS | Indian |
+| Asador El Quebracho | No HTTPS | Steakhouse |
+| Jacks Smokehouse | Free weeblyte subdomain | Steakhouse/Burger |
+| Don Marisquito | Directory listing only | Spanish/Seafood |
diff --git a/crm/prospects/index.html b/crm/prospects/index.html
new file mode 100644
index 0000000..e8e9feb
--- /dev/null
+++ b/crm/prospects/index.html
@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Restaurant Prospects — Benalmádena</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #0f1117; --bg-card: #161922; --bg-row: #1c1f2a; --border: #2a2d3a;
+      --text: #e2e4e9; --text-muted: #8b8fa3; --green: #22c55e; --yellow: #eab308;
+      --red: #ef4444; --blue: #3b82f6; --purple: #a855f7;
+    }
+    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
+    a { color: var(--blue); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+
+    /* HEADER */
+    header { border-bottom: 1px solid var(--border); padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; background: var(--bg-card); }
+    header h1 { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
+    .header-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
+
+    /* STATS BAR */
+    .stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); }
+    .stat { background: var(--bg-card); padding: 0.8rem 1rem; text-align: center; }
+    .stat-value { font-size: 1.5rem; font-weight: 700; }
+    .stat-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem; }
+    .stat.red .stat-value { color: var(--red); }
+    .stat.yellow .stat-value { color: var(--yellow); }
+    .stat.green .stat-value { color: var(--green); }
+    .stat.blue .stat-value { color: var(--blue); }
+    .stat.purple .stat-value { color: var(--purple); }
+
+    /* TOOLBAR */
+    .toolbar { padding: 0.8rem 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border); background: var(--bg-card); }
+    .filter-btn { padding: 0.35rem 0.9rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; font-family: inherit; transition: all 0.2s; }
+    .filter-btn:hover { border-color: var(--text-muted); color: var(--text); }
+    .filter-btn.active { background: var(--blue); color: white; border-color: var(--blue); }
+
+    /* BUTTONS */
+    .btn { padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: all 0.2s; text-decoration: none; display: inline-block; }
+    .btn-primary { background: var(--blue); color: white; }
+    .btn-primary:hover { background: #2563eb; text-decoration: none; }
+    .btn-success { background: var(--green); color: white; }
+    .btn-success:hover { background: #16a34a; text-decoration: none; }
+    .btn-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
+    .btn-outline:hover { border-color: var(--text-muted); color: var(--text); text-decoration: none; }
+    .btn-danger { background: var(--red); color: white; }
+    .btn-danger:hover { background: #dc2626; text-decoration: none; }
+    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    /* TOAST */
+    #toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--green); color: #000; padding: 0.6rem 1.2rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 9999; }
+    #toast.show { opacity: 1; }
+
+    /* TABLE */
+    .table-wrap { overflow-x: auto; }
+    table { width: 100%; border-collapse: collapse; min-width: 900px; }
+    thead { background: var(--bg-card); border-bottom: 1px solid var(--border); }
+    th { padding: 0.6rem 0.8rem; text-align: left; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; }
+    td { padding: 0.7rem 0.8rem; border-bottom: 1px solid rgba(42,45,58,0.4); vertical-align: middle; font-size: 0.8rem; }
+    tr:hover td { background: rgba(59,130,246,0.03); }
+    tr.selected td { background: rgba(59,130,246,0.08); }
+
+    /* GRADE BADGE */
+    .grade { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
+    .grade.A { background: rgba(34,197,94,0.15); color: var(--green); }
+    .grade.B { background: rgba(234,179,8,0.15); color: var(--yellow); }
+    .grade.C { background: rgba(234,179,8,0.1); color: #d97706; }
+    .grade.D { background: rgba(234,179,8,0.2); color: #d97706; }
+    .grade.F { background: rgba(239,68,68,0.15); color: var(--red); }
+
+    /* SELECTED CHECKBOX */
+    .row-checkbox { width: 20px; height: 20px; cursor: pointer; accent-color: var(--blue); }
+
+    /* WEBSITE STATUS TOGGLE */
+    .toggle-group { display: flex; align-items: center; gap: 0.4rem; }
+    .toggle { position: relative; width: 36px; height: 20px; cursor: pointer; }
+    .toggle input { opacity: 0; width: 0; height: 0; }
+    .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 20px; transition: all 0.2s; }
+    .toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: all 0.2s; }
+    .toggle input:checked + .toggle-slider { background: var(--green); }
+    .toggle input:checked + .toggle-slider::before { transform: translateX(16px); }
+    .toggle-label { font-size: 0.7rem; color: var(--text-muted); }
+
+    /* WEBSITE LINK */
+    .website { font-size: 0.75rem; color: var(--blue); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+
+    /* ISSUES */
+    .issues { display: flex; gap: 0.25rem; flex-wrap: wrap; }
+    .issue { font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(239,68,68,0.1); color: rgba(239,68,68,0.8); border: 1px solid rgba(239,68,68,0.2); }
+
+    /* PRIORITY */
+    .priority { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 4px; }
+    .priority.high { background: rgba(239,68,68,0.15); color: var(--red); }
+    .priority.med { background: rgba(234,179,8,0.15); color: var(--yellow); }
+    .priority.low { background: rgba(59,130,246,0.1); color: var(--blue); }
+
+    /* ACTIONS */
+    .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
+
+    /* NOTES INPUT */
+    .notes-input { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 0.75rem; padding: 0.3rem 0.5rem; width: 120px; font-family: inherit; }
+    .notes-input:focus { outline: none; border-color: var(--blue); }
+
+    /* TABS */
+    .tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 1.5rem; background: var(--bg-card); }
+    .tab { padding: 0.8rem 1.2rem; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; }
+    .tab:hover { color: var(--text); }
+    .tab.active { color: var(--blue); border-bottom-color: var(--blue); }
+
+    /* DEMOS SECTION */
+    #demos-view { display: none; padding: 1.5rem; }
+    .demos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
+    .demo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s; }
+    .demo-card:hover { border-color: var(--blue); }
+    .demo-preview { height: 140px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; }
+    .demo-preview img { width: 100%; height: 100%; object-fit: cover; }
+    .demo-preview .demo-label { font-size: 0.75rem; color: var(--text-muted); }
+    .demo-info { padding: 1rem; }
+    .demo-info .demo-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
+    .demo-info .demo-desc { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.6rem; line-height: 1.5; }
+    .demo-info .demo-price { font-size: 0.75rem; color: var(--green); font-weight: 600; margin-bottom: 0.6rem; }
+    .demo-info .demo-url { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.6rem; word-break: break-all; }
+    .demo-status { font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 4px; display: inline-block; margin-bottom: 0.6rem; }
+    .demo-status.done { background: rgba(34,197,94,0.15); color: var(--green); }
+    .demo-status.building { background: rgba(234,179,8,0.15); color: var(--yellow); }
+
+    /* RESPONSIVE */
+    @media (max-width: 768px) {
+      .stats-bar { grid-template-columns: repeat(3, 1fr); }
+      header { flex-direction: column; align-items: flex-start; }
+    }
+  </style>
+</head>
+<body>
+
+<header>
+  <div>
+    <h1>🍽️ Benalmádena Restaurant Prospects</h1>
+    <div style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
+      <span id="total-count">0</span> restaurants · <span id="selected-count">0</span> selected for contact
+    </div>
+  </div>
+  <div class="header-actions">
+    <button class="btn btn-success" onclick="saveAll()">💾 Save Changes</button>
+    <button class="btn btn-primary" onclick="showTab('contact', event)">📋 Contact Selected (<span id="selected-btn-count">0</span>)</button>
+  </div>
+</header>
+
+<!-- STATS -->
+<div class="stats-bar">
+  <div class="stat red"><div class="stat-value" id="stat-f">0</div><div class="stat-label">Site Down</div></div>
+  <div class="stat yellow"><div class="stat-value" id="stat-cd">0</div><div class="stat-label">Needs Work</div></div>
+  <div class="stat green"><div class="stat-value" id="stat-ab">0</div><div class="stat-label">Good Sites</div></div>
+  <div class="stat blue"><div class="stat-value" id="stat-contact">0</div><div class="stat-label">Selected</div></div>
+  <div class="stat purple"><div class="stat-value" id="stat-no-site">0</div><div class="stat-label">No Website</div></div>
+</div>
+
+<!-- TABS -->
+<div class="tabs">
+  <div class="tab active" onclick="showTab('all')">All</div>
+  <div class="tab" onclick="showTab('hot')">🔥 Site Down</div>
+  <div class="tab" onclick="showTab('warm')">⚠️ Needs Work</div>
+  <div class="tab" onclick="showTab('good')">✅ Good Sites</div>
+  <div class="tab" onclick="showTab('nosite')">❌ No Website</div>
+  <div class="tab" onclick="showTab('contact')">📋 Selected</div>
+  <div class="tab" onclick="showTab('demos')">🎨 Demo Templates</div>
+</div>
+
+<!-- TABLE -->
+<div id="table-view">
+  <table>
+    <thead>
+      <tr>
+        <th style="width:24px;">✓</th>
+        <th>G</th>
+        <th>Restaurant</th>
+        <th>Website</th>
+        <th>Has Site?</th>
+        <th>Grade</th>
+        <th>Priority</th>
+        <th>Issues</th>
+        <th>Notes</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody id="table-body"></tbody>
+  </table>
+</div>
+
+<!-- DEMOS SECTION -->
+<div id="demos-view">
+  <div class="demos-grid" id="demos-grid"></div>
+</div>
+
+<div id="toast">Saved!</div>
+
+<script>
+// ──────────────────────────────────────────────
+// RESTAURANT DATA (edit manually here or load from localStorage)
+// ──────────────────────────────────────────────
+const STORAGE_KEY = 'autojobs_restaurant_prospects';
+
+function loadData() {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved) return JSON.parse(saved);
+  return getDefaultData();
+}
+
+function getDefaultData() {
+  return [
+    {id:1, name:"La Sirena", url:"http://lasirenarestaurante.com/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
+    {id:2, name:"Ai Coppa Ristorante", url:"http://www.aicorestaurants.com/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
+    {id:3, name:"Il Boccaccio", url:"http://www.ilboccaccio.es/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
+    {id:4, name:"All Grill Burger", url:"http://www.allgrillburger.com/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
+    {id:5, name:"Los Mellizos", url:"https://losmellizos.net/", hasSite:true, grade:"D", quality:0, issues:["bot protection"], priority:"high", notes:"", selected:false},
+    {id:6, name:"Ocampo Cocina Argentina", url:"http://www.ocampococinaargentina.com/", hasSite:true, grade:"C", quality:3, issues:["no_menu","no_contact","no_https"], priority:"med", notes:"", selected:false},
+    {id:7, name:"Narhal Mahal", url:"http://www.indianrestaurantnaharmahal.com/", hasSite:true, grade:"B", quality:6, issues:["no_https"], priority:"med", notes:"", selected:false},
+    {id:8, name:"SALU Grill & Wine", url:"https://salu-restaurant.com/", hasSite:true, grade:"B", quality:6, issues:["no_contact"], priority:"med", notes:"", selected:false},
+    {id:9, name:"Asador El Quebracho", url:"http://asadorelquebracho.es/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
+    {id:10, name:"Pasta Fresca", url:"http://pastafrescabenalmadena.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
+    {id:11, name:"The Carvery Company", url:"http://www.thecarverycompany.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
+    {id:12, name:"Restaurante Los Daltabanes", url:"http://www.restaurantelosdelantales.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
+    {id:13, name:"1TORO Puerto Marina", url:"http://www.restaurantespuertomarina.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
+    {id:14, name:"Restaurante La Cala", url:"http://www.lacalabenalmadena.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
+    {id:15, name:"Amigos Torremolinos", url:"https://amigostorrequebrada.com/es/", hasSite:true, grade:"B", quality:8, issues:["no_photos"], priority:"med", notes:"", selected:false},
+    {id:16, name:"Restaurante La Fuente", url:"https://www.restaurantelafuente.es/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:17, name:"Metro Ristorante", url:"https://es.metroristorante.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:18, name:"Restaurante Angostura", url:"https://www.angustorrequebrada.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:19, name:"King of Curries", url:"https://www.indianrestaurantkingofcurries.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:20, name:"Lila CTREE", url:"https://lilactree.net/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:21, name:"Cinnamon Club", url:"https://cinnamonclubpuertomarina.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:22, name:"Bodega Charolais", url:"https://www.bodegacharolais.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:23, name:"Arte y Cocina", url:"https://www.arteycocinarestaurant.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:24, name:"Indian City", url:"https://www.indiancity.es/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:25, name:"Lime and Lemon", url:"https://www.limeandlemonbenalmadena.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
+    {id:26, name:"La Bodeguita Tapas", url:"https://taperia-la-bodeguita.placejoys.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:27, name:"La Mafia", url:"https://lamafia.es/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:28, name:"The Indian Chef", url:"https://www.theindianchefrestaurant.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:29, name:"Nirvana Indian", url:"https://www.nirvanaindianrestaurantbenalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:30, name:"Basil Benalmádena", url:"https://www.basilbenalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:31, name:"La Tapería de Benalmádena", url:"https://benalmercado.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:32, name:"Cantina Mexicana", url:"https://www.cantinapuertomarina.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:33, name:"Gaucho Grill", url:"https://www.gaucho-grill-benalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:34, name:"Cafe Soleil", url:"https://www.cafesoleil.es/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:35, name:"Coast to Coast (C2C)", url:"https://c2cbenalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:36, name:"South Beach Restobar", url:"https://southbeachrestobar.eatbu.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
+    {id:37, name:"La Nueva", url:"https://la-nueva.goto-where.com/", hasSite:false, grade:"F", quality:0, issues:["no official website"], priority:"high", notes:"Las Gaviotas, P.o Maritimo 11, 29630 Benalmadena. TripAdvisor 4.8. Nominated for best new opening.", selected:false},
+    {id:38, name:"Don Marisquito", url:"https://benalmercado.com/listado/don-marisquito/", hasSite:false, grade:"F", quality:0, issues:["directory listing only"], priority:"med", notes:"TripAdvisor 4.7. No official website found.", selected:false},
+    {id:39, name:"Jacks Smokehouse", url:"https://benal.jacks-smokehouse.com/", hasSite:true, grade:"C", quality:5, issues:["free weeblyte domain","no contact form"], priority:"med", notes:"American BBQ. benal.jacks-smokehouse.com - free weeblyte subdomain. No proper brand domain.", selected:false},
+  ];
+}
+
+let data = loadData();
+let currentFilter = 'all';
+
+function saveData() {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+}
+
+function saveAll() {
+  saveData();
+  const toast = document.getElementById('toast');
+  toast.textContent = '✅ Saved!';
+  toast.classList.add('show');
+  setTimeout(() => { toast.classList.remove('show'); }, 2000);
+}
+
+function toggleSite(id) {
+  const row = data.find(d => d.id === id);
+  if (row) {
+    row.hasSite = !row.hasSite;
+    if (!row.hasSite) {
+      row.grade = 'F';
+      row.priority = 'high';
+    } else {
+      row.grade = 'B';
+      row.priority = 'med';
+    }
+  }
+  saveData();
+  render();
+}
+
+function toggleSelect(id) {
+  const row = data.find(d => d.id === id);
+  if (row) {
+    row.selected = !row.selected;
+    saveData();
+    render();
+  }
+}
+
+function updateNotes(id, val) {
+  const row = data.find(d => d.id === id);
+  if (row) { row.notes = val; saveData(); }
+}
+
+function selectAll() {
+  const visible = data.filter(d => matchesFilter(d, currentFilter));
+  const allSelected = visible.every(d => d.selected);
+  visible.forEach(d => d.selected = !allSelected);
+  saveData();
+  render();
+}
+
+function matchesFilter(row, filter) {
+  if (filter === 'all') return true;
+  if (filter === 'hot') return row.grade === 'F' || row.grade === 'D';
+  if (filter === 'warm') return row.grade === 'B' || row.grade === 'C';
+  if (filter === 'good') return row.grade === 'A';
+  if (filter === 'nosite') return !row.hasSite;
+  if (filter === 'contact') return row.selected;
+  return true;
+}
+
+function showTab(tab, event) {
+  currentFilter = tab;
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  if (event && event.target) event.target.classList.add('active');
+  
+  const tableView = document.getElementById('table-view');
+  const demosView = document.getElementById('demos-view');
+  
+  if (tab === 'demos') {
+    tableView.style.display = 'none';
+    demosView.style.display = 'block';
+    renderDemos();
+  } else {
+    tableView.style.display = 'block';
+    demosView.style.display = 'none';
+    render();
+  }
+}
+
+function getGradeClass(grade) {
+  return 'grade ' + grade;
+}
+
+function getPriorityClass(p) {
+  if (p === 'high') return 'priority high';
+  if (p === 'med') return 'priority med';
+  return 'priority low';
+}
+
+function getPriorityLabel(p) {
+  if (p === 'high') return '🔥 HIGH';
+  if (p === 'med') return 'Medium';
+  return 'Low';
+}
+
+function render() {
+  const tbody = document.getElementById('table-body');
+  const filtered = data.filter(d => matchesFilter(d, currentFilter));
+  
+  tbody.innerHTML = filtered.map(row => `
+    <tr class="${row.selected ? 'selected' : ''}">
+      <td>
+        <input type="checkbox" class="row-checkbox" 
+          ${row.selected ? 'checked' : ''} 
+          onchange="toggleSelect(${row.id})">
+      </td>
+      <td><span class="${getGradeClass(row.grade)}">${row.grade}</span></td>
+      <td><strong>${row.name}</strong></td>
+      <td><a class="website" href="${row.url}" target="_blank">${row.url.replace('https://','').replace('http://','')}</a></td>
+      <td>
+        <div class="toggle-group">
+          <label class="toggle">
+            <input type="checkbox" ${row.hasSite ? 'checked' : ''} onchange="toggleSite(${row.id})">
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label">${row.hasSite ? 'Yes' : 'No'}</span>
+        </div>
+      </td>
+      <td>${row.quality}/10</td>
+      <td><span class="${getPriorityClass(row.priority)}">${getPriorityLabel(row.priority)}</span></td>
+      <td>
+        <div class="issues">
+          ${row.issues.length > 0 ? row.issues.map(i => `<span class="issue">${i}</span>`).join('') : '<span style="color:var(--text-muted);font-size:0.7rem;">—</span>'}
+        </div>
+      </td>
+      <td>
+        <input class="notes-input" type="text" value="${row.notes || ''}" 
+          placeholder="Add note..." 
+          onchange="updateNotes(${row.id}, this.value)">
+      </td>
+      <td>
+        <div class="actions">
+          ${row.grade !== 'A' ? `<a href="/demos/ristorante/casaalberto/" class="btn btn-primary" target="_blank">Demo</a>` : ''}
+          ${row.grade === 'F' ? `<button class="btn btn-danger btn-sm" onclick="markNoSite(${row.id})">❌ No Site</button>` : ''}
+        </div>
+      </td>
+    </tr>
+  `).join('');
+
+  // Update stats
+  const fCount = data.filter(d => d.grade === 'F').length;
+  const cdCount = data.filter(d => d.grade === 'C' || d.grade === 'D').length;
+  const abCount = data.filter(d => d.grade === 'A' || d.grade === 'B').length;
+  const selCount = data.filter(d => d.selected).length;
+  const noSiteCount = data.filter(d => !d.hasSite).length;
+
+  document.getElementById('stat-f').textContent = fCount;
+  document.getElementById('stat-cd').textContent = cdCount;
+  document.getElementById('stat-ab').textContent = abCount;
+  document.getElementById('stat-contact').textContent = selCount;
+  document.getElementById('stat-no-site').textContent = noSiteCount;
+  document.getElementById('selected-count').textContent = selCount;
+  document.getElementById('selected-btn-count').textContent = selCount;
+  document.getElementById('total-count').textContent = data.length;
+}
+
+function markNoSite(id) {
+  const row = data.find(d => d.id === id);
+  if (row) { row.hasSite = false; row.grade = 'F'; row.priority = 'high'; saveData(); render(); }
+}
+
+// ─── DEMO TEMPLATES ───
+const demos = [
+  {
+    name: 'Trattoria Da Marco — Italian',
+    type: 'Italian',
+    desc: 'Wood-fired pizza, pasta, wine list, dark luxury, Fraunces typography',
+    price: 'From €200 · €30/mo AI extras',
+    url: '/demos/ristorante/italian/',
+    status: 'done',
+  },
+  {
+    name: 'The Argentine Grill — Steakhouse',
+    type: 'Steakhouse',
+    desc: 'Dark moody, premium cuts, dry-aged beef, Malbec wine list',
+    price: 'From €250 · €30/mo AI extras',
+    url: '/demos/ristorante/steakhouse/',
+    status: 'done',
+  },
+  {
+    name: 'Maharaja Spice — Indian',
+    type: 'Indian',
+    desc: 'Rich warm tones, tandoor section, thali specials, butter chicken',
+    price: 'From €200 · €30/mo AI extras',
+    url: '/demos/ristorante/indian/',
+    status: 'done',
+  },
+  {
+    name: 'Kaito Sushi — Japanese',
+    type: 'Japanese / Omakase',
+    desc: 'Minimal Japanese aesthetic, horizontal scrolling menu, omakase feature, dark ink tones',
+    price: 'From €200 · €30/mo AI extras',
+    url: '/demos/ristorante/sushi/',
+    status: 'done',
+  },
+  {
+    name: 'Pizzeria da Marco — Pizza',
+    type: 'Pizza / Casual',
+    desc: 'Italian flag accent, wood-fired pizza, pasta section, Fraunces typography',
+    price: 'From €150 · €30/mo AI extras',
+    url: '/demos/ristorante/pizza/',
+    status: 'done',
+  }
+];
+
+function renderDemos() {
+  const grid = document.getElementById('demos-grid');
+  grid.innerHTML = demos.map(d => `
+    <div class="demo-card">
+      <div class="demo-preview">
+        ${d.preview ? `<img src="${d.preview}" alt="${d.name}">` : `<span class="demo-label">${d.type}</span>`}
+      </div>
+      <div class="demo-info">
+        <div class="demo-name">${d.name}</div>
+        <span class="demo-status ${d.status === 'done' ? 'done' : 'building'}">${d.status === 'done' ? '✅ Live' : '🚧 Building'}</span>
+        <div class="demo-desc">${d.desc}</div>
+        <div class="demo-price">${d.price}</div>
+        ${d.url !== '#' ? `<a href="${d.url}" class="btn btn-primary" target="_blank">View Demo</a>` : `<button class="btn btn-outline" disabled>Coming Soon</button>`}
+      </div>
+    </div>
+  `).join('');
+}
+
+// Initial render
+render();
+</script>
+</body>
+</html>
diff --git a/demos/ristorante/casaalberto/index.html b/demos/ristorante/casaalberto/index.html
new file mode 100644
index 0000000..d8d9962
--- /dev/null
+++ b/demos/ristorante/casaalberto/index.html
@@ -0,0 +1,387 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Casa Alberto — Benalmádena</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root { --bg-dark: #0c0a09; --bg-card: #1c1917; --gold: #d4a853; --gold-light: #e8c07d; --cream: #f5f0e8; --text: #e8e0d5; --text-muted: #a09080; }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'Lato', sans-serif; background: var(--bg-dark); color: var(--text); line-height: 1.6; overflow-x: hidden; }
+
+    nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
+    nav.scrolled { background: rgba(12,10,9,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,83,0.15); }
+    .nav-logo { font-family: 'Dancing Script', cursive; font-size: 1.8rem; color: var(--gold); text-decoration: none; }
+    .nav-links { display: flex; gap: 2rem; list-style: none; }
+    .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--gold); }
+    .nav-cta { background: var(--gold); color: var(--bg-dark) !important; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700 !important; }
+    .nav-cta:hover { background: var(--gold-light) !important; }
+
+    .hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+    .hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,10,9,0.25) 0%, rgba(12,10,9,0.65) 55%, rgba(12,10,9,1) 100%), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=80') center/cover no-repeat; }
+    .hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
+    .hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
+    .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; color: var(--cream); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
+    .hero-subtitle { font-family: 'Dancing Script', cursive; font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
+    .hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
+    .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
+    .btn-primary { background: var(--gold); color: var(--bg-dark); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
+    .btn-ghost { border: 1px solid rgba(212,168,83,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-ghost:hover { border-color: var(--gold); background: rgba(212,168,83,0.08); }
+    .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0; animation: fadeUp 0.8s 1.2s forwards; }
+    .scroll-indicator span { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), transparent); margin: 0 auto; animation: scrollPulse 2s infinite; }
+
+    section { padding: 6rem 2rem; }
+    .container { max-width: 1100px; margin: 0 auto; }
+    .section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 0.5rem; }
+    .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
+    .section-title em { font-style: italic; color: var(--gold); }
+
+    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
+    .about-img { position: relative; border-radius: 4px; overflow: hidden; }
+    .about-img img { width: 100%; height: 500px; object-fit: cover; display: block; }
+    .about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
+    .about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
+    .about-text p { color: var(--text-muted); margin-bottom: 1.2rem; font-size: 0.95rem; }
+    .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2rem; }
+    .about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text); }
+    .about-feature .icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(212,168,83,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .about-feature .icon svg { width: 10px; height: 10px; fill: var(--gold); }
+
+    #menu { background: var(--bg-card); }
+    .menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; flex-wrap: wrap; }
+    .menu-tab { padding: 0.6rem 1.8rem; border: 1px solid rgba(212,168,83,0.2); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; font-family: 'Lato', sans-serif; }
+    .menu-tab:first-child { border-radius: 2px 0 0 2px; }
+    .menu-tab:last-child { border-radius: 0 2px 2px 0; }
+    .menu-tab.active, .menu-tab:hover { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }
+    .menu-category { display: none; }
+    .menu-category.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+    .menu-item { display: flex; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(212,168,83,0.08); }
+    .menu-item-img { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
+    .menu-item-info { flex: 1; }
+    .menu-item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; gap: 1rem; }
+    .menu-item-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--cream); }
+    .menu-item-price { font-size: 0.95rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
+    .menu-item-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
+
+    .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 250px 250px; gap: 0.5rem; }
+    .gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; transition: transform 0.4s, opacity 0.4s; cursor: pointer; }
+    .gallery-grid img:hover { transform: scale(1.03); opacity: 0.85; }
+    .gallery-grid img:first-child { grid-row: span 2; }
+
+    #location { background: var(--bg-card); }
+    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
+    .info-block h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 1.5rem; }
+    .hours-table { width: 100%; }
+    .hours-table tr { border-bottom: 1px solid rgba(212,168,83,0.08); }
+    .hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
+    .hours-table td:first-child { color: var(--text-muted); }
+    .hours-table td:last-child { color: var(--text); text-align: right; }
+    .hours-table tr:last-child { border: none; }
+    .address { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; margin-top: 1rem; }
+    .address strong { color: var(--gold); font-weight: 400; }
+
+    footer { background: #080604; padding: 4rem 2rem 2rem; text-align: center; }
+    .footer-logo { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; }
+    footer p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
+
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes scrollPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; transform: scaleY(1.2); } }
+    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
+    .reveal.visible { opacity: 1; transform: translateY(0); }
+
+    @media (max-width: 768px) {
+      .nav-links { display: none; }
+      .about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
+      .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
+      .gallery-grid img:first-child { grid-row: span 1; }
+      .about-img::after { display: none; }
+      .about-img img { height: 300px; }
+      .about-features { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 480px) {
+      section { padding: 4rem 1.2rem; }
+      .hero-btns { flex-direction: column; align-items: center; }
+      .btn-primary, .btn-ghost { width: 100%; text-align: center; }
+    }
+  </style>
+</head>
+<body>
+
+  <nav id="navbar">
+    <a href="#" class="nav-logo">Casa Alberto</a>
+    <ul class="nav-links">
+      <li><a href="#about">About</a></li>
+      <li><a href="#menu">Menu</a></li>
+      <li><a href="#gallery">Gallery</a></li>
+      <li><a href="#location">Visit</a></li>
+      <li><a href="#location" class="nav-cta">Reserve</a></li>
+    </ul>
+  </nav>
+
+  <section class="hero">
+    <div class="hero-bg"></div>
+    <div class="hero-content">
+      <p class="hero-tag">✦ Benalmádena Costa ✦</p>
+      <h1>Casa Alberto</h1>
+      <p class="hero-subtitle">Good food, good company</p>
+      <p class="hero-desc">Traditional Spanish cuisine in the heart of Benalmádena. Fresh ingredients, authentic recipes, and a warm welcome every day.</p>
+      <div class="hero-btns">
+        <a href="#menu" class="btn-primary">View Menu</a>
+        <a href="#location" class="btn-ghost">Reserve a Table</a>
+      </div>
+    </div>
+    <div class="scroll-indicator"><span></span></div>
+  </section>
+
+  <section id="about">
+    <div class="container">
+      <div class="about-grid">
+        <div class="about-img reveal">
+          <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80" alt="Restaurant interior" loading="lazy">
+        </div>
+        <div class="about-text reveal">
+          <p class="section-tag">Our Story</p>
+          <h3>A local favourite for over 20 years</h3>
+          <p>Casa Alberto has been serving the Benalmádena community since 2003. What started as a family kitchen has grown into one of the coast's most trusted spots for authentic Spanish cooking.</p>
+          <p>We use fresh, local ingredients sourced daily from the market. Our paella is made the traditional way — slow-cooked on an open flame, with saffron and love. Whether it's a Sunday roast or a quick tapas lunch, you'll always feel at home here.</p>
+          <p>Drop in anytime. There's always a table waiting for you.</p>
+          <div class="about-features">
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Fresh market ingredients</div>
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Traditional recipes</div>
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Homemade paella</div>
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Family atmosphere</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="menu">
+    <div class="container">
+      <p class="section-tag">Our Menu</p>
+      <h2 class="section-title">Taste <em>Spain</em></h2>
+
+      <div class="menu-tabs">
+        <button class="menu-tab active" onclick="showMenu('tapas')">Tapas</button>
+        <button class="menu-tab" onclick="showMenu('carnes')">Carnes</button>
+        <button class="menu-tab" onclick="showMenu('pescado')">Pescado</button>
+        <button class="menu-tab" onclick="showMenu('paella')">Paella</button>
+        <button class="menu-tab" onclick="showMenu('postres')">Postres</button>
+      </div>
+
+      <div class="menu-grid">
+        <div class="menu-category active" id="menu-tapas">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1541529086526-db283c563270?w=200&q=70" alt="Patatas Bravas" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Patatas Bravas</span><span class="menu-item-price">€6.00</span></div>
+              <p class="menu-item-desc">Crispy fried potatoes, spicy bravas sauce, aioli</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=200&q=70" alt="Jamón Ibérico" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Jamón Ibérico de Bellota</span><span class="menu-item-price">€14.00</span></div>
+              <p class="menu-item-desc">Thinly sliced acorn-fed Iberian ham, picos bread</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1625944525533-473f1a3d54e7?w=200&q=70" alt="Croquetas" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Croquetas de Jamón</span><span class="menu-item-price">€7.50</span></div>
+              <p class="menu-item-desc">Homemade ham croquettes, crispy exterior, creamy interior</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1563714948775-8f0b85b9c72f?w=200&q=70" alt="Gambas al Ajillo" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Gambas al Ajillo</span><span class="menu-item-price">€10.00</span></div>
+              <p class="menu-item-desc">Prawns cooked in garlic and chili, olive oil, white wine</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-carnes">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1558030006-450675393462?w=200&q=70" alt="Solomillo" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Solomillo al Whisky</span><span class="menu-item-price">€16.00</span></div>
+              <p class="menu-item-desc">Pork tenderloin in whisky sauce, caramelised onions</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=200&q=70" alt="Entrecot" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Entrecot a la Parrilla</span><span class="menu-item-price">€19.00</span></div>
+              <p class="menu-item-desc">Grilled ribeye, roasted peppers, chips, garlic butter</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=200&q=70" alt="Pollo" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Pollo al Ajillo</span><span class="menu-item-price">€12.00</span></div>
+              <p class="menu-item-desc">Chicken pieces cooked in garlic, white wine, herbs</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-pescado">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?w=200&q=70" alt="Bacalao" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Bacalao a la Miel</span><span class="menu-item-price">€15.00</span></div>
+              <p class="menu-item-desc">Cod loin, honey glaze, baked until golden</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1485921325833-c519f76c4927?w=200&q=70" alt="Fritura" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Fritura Malagueña</span><span class="menu-item-price">€13.00</span></div>
+              <p class="menu-item-desc">Mixed fried fish — sardines, calamari, shrimp, aioli</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=200&q=70" alt="Atún" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Atún de Almadraba</span><span class="menu-item-price">€17.00</span></div>
+              <p class="menu-item-desc">Fresh bluefin tuna, grilled with olive oil and herbs</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-paella">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1534080564583-6be75777b70a?w=200&q=70" alt="Paella" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Paella Valenciana</span><span class="menu-item-price">€12.00</span></div>
+              <p class="menu-item-desc">Chicken, rabbit, green beans, butter beans, saffron. For 2 persons minimum.</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1534482421-64566f976cfa?w=200&q=70" alt="Arroz Negro" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Arroz Negro</span><span class="menu-item-price">€13.00</span></div>
+              <p class="menu-item-desc">Black rice with cuttlefish, squid, ink, aioli. For 2 persons minimum.</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=200&q=70" alt="Arroz delSeñor" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Arroz delSeñor</span><span class="menu-item-price">€14.00</span></div>
+              <p class="menu-item-desc">Seafood paella — prawns, mussels, squid, monkfish. For 2 persons minimum.</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-postres">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200&q=70" alt="Tarta" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Tarta de Queso Casera</span><span class="menu-item-price">€6.00</span></div>
+              <p class="menu-item-desc">Homemade Basque burnt cheesecake</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=200&q=70" alt="Flan" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Flan Casero</span><span class="menu-item-price">€4.50</span></div>
+              <p class="menu-item-desc">Traditional caramel custard, homemade daily</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?w=200&q=70" alt="Churros" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Churros con Chocolate</span><span class="menu-item-price">€5.00</span></div>
+              <p class="menu-item-desc">Fresh churros, thick hot chocolate for dipping</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="gallery">
+    <div class="container">
+      <p class="section-tag">Gallery</p>
+      <h2 class="section-title">Our <em>Place</em></h2>
+      <div class="gallery-grid reveal">
+        <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=600&q=80" alt="Restaurant interior" loading="lazy">
+        <img src="https://images.unsplash.com/photo-1534080564583-6be75777b70a?w=400&q=80" alt="Paella" loading="lazy">
+        <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&q=80" alt="Dining" loading="lazy">
+        <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=400&q=80" alt="Plated food" loading="lazy">
+        <img src="https://images.unsplash.com/photo-1579684947550-22e945225d9a?w=400&q=80" alt="Wine" loading="lazy">
+      </div>
+    </div>
+  </section>
+
+  <section id="location">
+    <div class="container">
+      <p class="section-tag">Visit Us</p>
+      <h2 class="section-title">Find Your Way to <em>Casa Alberto</em></h2>
+      <div class="info-grid">
+        <div class="info-block reveal">
+          <h3>Opening Hours</h3>
+          <table class="hours-table">
+            <tr><td>Monday</td><td>12:00 — 23:00</td></tr>
+            <tr><td>Tuesday</td><td>12:00 — 23:00</td></tr>
+            <tr><td>Wednesday</td><td>12:00 — 23:00</td></tr>
+            <tr><td>Thursday</td><td>12:00 — 23:00</td></tr>
+            <tr><td>Friday — Saturday</td><td>12:00 — 00:00</td></tr>
+            <tr><td>Sunday</td><td>12:00 — 23:00</td></tr>
+          </table>
+          <div class="address">
+            <p><strong>📍 Address</strong></p>
+            <p>Av. Antonio Machado, 108<br>29630 Benalmádena, Málaga<br>Spain</p>
+          </div>
+        </div>
+        <div class="info-block reveal">
+          <h3>Find Us on the Map</h3>
+          <div style="border-radius:4px;overflow:hidden;border:1px solid rgba(212,168,83,0.2);">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="320" style="border:0;display:block;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <p class="footer-logo">Casa Alberto</p>
+    <p>Av. Antonio Machado, 108 · 29630 Benalmádena · Spain</p>
+    <p style="margin-top:1rem; opacity: 0.4;">© 2026 Casa Alberto. Made with ❤️ in Benalmádena.</p>
+  </footer>
+
+  <script>
+    const nav = document.getElementById('navbar');
+    window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); });
+
+    function showMenu(category) {
+      document.querySelectorAll('.menu-category').forEach(el => el.classList.remove('active'));
+      document.querySelectorAll('.menu-tab').forEach(el => el.classList.remove('active'));
+      document.getElementById('menu-' + category).classList.add('active');
+      event.target.classList.add('active');
+    }
+
+    const revealEls = document.querySelectorAll('.reveal');
+    const revealObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) { entry.target.classList.add('visible'); revealObserver.unobserve(entry.target); }
+      });
+    }, { threshold: 0.1 });
+    revealEls.forEach(el => revealObserver.observe(el));
+
+    document.querySelectorAll('a[href^="#"]').forEach(a => {
+      a.addEventListener('click', e => {
+        e.preventDefault();
+        const target = document.querySelector(a.getAttribute('href'));
+        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/demos/ristorante/index.html b/demos/ristorante/index.html
new file mode 100644
index 0000000..9e2d2cd
--- /dev/null
+++ b/demos/ristorante/index.html
@@ -0,0 +1,490 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Restaurant Website Templates — HostPioneers</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #080809;
+      --bg-card: #111114;
+      --border: rgba(255,255,255,0.07);
+      --text: #f0ede8;
+      --muted: #6b6560;
+      --gold: #c9a55a;
+      --gold-dim: rgba(201,165,90,0.15);
+    }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
+    a { color: inherit; text-decoration: none; }
+
+    /* ── HEADER ── */
+    header { padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(8,8,9,0.9); backdrop-filter: blur(16px); }
+    .header-logo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
+    .header-logo span { color: var(--gold); }
+    .header-cta { background: var(--gold); color: #080809; padding: 0.55rem 1.5rem; border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.3s; }
+    .header-cta:hover { background: #e0bc72; transform: translateY(-1px); }
+
+    /* ── HERO ── */
+    .hero { padding: 10rem 3rem 6rem; max-width: 860px; margin: 0 auto; text-align: center; }
+    .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
+    .hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 300; line-height: 1.15; margin-bottom: 1.5rem; }
+    .hero h1 em { font-style: italic; color: var(--gold); }
+    .hero-desc { font-size: 0.95rem; color: var(--muted); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.8; font-weight: 300; }
+    .hero-pricing { display: inline-flex; align-items: baseline; gap: 0.5rem; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.2); padding: 0.8rem 2rem; border-radius: 2px; }
+    .hero-pricing .from { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
+    .hero-pricing .price { font-size: 1.8rem; font-weight: 700; color: var(--gold); }
+    .hero-pricing .per { font-size: 0.75rem; color: var(--muted); }
+
+    /* ── DEMOS GRID ── */
+    .demos-section { padding: 4rem 3rem 6rem; max-width: 1280px; margin: 0 auto; }
+    .demos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+    .demo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, transform 0.3s; cursor: pointer; display: block; }
+    .demo-card:hover { border-color: rgba(201,165,90,0.35); transform: translateY(-6px); }
+    .demo-card:hover .demo-img img { transform: scale(1.04); }
+    .demo-img { height: 200px; overflow: hidden; position: relative; }
+    .demo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
+    .demo-badge { position: absolute; top: 0.8rem; right: 0.8rem; background: rgba(8,8,9,0.75); backdrop-filter: blur(8px); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); padding: 0.3rem 0.7rem; border-radius: 2px; border: 1px solid rgba(201,165,90,0.2); }
+    .demo-info { padding: 1.4rem; }
+    .demo-type { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
+    .demo-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
+    .demo-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
+    .demo-link { font-size: 0.72rem; font-weight: 600; color: var(--gold); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.4rem; }
+    .demo-link::after { content: '→'; transition: transform 0.2s; }
+    .demo-card:hover .demo-link::after { transform: translateX(4px); }
+
+    /* ── WHAT'S INCLUDED ── */
+    .included-section { padding: 5rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+    .included-inner { max-width: 1100px; margin: 0 auto; }
+    .included-header { text-align: center; margin-bottom: 3rem; }
+    .included-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
+    .included-header p { font-size: 0.85rem; color: var(--muted); }
+    .included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
+    .included-item { text-align: center; padding: 1.5rem 1rem; }
+    .included-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
+    .included-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
+    .included-item h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
+    .included-item p { font-size: 0.75rem; color: var(--muted); line-height: 1.6; }
+
+    /* ── PRICING ── */
+    .pricing-section { padding: 6rem 3rem; max-width: 900px; margin: 0 auto; text-align: center; }
+    .pricing-section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
+    .pricing-section > p { font-size: 0.85rem; color: var(--muted); margin-bottom: 3rem; }
+    .pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; }
+    .pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 2rem; }
+    .pricing-card.featured { border-color: rgba(201,165,90,0.3); position: relative; }
+    .pricing-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -1px; left: 2rem; background: var(--gold); color: #080809; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.3rem 0.8rem; border-radius: 0 0 4px 4px; }
+    .pricing-card h3 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
+    .pricing-card h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }
+    .pricing-card .price { font-size: 2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.3rem; }
+    .pricing-card .price-note { font-size: 0.72rem; color: var(--muted); margin-bottom: 1.5rem; }
+    .pricing-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
+    .pricing-card li { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
+    .pricing-card li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
+
+    /* ── MONTHLY RETAINER ── */
+    .retainer-section { padding: 6rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); }
+    .retainer-inner { max-width: 1100px; margin: 0 auto; }
+    .retainer-header { text-align: center; margin-bottom: 3.5rem; }
+    .section-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
+    .retainer-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
+    .retainer-intro { font-size: 0.88rem; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.8; }
+    .retainer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
+    .retainer-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; text-align: center; transition: border-color 0.3s; position: relative; }
+    .retainer-card.featured { border-color: rgba(201,165,90,0.3); }
+    .retainer-card:hover { border-color: rgba(201,165,90,0.25); }
+    .retainer-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
+    .retainer-hours { font-size: 4rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 0.3rem; }
+    .retainer-unit { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.2rem; }
+    .retainer-price { font-size: 2.2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.2rem; }
+    .retainer-price span { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
+    .retainer-equivalent { font-size: 0.7rem; color: var(--muted); margin-bottom: 1.5rem; }
+    .retainer-features { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
+    .retainer-features li { font-size: 0.8rem; color: var(--muted); padding-left: 1.2rem; position: relative; }
+    .retainer-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; font-size: 0.7rem; }
+    .retainer-btn { background: transparent; border: 1px solid rgba(201,165,90,0.25); color: var(--gold); padding: 0.6rem 1.5rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; width: 100%; transition: all 0.3s; font-family: 'Inter', sans-serif; }
+    .retainer-btn:hover { background: rgba(201,165,90,0.08); border-color: rgba(201,165,90,0.4); }
+    .retainer-btn.primary { background: var(--gold); color: #080809; border-color: var(--gold); }
+    .retainer-btn.primary:hover { background: #e0bc72; }
+    .retainer-note { text-align: center; font-size: 0.75rem; color: var(--muted); max-width: 500px; margin: 0 auto; line-height: 1.7; }
+
+    /* ── CONTACT FORM ── */
+    .contact-section { padding: 6rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); }
+    .contact-inner { max-width: 640px; margin: 0 auto; }
+    .contact-header { text-align: center; margin-bottom: 2.5rem; }
+    .contact-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
+    .contact-header p { font-size: 0.85rem; color: var(--muted); }
+    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+    .form-full { grid-column: 1 / -1; }
+    .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
+    .form-group label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
+    .form-group input, .form-group select, .form-group textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.85rem; padding: 0.7rem 0.9rem; width: 100%; transition: border-color 0.2s; }
+    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: rgba(201,165,90,0.4); }
+    .form-group textarea { resize: vertical; min-height: 100px; }
+    .form-submit { background: var(--gold); color: #080809; border: none; padding: 0.9rem 2.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; width: 100%; margin-top: 1rem; transition: all 0.3s; font-family: 'Inter', sans-serif; }
+    .form-submit:hover { background: #e0bc72; transform: translateY(-1px); }
+    .form-note { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 0.8rem; }
+
+    /* ── FOOTER ── */
+    footer { padding: 2.5rem 3rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
+    footer p { font-size: 0.72rem; color: var(--muted); }
+    footer a { color: var(--gold); }
+
+    /* ── SUCCESS STATE ── */
+    .form-success { display: none; text-align: center; padding: 3rem; }
+    .form-success.show { display: block; }
+    .form-success h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
+    .form-success p { color: var(--muted); font-size: 0.85rem; }
+
+    /* ── RESPONSIVE ── */
+    @media (max-width: 900px) {
+      .demos-grid { grid-template-columns: repeat(2, 1fr); }
+      .included-grid { grid-template-columns: repeat(2, 1fr); }
+      .pricing-cards { grid-template-columns: 1fr; }
+      .retainer-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
+      header { padding: 1.2rem 1.5rem; }
+      .hero { padding: 8rem 1.5rem 4rem; }
+      .demos-section, .included-section, .pricing-section, .retainer-section, .contact-section { padding-left: 1.5rem; padding-right: 1.5rem; }
+      .form-grid { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 600px) {
+      .demos-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+
+<header>
+  <div class="header-logo">Host<span>Pioneers</span> — Restaurant Templates</div>
+  <button class="header-cta" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Get Your Website</button>
+</header>
+
+<!-- HERO -->
+<section class="hero">
+  <p class="hero-eyebrow">6 Restaurant Templates — Ready Now</p>
+  <h1>Your restaurant.<br><em>Online. Professional.</em><br>Ready to impress.</h1>
+  <p class="hero-desc">Beautiful, mobile-ready websites built for independent restaurants. Custom design, not templates. Includes hosting, domain setup, and AI menu extras.</p>
+  <div class="hero-pricing">
+    <span class="from">From</span>
+    <span class="price">€199</span>
+    <span class="per">one-time setup</span>
+  </div>
+</section>
+
+<!-- DEMOS -->
+<section class="demos-section">
+  <div class="demos-grid">
+
+    <a href="/demos/ristorante/italian/" class="demo-card" target="_blank">
+      <div class="demo-img">
+        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&q=80" alt="Italian restaurant" loading="lazy">
+        <span class="demo-badge">Italian</span>
+      </div>
+      <div class="demo-info">
+        <p class="demo-type">Italian · Pizza · Pasta</p>
+        <h4 class="demo-name">Trattoria Da Marco</h4>
+        <p class="demo-desc">Wood-fired pizza, handmade pasta, wine list. Dark luxury aesthetic with Fraunces typography.</p>
+        <div class="demo-link">View Template</div>
+      </div>
+    </a>
+
+    <a href="/demos/ristorante/steakhouse/" class="demo-card" target="_blank">
+      <div class="demo-img">
+        <img src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=600&q=80" alt="Steakhouse" loading="lazy">
+        <span class="demo-badge">Steakhouse</span>
+      </div>
+      <div class="demo-info">
+        <p class="demo-type">Steakhouse · Grill · Wine</p>
+        <h4 class="demo-name">The Argentine Grill</h4>
+        <p class="demo-desc">Premium dry-aged cuts, Malbec wine list, open-fire aesthetic. Bold, moody, sophisticated.</p>
+        <div class="demo-link">View Template</div>
+      </div>
+    </a>
+
+    <a href="/demos/ristorante/indian/" class="demo-card" target="_blank">
+      <div class="demo-img">
+        <img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=600&q=80" alt="Indian restaurant" loading="lazy">
+        <span class="demo-badge">Indian</span>
+      </div>
+      <div class="demo-info">
+        <p class="demo-type">Indian · Tandoor · Curry</p>
+        <h4 class="demo-name">Maharaja Spice</h4>
+        <p class="demo-desc">Rich warm tones, tandoor section, thali specialties, butter chicken focus. Warm and inviting.</p>
+        <div class="demo-link">View Template</div>
+      </div>
+    </a>
+
+    <a href="/demos/ristorante/spanish/" class="demo-card" target="_blank">
+      <div class="demo-img">
+        <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80" alt="Spanish restaurant" loading="lazy">
+        <span class="demo-badge">Spanish</span>
+      </div>
+      <div class="demo-info">
+        <p class="demo-type">Spanish · Tapas · Mediterranean</p>
+        <h4 class="demo-name">La Bodega del Mar</h4>
+        <p class="demo-desc">Light Mediterranean aesthetic, tapas grid, sherry and wine list, paella specials, beach vibes.</p>
+        <div class="demo-link">View Template</div>
+      </div>
+    </a>
+
+    <a href="/demos/ristorante/sushi/" class="demo-card" target="_blank">
+      <div class="demo-img">
+        <img src="https://images.unsplash.com/photo-1553621042-f6e147245754?w=600&q=80" alt="Japanese restaurant" loading="lazy">
+        <span class="demo-badge">Japanese</span>
+      </div>
+      <div class="demo-info">
+        <p class="demo-type">Japanese · Omakase · Izakaya</p>
+        <h4 class="demo-name">Kaito Sushi</h4>
+        <p class="demo-desc">Editorial minimal design with Japanese typography. Horizontal scrolling menu, omakase feature section.</p>
+        <div class="demo-link">View Template</div>
+      </div>
+    </a>
+
+    <a href="/demos/ristorante/pizza/" class="demo-card" target="_blank">
+      <div class="demo-img">
+        <img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=600&q=80" alt="Pizza restaurant" loading="lazy">
+        <span class="demo-badge">Pizza</span>
+      </div>
+      <div class="demo-info">
+        <p class="demo-type">Pizza · Casual · Italian</p>
+        <h4 class="demo-name">Pizzeria da Marco</h4>
+        <p class="demo-desc">Italian flag accent, wood-fired menu, pasta section. Casual but premium, great for delivery.</p>
+        <div class="demo-link">View Template</div>
+      </div>
+    </a>
+
+  </div>
+</section>
+
+<!-- WHAT'S INCLUDED -->
+<section class="included-section">
+  <div class="included-inner">
+    <div class="included-header">
+      <h2>Everything included</h2>
+      <p>One price. No surprises. Your site live in days.</p>
+    </div>
+    <div class="included-grid">
+      <div class="included-item">
+        <div class="included-icon">
+          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+        </div>
+        <h4>Custom Design</h4>
+        <p>Built for your restaurant type — not a generic template</p>
+      </div>
+      <div class="included-item">
+        <div class="included-icon">
+          <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
+        </div>
+        <h4>Mobile Ready</h4>
+        <p>Perfect on every device — phone, tablet, desktop</p>
+      </div>
+      <div class="included-item">
+        <div class="included-icon">
+          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        </div>
+        <h4>AI Menu Chat</h4>
+        <p>Customers ask the menu in plain language, AI answers</p>
+      </div>
+      <div class="included-item">
+        <div class="included-icon">
+          <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+        </div>
+        <h4>Email Support</h4>
+        <p>Direct line to us — fast replies, no bots</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- PRICING -->
+<section class="pricing-section">
+  <h2>Website setup — one time</h2>
+  <p>Choose your template tier. All include hosting for year one.</p>
+  <div class="pricing-cards">
+    <div class="pricing-card">
+      <h3>Essential</h3>
+      <h4>Your Restaurant Website</h4>
+      <div class="price">€499</div>
+      <div class="price-note">One-time · then €25/mo hosting</div>
+      <ul>
+        <li>Custom restaurant template</li>
+        <li>Menu + photos + content</li>
+        <li>Google Maps + contact form</li>
+        <li>Mobile optimised</li>
+        <li>Social media links</li>
+        <li>1 year hosting included</li>
+      </ul>
+    </div>
+    <div class="pricing-card featured">
+      <h3>Professional</h3>
+      <h4>Website + AI Extras</h4>
+      <div class="price">€699</div>
+      <div class="price-note">One-time · then €30/mo all-in</div>
+      <ul>
+        <li>Everything in Essential</li>
+        <li>AI menu chatbot (24/7)</li>
+        <li>AI booking assistant</li>
+        <li>Multi-language menu option</li>
+        <li>Priority support line</li>
+        <li>1 year hosting included</li>
+      </ul>
+    </div>
+  </div>
+</section>
+
+<!-- MONTHLY RETAINER -->
+<section class="retainer-section">
+  <div class="retainer-inner">
+    <div class="retainer-header">
+      <p class="section-eyebrow">Monthly Support Retainer</p>
+      <h2>Keep your site fresh — prepaid hours</h2>
+      <p class="retainer-intro">Need menu updates, seasonal changes, new photos, or new sections? Prepay hours and use them when you need. Cancel anytime — no lock-in.</p>
+    </div>
+    <div class="retainer-grid">
+      <div class="retainer-card">
+        <div class="retainer-badge">Starter</div>
+        <div class="retainer-hours">2</div>
+        <div class="retainer-unit">hours / month</div>
+        <div class="retainer-price">€69<span>/mo</span></div>
+        <div class="retainer-equivalent">≈ €35/hr</div>
+        <ul class="retainer-features">
+          <li>Menu updates</li>
+          <li>Seasonal changes</li>
+          <li>Photo swaps</li>
+          <li>Email support</li>
+        </ul>
+        <button class="retainer-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Starter</button>
+      </div>
+      <div class="retainer-card featured">
+        <div class="retainer-badge">Standard</div>
+        <div class="retainer-hours">4</div>
+        <div class="retainer-unit">hours / month</div>
+        <div class="retainer-price">€119<span>/mo</span></div>
+        <div class="retainer-equivalent">≈ €30/hr</div>
+        <ul class="retainer-features">
+          <li>Everything in Starter</li>
+          <li>New menu sections</li>
+          <li>Layout adjustments</li>
+          <li>New pages (about, events)</li>
+          <li>Priority response</li>
+        </ul>
+        <button class="retainer-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Standard</button>
+      </div>
+      <div class="retainer-card">
+        <div class="retainer-badge">Pro</div>
+        <div class="retainer-hours">8</div>
+        <div class="retainer-unit">hours / month</div>
+        <div class="retainer-price">€219<span>/mo</span></div>
+        <div class="retainer-equivalent">≈ €27/hr</div>
+        <ul class="retainer-features">
+          <li>Everything in Standard</li>
+          <li>Full page redesigns</li>
+          <li>New features + integrations</li>
+          <li>AI training for your restaurant</li>
+          <li>Dedicated Slack channel</li>
+        </ul>
+        <button class="retainer-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Pro</button>
+      </div>
+    </div>
+    <p class="retainer-note">Unused hours roll over to next month. Cancel anytime by sending one email. No contracts, no lock-in.</p>
+  </div>
+</section>
+
+<!-- CONTACT FORM -->
+<section class="contact-section" id="contact">
+  <div class="contact-inner">
+    <div class="contact-header">
+      <h2>Start your website</h2>
+      <p>Tell us about your restaurant — we'll be in touch within 24 hours.</p>
+    </div>
+
+    <form id="contactForm" onsubmit="handleSubmit(event)">
+      <div class="form-grid">
+        <div class="form-group">
+          <label>Restaurant Name</label>
+          <input type="text" name="restaurant" placeholder="La Casa Grande" required>
+        </div>
+        <div class="form-group">
+          <label>Contact Name</label>
+          <input type="text" name="name" placeholder="Javier" required>
+        </div>
+        <div class="form-group">
+          <label>Phone</label>
+          <input type="tel" name="phone" placeholder="+34 600 000 000">
+        </div>
+        <div class="form-group">
+          <label>Email</label>
+          <input type="email" name="email" placeholder="javier@lacasa.es" required>
+        </div>
+        <div class="form-group form-full">
+          <label>Restaurant Type</label>
+          <select name="type">
+            <option value="">Select type...</option>
+            <option value="spanish">Spanish / Tapas</option>
+            <option value="italian">Italian / Pizza / Pasta</option>
+            <option value="steakhouse">Steakhouse / Grill</option>
+            <option value="indian">Indian / Asian</option>
+            <option value="sushi">Japanese / Sushi</option>
+            <option value="seafood">Seafood</option>
+            <option value="other">Fusion / Other</option>
+          </select>
+        </div>
+        <div class="form-group form-full">
+          <label>Tell us about your restaurant (optional)</label>
+          <textarea name="message" placeholder="What kind of cuisine? Do you have an existing website? Any special features you need?"></textarea>
+        </div>
+      </div>
+      <button type="submit" class="form-submit">Send Enquiry</button>
+      <p class="form-note">No spam. No commitment. Just a real conversation.</p>
+    </form>
+
+    <div class="form-success" id="formSuccess">
+      <h3>Message sent!</h3>
+      <p>We'll be in touch within 24 hours. Check your email.</p>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <p>© 2026 HostPioneers.com — HostPioneers, Benalmádena Costa</p>
+  <p><a href="https://hostpioneers.com">hostpioneers.com</a></p>
+</footer>
+
+<script>
+function handleSubmit(e) {
+  e.preventDefault();
+  const form = document.getElementById('contactForm');
+  const success = document.getElementById('formSuccess');
+  const submitBtn = form.querySelector('.form-submit');
+  const data = new FormData(form);
+
+  // Show loading state
+  submitBtn.textContent = 'Sending…';
+  submitBtn.disabled = true;
+
+  // Send to Telegram HP Alerts in background
+  fetch('/autojobs/api/contact/telegram', {
+    method: 'POST',
+    body: new URLSearchParams({
+      name:       data.get('name'),
+      email:      data.get('email'),
+      phone:      data.get('phone'),
+      type:       data.get('type') || 'other',
+      restaurant: data.get('restaurant'),
+      message:    data.get('message')
+    })
+  }).catch(function() {
+    // Telegram failure is non-fatal — user still sees success
+  }).finally(function() {
+    // Always show success regardless of Telegram result
+    form.style.display = 'none';
+    success.classList.add('show');
+    success.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  });
+}
+</script>
+
+</body>
+</html>
diff --git a/demos/ristorante/indian/index.html b/demos/ristorante/indian/index.html
new file mode 100644
index 0000000..b463207
--- /dev/null
+++ b/demos/ristorante/indian/index.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Maharaja Spice — Indian Restaurant Benalmádena</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root { --bg: #0f0a08; --bg-card: #1c1410; --bg-warm: #231a14; --gold: #d4a843; --gold-light: #e8c97a; --red: #c0392b; --maroon: #6b1e1e; --cream: #f5efe6; --text: #e0d5c8; --text-muted: #9a8a78; }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
+
+    /* DECORATIVE MANDALA PATTERN */
+    .mandala-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,0.12) 0%, transparent 70%); pointer-events: none; }
+
+    /* NAV */
+    nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
+    nav.scrolled { background: rgba(15,10,8,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,67,0.15); }
+    .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--gold); font-weight: 700; text-decoration: none; letter-spacing: 0.05em; }
+    .nav-links { display: flex; gap: 2rem; list-style: none; }
+    .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--gold); }
+    .nav-cta { background: var(--maroon); color: var(--gold); padding: 0.5rem 1.2rem; border: 1px solid var(--gold); border-radius: 2px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
+    .nav-cta:hover { background: var(--gold); color: var(--bg); text-decoration: none; }
+
+    /* HERO */
+    .hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+    .hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,10,8,0.3) 0%, rgba(15,10,8,0.85) 65%, var(--bg) 100%), url('https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=1600&q=80') center/cover no-repeat; }
+    .hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
+    .hero-ornament { color: var(--gold); font-size: 1.5rem; margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
+    .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 1.0; color: var(--cream); margin-bottom: 0.3rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
+    .hero-subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
+    .hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 520px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
+    .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
+    .btn-primary { background: var(--gold); color: var(--bg); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
+    .btn-ghost { border: 1px solid rgba(212,168,67,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-ghost:hover { border-color: var(--gold); background: rgba(212,168,67,0.08); text-decoration: none; }
+
+    section { padding: 6rem 2rem; }
+    .container { max-width: 1100px; margin: 0 auto; }
+    .section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 0.5rem; }
+    .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; font-weight: 700; }
+    .section-title em { font-style: italic; color: var(--gold); }
+
+    /* THALI / SPECIALTIES */
+    #specialties { background: var(--bg-card); }
+    .thali-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
+    .thali-card { background: var(--bg); border: 1px solid rgba(212,168,67,0.12); border-radius: 8px; overflow: hidden; transition: border-color 0.3s; }
+    .thali-card:hover { border-color: var(--gold); }
+    .thali-card img { width: 100%; height: 180px; object-fit: cover; }
+    .thali-info { padding: 1.2rem; }
+    .thali-info .thali-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 0.3rem; font-weight: 700; }
+    .thali-info .thali-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6rem; line-height: 1.6; }
+    .thali-info .thali-price { font-size: 1.05rem; color: var(--gold); font-weight: 700; }
+
+    /* MENU */
+    .menu-section { background: var(--bg-warm); }
+    .menu-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
+    .menu-col h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--gold); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(212,168,67,0.2); }
+    .menu-item { padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
+    .menu-item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
+    .menu-item-name { font-size: 0.9rem; color: var(--text); }
+    .menu-item-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
+    .menu-item-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
+
+    /* TANDOOR */
+    #tandoor { background: var(--bg-card); }
+    .tandoor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
+    .tandoor-img img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; }
+    .tandoor-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--cream); margin-bottom: 1rem; }
+    .tandoor-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.7; }
+    .tandoor-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
+    .tandoor-item { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(212,168,67,0.08); }
+    .tandoor-item span:first-child { color: var(--text); }
+    .tandoor-item span:last-child { color: var(--gold); font-weight: 700; }
+
+    /* REVIEWS */
+    .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
+    .review-card { background: var(--bg-card); border: 1px solid rgba(212,168,67,0.1); border-radius: 8px; padding: 1.5rem; }
+    .review-card .stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.8rem; }
+    .review-card .review-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
+    .review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
+
+    /* LOCATION */
+    #location { background: var(--bg-card); }
+    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
+    .hours-table { width: 100%; }
+    .hours-table tr { border-bottom: 1px solid rgba(212,168,67,0.08); }
+    .hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
+    .hours-table td:first-child { color: var(--text-muted); }
+    .hours-table td:last-child { color: var(--text); text-align: right; }
+    .address-block { margin-top: 2rem; }
+    .address-block p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
+    .address-block strong { color: var(--gold); font-weight: 400; }
+
+    /* FOOTER */
+    footer { background: #080504; padding: 4rem 2rem 2rem; text-align: center; }
+    .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: var(--gold); font-weight: 700; margin-bottom: 0.5rem; }
+    .footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--text-muted); margin-bottom: 1rem; }
+    footer p { font-size: 0.8rem; color: var(--text-muted); }
+
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
+    .reveal.visible { opacity: 1; transform: translateY(0); }
+
+    @media (max-width: 768px) {
+      .nav-links { display: none; }
+      .menu-cols, .tandoor-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
+      .tandoor-items { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+
+<nav id="navbar">
+  <a href="#" class="nav-logo">Maharaja Spice</a>
+  <ul class="nav-links">
+    <li><a href="#specialties">Specialties</a></li>
+    <li><a href="#menu">Menu</a></li>
+    <li><a href="#tandoor">Tandoor</a></li>
+    <li><a href="#reviews">Reviews</a></li>
+    <li><a href="#location" class="nav-cta">Book a Table</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <div class="hero-bg"></div>
+  <div class="mandala-top"></div>
+  <div class="hero-content">
+    <div class="hero-ornament">✦ ✦ ✦</div>
+    <h1>Maharaja Spice</h1>
+    <p class="hero-subtitle">Royal Indian Cuisine · Benalmádena Costa</p>
+    <p class="hero-desc">Experience the flavours of India, reimagined. From the smoky clay ovens of the Punjab to the aromatic spice markets of Kerala — every dish tells a story of tradition, passion, and the finest ingredients.</p>
+    <div class="hero-btns">
+      <a href="#menu" class="btn-primary">Explore Menu</a>
+      <a href="#location" class="btn-ghost">Book a Table</a>
+    </div>
+  </div>
+</section>
+
+<section id="specialties">
+  <div class="container">
+    <p class="section-tag">Chef's Specialties</p>
+    <h2 class="section-title">Signature <em>Dishes</em></h2>
+    <div class="thali-grid">
+      <div class="thali-card reveal">
+        <img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?w=500&q=75" alt="Butter Chicken" loading="lazy">
+        <div class="thali-info">
+          <div class="thali-name">Butter Chicken</div>
+          <div class="thali-desc">Tandoor-charred chicken in a velvety tomato-cream sauce with kashmiri spices. Our most loved dish for 15 years.</div>
+          <div class="thali-price">€14.50</div>
+        </div>
+      </div>
+      <div class="thali-card reveal">
+        <img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=500&q=75" alt="Lamb Rogan Josh" loading="lazy">
+        <div class="thali-info">
+          <div class="thali-name">Lamb Rogan Josh</div>
+          <div class="thali-desc">Slow-braised lamb shoulder in aromatic Kashmiri chilli and yogurt gravy. A dish fit for royalty.</div>
+          <div class="thali-price">€16.50</div>
+        </div>
+      </div>
+      <div class="thali-card reveal">
+        <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=500&q=75" alt="Biryani" loading="lazy">
+        <div class="thali-info">
+          <div class="thali-name">Hyderabadi Biryani</div>
+          <div class="thali-desc">Fragrant basmati rice layered with spiced meat, saffron, and fried onions. Cooked dum-style in sealed clay pot.</div>
+          <div class="thali-price">€15.00</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="menu" class="menu-section">
+  <div class="container">
+    <p class="section-tag">Our Menu</p>
+    <h2 class="section-title">Taste of <em>India</em></h2>
+    <div class="menu-cols">
+      <div class="menu-col">
+        <h3>Starters</h3>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Samosa Chaat</span><span class="menu-item-price">€7.00</span></div><div class="menu-item-desc">Crispy samosas, chickpea curry, tamarind, yogurt</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Paneer Tikka</span><span class="menu-item-price">€9.50</span></div><div class="menu-item-desc">Chargrilled cottage cheese, mint chutney</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Onion Bhaji</span><span class="menu-item-price">€6.00</span></div><div class="menu-item-desc">Crispy onion fritters, mango chutney</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Chicken Tikka</span><span class="menu-item-price">€10.00</span></div><div class="menu-item-desc">Tandoor-grilled chicken, seekh chutney</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Lamb Sheek Kebab</span><span class="menu-item-price">€11.00</span></div><div class="menu-item-desc">Minced lamb, coriander, ginger, charcoal grill</div></div>
+      </div>
+      <div class="menu-col">
+        <h3>Curries</h3>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Chicken Tikka Masala</span><span class="menu-item-price">€13.50</span></div><div class="menu-item-desc">Tomato cream sauce, kashmiri spices</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Lamb Rogan Josh</span><span class="menu-item-price">€15.50</span></div><div class="menu-item-desc">Slow-braised lamb, Kashmiri chilli</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Palak Paneer</span><span class="menu-item-price">€12.00</span></div><div class="menu-item-desc">Spinach curry, fresh paneer, garlic, cumin</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Dal Makhani</span><span class="menu-item-price">€11.00</span></div><div class="menu-item-desc">Black lentils, butter, cream — slow-cooked overnight</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Prawn Curry</span><span class="menu-item-price">€16.50</span></div><div class="menu-item-desc">Tiger prawns, coconut, curry leaf, mustard seed</div></div>
+      </div>
+      <div class="menu-col">
+        <h3>Breads & Rice</h3>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Garlic Naan</span><span class="menu-item-price">€4.00</span></div><div class="menu-item-desc">Tandoor bread, fresh garlic, butter</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Butter Naan</span><span class="menu-item-price">€4.00</span></div><div class="menu-item-desc">Soft leavened bread, clarified butter</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Cheese Naan</span><span class="menu-item-price">€5.00</span></div><div class="menu-item-desc">Stuffed with cheddar and paneer</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Keema Naan</span><span class="menu-item-price">€6.00</span></div><div class="menu-item-desc">Stuffed with spiced minced lamb</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Basmati Rice</span><span class="menu-item-price">€3.50</span></div><div class="menu-item-desc">Fragrant long-grain, steamed</div></div>
+        <div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Saffron Biryani</span><span class="menu-item-price">€7.00</span></div><div class="menu-item-desc">Basmati, saffron, fried onions</div></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="tandoor">
+  <div class="container">
+    <div class="tandoor-grid">
+      <div class="tandoor-img reveal">
+        <img src="https://images.unsplash.com/photo-1596797038530-2c107229654b?w=800&q=80" alt="Tandoor oven" loading="lazy">
+      </div>
+      <div class="tandoor-text reveal">
+        <p class="section-tag">From the Clay Oven</p>
+        <h3>The Heart of Indian Cooking</h3>
+        <p>Our tandoor is a traditional Indian clay oven, burning at over 450°C. It gives our breads their distinctive char, keeps our meats impossibly tender inside, and fills the restaurant with the irresistible aroma of saffron, charcoal, and roasting spices.</p>
+        <p>Every morning our kitchen prepares fresh dough and marinates meats in our house spice blend — a recipe passed down three generations.</p>
+        <div class="tandoor-items">
+          <div class="tandoor-item"><span>Tandoori Chicken</span><span>€13.00</span></div>
+          <div class="tandoor-item"><span>Seekh Kebab</span><span>€12.00</span></div>
+          <div class="tandoor-item"><span>Paneer Tikka</span><span>€11.00</span></div>
+          <div class="tandoor-item"><span>Garlic Naan</span><span>€4.00</span></div>
+          <div class="tandoor-item"><span>Chicken Tikka</span><span>€13.50</span></div>
+          <div class="tandoor-item"><span>Lamb Chops</span><span>€16.00</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="reviews">
+  <div class="container">
+    <p class="section-tag">Reviews</p>
+    <h2 class="section-title">What Our <em>Guests</em> Say</h2>
+    <div class="reviews-grid">
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"The biryani is the best I've had outside India. Fragrant, perfectly spiced, the rice grains are separate and fluffy. The tandoori chicken had that authentic charcoal flavour. Truly exceptional."</p>
+        <div class="review-author">— Priya S., Google</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"We eat here every week. The butter chicken is consistently perfect — creamy, spiced just right, generous portions. The staff always remembers us. Feels like a home from home."</p>
+        <div class="review-author">— Michael R., TripAdvisor</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"The lamb rogan josh transported me straight to Kashmir. Slow-braised to perfection, falling off the bone. The ambiance is warm and the service is impeccable. A real find."</p>
+        <div class="review-author">— Anna K., TheFork</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="location">
+  <div class="container">
+    <p class="section-tag">Visit Us</p>
+    <h2 class="section-title">Find Your Way to <em>Maharaja Spice</em></h2>
+    <div class="info-grid">
+      <div class="reveal">
+        <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
+        <table class="hours-table">
+          <tr><td>Monday — Thursday</td><td>18:00 — 23:00</td></tr>
+          <tr><td>Friday — Saturday</td><td>18:00 — 00:00</td></tr>
+          <tr><td>Sunday</td><td>13:00 — 22:00</td></tr>
+        </table>
+        <div class="address-block">
+          <p><strong>📍 Address</strong></p>
+          <p>Av. Antonio Machado, 116<br>29630 Benalmádena Costa<br>Spain</p>
+          <p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
+          <p>+34 952 569 012<br>info@maharajaspice.es</p>
+        </div>
+      </div>
+      <div class="reveal">
+        <div style="border-radius:8px;overflow:hidden;border:1px solid rgba(212,168,67,0.2);">
+          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <p class="footer-logo">Maharaja Spice</p>
+  <p class="footer-tagline">Royal Indian Cuisine · Benalmádena Costa</p>
+  <p>Av. Antonio Machado, 116 · 29630 Benalmádena · +34 952 569 012</p>
+  <p style="margin-top:1rem;opacity:0.4;">© 2026 Maharaja Spice. All rights reserved.</p>
+</footer>
+
+<script>
+  const nav = document.getElementById('navbar');
+  window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
+  document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
+  const revealEls = document.querySelectorAll('.reveal');
+  const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
+  revealEls.forEach(el => observer.observe(el));
+</script>
+</body>
+</html>
diff --git a/demos/ristorante/italian/index.html b/demos/ristorante/italian/index.html
new file mode 100644
index 0000000..6098920
--- /dev/null
+++ b/demos/ristorante/italian/index.html
@@ -0,0 +1,457 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Trattoria Da Mario — Authentic Italian Kitchen</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root { --bg: #0a0808; --bg-card: #181412; --bg-dark: #1a1510; --cream: #f5efe6; --gold: #c9a55a; --gold-light: #dfc07a; --red: #8b1a1a; --text: #e8e0d5; --text-muted: #9a8f82; }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
+
+    /* NAV */
+    nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
+    nav.scrolled { background: rgba(10,8,8,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,165,90,0.15); }
+    .nav-logo { font-family: 'Dancing Script', cursive; font-size: 1.8rem; color: var(--gold); text-decoration: none; }
+    .nav-links { display: flex; gap: 2rem; list-style: none; }
+    .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--gold); }
+    .nav-cta { background: var(--red); color: white !important; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700 !important; }
+    .nav-cta:hover { background: #a02020 !important; }
+
+    /* HERO */
+    .hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+    .hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,8,8,0.3) 0%, rgba(10,8,8,0.7) 55%, rgba(10,8,8,1) 100%), url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1600&q=80') center/cover no-repeat; }
+    .hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
+    .hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
+    .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; color: var(--cream); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
+    .hero-subtitle { font-family: 'Dancing Script', cursive; font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
+    .hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
+    .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
+    .btn-primary { background: var(--gold); color: var(--bg); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
+    .btn-ghost { border: 1px solid rgba(201,165,90,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-ghost:hover { border-color: var(--gold); background: rgba(201,165,90,0.08); }
+
+    /* SECTIONS */
+    section { padding: 6rem 2rem; }
+    .container { max-width: 1100px; margin: 0 auto; }
+    .section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 0.5rem; }
+    .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
+    .section-title em { font-style: italic; color: var(--gold); }
+
+    /* ABOUT */
+    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
+    .about-img { position: relative; border-radius: 4px; overflow: hidden; }
+    .about-img img { width: 100%; height: 480px; object-fit: cover; display: block; }
+    .about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
+    .about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
+    .about-text p { color: var(--text-muted); margin-bottom: 1.2rem; font-size: 0.95rem; }
+    .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2rem; }
+    .about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
+    .about-feature .icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(201,165,90,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .about-feature .icon svg { width: 10px; height: 10px; fill: var(--gold); }
+
+    /* MENU */
+    #menu { background: var(--bg-card); }
+    .menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; flex-wrap: wrap; }
+    .menu-tab { padding: 0.6rem 1.8rem; border: 1px solid rgba(201,165,90,0.2); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; font-family: 'Lato', sans-serif; }
+    .menu-tab:first-child { border-radius: 2px 0 0 2px; }
+    .menu-tab:last-child { border-radius: 0 2px 2px 0; }
+    .menu-tab.active, .menu-tab:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
+    .menu-category { display: none; }
+    .menu-category.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+    .menu-item { display: flex; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(201,165,90,0.08); }
+    .menu-item-img { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
+    .menu-item-info { flex: 1; }
+    .menu-item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; gap: 1rem; }
+    .menu-item-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--cream); }
+    .menu-item-price { font-size: 0.95rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
+    .menu-item-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
+
+    /* WINE */
+    .wine-section { background: var(--bg-dark); }
+    .wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
+    .wine-item { text-align: center; padding: 1.5rem; border: 1px solid rgba(201,165,90,0.1); border-radius: 4px; }
+    .wine-item .wine-name { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--cream); margin-bottom: 0.3rem; }
+    .wine-item .wine-region { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
+    .wine-item .wine-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; }
+
+    /* REVIEWS */
+    .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
+    .review-card { background: var(--bg-card); border: 1px solid rgba(201,165,90,0.1); border-radius: 8px; padding: 1.5rem; }
+    .review-card .stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.8rem; }
+    .review-card .review-text { font-size: 0.9rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
+    .review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
+
+    /* LOCATION */
+    #location { background: var(--bg-card); }
+    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
+    .info-block h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 1.5rem; }
+    .hours-table { width: 100%; }
+    .hours-table tr { border-bottom: 1px solid rgba(201,165,90,0.08); }
+    .hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
+    .hours-table td:first-child { color: var(--text-muted); }
+    .hours-table td:last-child { color: var(--text); text-align: right; }
+    .hours-table tr:last-child { border: none; }
+    .address { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; margin-top: 1rem; }
+    .address strong { color: var(--gold); font-weight: 400; }
+
+    /* FOOTER */
+    footer { background: #060404; padding: 4rem 2rem 2rem; text-align: center; }
+    .footer-logo { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; }
+    footer p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
+
+    /* ANIMATIONS */
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
+    .reveal.visible { opacity: 1; transform: translateY(0); }
+
+    /* MOBILE */
+    @media (max-width: 768px) {
+      .nav-links { display: none; }
+      .about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
+      .about-img::after { display: none; }
+      .about-img img { height: 280px; }
+      .about-features { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 480px) {
+      section { padding: 4rem 1.2rem; }
+      .hero-btns { flex-direction: column; align-items: center; }
+      .btn-primary, .btn-ghost { width: 100%; text-align: center; }
+    }
+  </style>
+</head>
+<body>
+
+  <nav id="navbar">
+    <a href="#" class="nav-logo">Trattoria Da Mario</a>
+    <ul class="nav-links">
+      <li><a href="#about">About</a></li>
+      <li><a href="#menu">Menu</a></li>
+      <li><a href="#wine">Wine List</a></li>
+      <li><a href="#reviews">Reviews</a></li>
+      <li><a href="#location" class="nav-cta">Reserve</a></li>
+    </ul>
+  </nav>
+
+  <section class="hero">
+    <div class="hero-bg"></div>
+    <div class="hero-content">
+      <p class="hero-tag">✦ Benalmádena Costa ✦</p>
+      <h1>Trattoria<br>Da Mario</h1>
+      <p class="hero-subtitle">Nonna's kitchen, made with amore</p>
+      <p class="hero-desc">Wood-fired pizza, hand-rolled pasta, and recipes from Naples since 1995. Fresh ingredients flown in from Italy every week.</p>
+      <div class="hero-btns">
+        <a href="#menu" class="btn-primary">View Menu</a>
+        <a href="#location" class="btn-ghost">Reserve a Table</a>
+      </div>
+    </div>
+  </section>
+
+  <section id="about">
+    <div class="container">
+      <div class="about-grid">
+        <div class="about-img reveal">
+          <img src="https://images.unsplash.com/photo-1574966740793-953ad37419ca?w=800&q=80" alt="Italian chef" loading="lazy">
+        </div>
+        <div class="about-text reveal">
+          <p class="section-tag">Our Story</p>
+          <h3>Three generations of Italian cooking</h3>
+          <p>Trattoria Da Mario opened in 1995, founded by Mario Rossi who moved from Naples to the Costa del Sol. What began as a small kitchen serving the local Italian community has become Benalmádena's favourite Italian table.</p>
+          <p>Every morning, our kitchen starts with fresh pasta made by hand — just like Nonna taught Mario. Our pizzas are cooked in a traditional wood-fired oven built from Neapolitan bricks. We source our ingredients from Italy: San Marzano tomatoes, buffalo mozzarella from Campania, DOP olive oil from Liguria.</p>
+          <p>This is not fine dining. This is family cooking, served with warmth.</p>
+          <div class="about-features">
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Wood-fired oven</div>
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Fresh pasta daily</div>
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Italian imports</div>
+            <div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Family recipes</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="menu">
+    <div class="container">
+      <p class="section-tag">Our Menu</p>
+      <h2 class="section-title">The Taste of <em>Italy</em></h2>
+
+      <div class="menu-tabs">
+        <button class="menu-tab active" onclick="showMenu('antipasti')">Antipasti</button>
+        <button class="menu-tab" onclick="showMenu('pasta')">Pasta</button>
+        <button class="menu-tab" onclick="showMenu('pizza')">Pizza</button>
+        <button class="menu-tab" onclick="showMenu('secondi')">Secondi</button>
+        <button class="menu-tab" onclick="showMenu('dolci')">Dolci</button>
+      </div>
+
+      <div class="menu-grid">
+        <div class="menu-category active" id="menu-antipasti">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1541014741259-de529411b96a?w=200&q=70" alt="Bruschetta" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Bruschetta Pomodoro</span><span class="menu-item-price">€7.00</span></div>
+              <p class="menu-item-desc">Grilled ciabatta, vine tomatoes, fresh basil, garlic, extra virgin olive oil</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1608897013039-887f21d8c804?w=200&q=70" alt="Carpaccio" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Carpaccio di Manzo</span><span class="menu-item-price">€12.00</span></div>
+              <p class="menu-item-desc">Thinly sliced beef, arugula, shaved Parmigiano, truffle oil, capers</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1625944525533-473f1a3d54e7?w=200&q=70" alt="Burrata" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Burrata Pugliese</span><span class="menu-item-price">€13.50</span></div>
+              <p class="menu-item-desc">Creamy burrata, San Marzano tomatoes, 25-year balsamic, fresh basil</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1565944647579-ed1f2d7a1d22?w=200&q=70" alt="Calamari" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Calamari Fritti</span><span class="menu-item-price">€10.00</span></div>
+              <p class="menu-item-desc">Lightly fried squid rings, lemon aioli, marinara sauce</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-pasta">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=200&q=70" alt="Carbonara" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Spaghetti Carbonara</span><span class="menu-item-price">€14.00</span></div>
+              <p class="menu-item-desc">Guanciale, egg yolk, Pecorino Romano, black pepper — the Roman way</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=200&q=70" alt="Cacio e Pepe" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Tonnarelli Cacio e Pepe</span><span class="menu-item-price">€13.50</span></div>
+              <p class="menu-item-desc">Square spaghetti, Pecorino Romano, Tellicherry black pepper</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?w=200&q=70" alt="Ragù" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Pappardelle al Ragù</span><span class="menu-item-price">€15.50</span></div>
+              <p class="menu-item-desc">Wide ribbon pasta, 8-hour slow-cooked Bolognese ragù, Parmigiano</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=200&q=70" alt="Gnocchi" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Gnocchi alla Sorrentina</span><span class="menu-item-price">€13.00</span></div>
+              <p class="menu-item-desc">Potato gnocchi, tomato sauce, mozzarella di bufala, baked in oven</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-pizza">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&q=70" alt="Margherita" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Margherita DOP</span><span class="menu-item-price">€11.00</span></div>
+              <p class="menu-item-desc">San Marzano tomatoes, buffalo mozzarella, fresh basil, olive oil</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=200&q=70" alt="Diavola" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Diavola</span><span class="menu-item-price">€13.50</span></div>
+              <p class="menu-item-desc">Spicy Italian salami, San Marzano tomatoes, mozzarella, chili flakes</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=200&q=70" alt="Quattro Formaggi" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Quattro Formaggi</span><span class="menu-item-price">€13.00</span></div>
+              <p class="menu-item-desc">Mozzarella, gorgonzola, Parmigiano, taleggio — a cheese lover's dream</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?w=200&q=70" alt="Tartufo" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Pizza Tartufo</span><span class="menu-item-price">€17.00</span></div>
+              <p class="menu-item-desc">Black truffle cream, mozzarella, fresh mushrooms, truffle oil</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-secondi">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=200&q=70" alt="Branzino" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Branzino al Forno</span><span class="menu-item-price">€22.00</span></div>
+              <p class="menu-item-desc">Whole roasted sea bass, lemon, capers, olives, cherry tomatoes</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=200&q=70" alt="Bistecca" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Bistecca alla Fiorentina</span><span class="menu-item-price">€28.00</span></div>
+              <p class="menu-item-desc">500g T-bone steak, rosemary, garlic, Tuscan olive oil, grilled over oak</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="menu-category" id="menu-dolci">
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200&q=70" alt="Tiramisù" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Tiramisù della Casa</span><span class="menu-item-price">€7.00</span></div>
+              <p class="menu-item-desc">Our signature — mascarpone, espresso-soaked savoiardi, cocoa</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1606313564200-e75d5e30476c?w=200&q=70" alt="Cannoli" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Cannoli Siciliani</span><span class="menu-item-price">€6.00</span></div>
+              <p class="menu-item-desc">Crispy shells, sweet ricotta, pistachios, dark chocolate chips</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <img class="menu-item-img" src="https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=200&q=70" alt="Panna Cotta" loading="lazy">
+            <div class="menu-item-info">
+              <div class="menu-item-header"><span class="menu-item-name">Panna Cotta</span><span class="menu-item-price">€6.50</span></div>
+              <p class="menu-item-desc">Vanilla bean cream, wild berry compote, fresh mint</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="wine" class="wine-section">
+    <div class="container">
+      <p class="section-tag">Wine List</p>
+      <h2 class="section-title">A Glass of <em>Italy</em></h2>
+      <div class="wine-grid">
+        <div class="wine-item">
+          <div class="wine-name">Chianti Classico</div>
+          <div class="wine-region">Tuscany</div>
+          <div class="wine-price">from €18/bottle</div>
+        </div>
+        <div class="wine-item">
+          <div class="wine-name">Barolo DOCG</div>
+          <div class="wine-region">Piedmont</div>
+          <div class="wine-price">from €32/bottle</div>
+        </div>
+        <div class="wine-item">
+          <div class="wine-name">Prosecco di Valdobbiadene</div>
+          <div class="wine-region">Veneto</div>
+          <div class="wine-price">from €22/bottle</div>
+        </div>
+        <div class="wine-item">
+          <div class="wine-name">Montepulciano d'Abruzzo</div>
+          <div class="wine-region">Abruzzo</div>
+          <div class="wine-price">from €16/bottle</div>
+        </div>
+        <div class="wine-item">
+          <div class="wine-name">Vermentino di Sardegna</div>
+          <div class="wine-region">Sardinia</div>
+          <div class="wine-price">from €20/bottle</div>
+        </div>
+        <div class="wine-item">
+          <div class="wine-name">Amarone della Valpolicella</div>
+          <div class="wine-region">Veneto</div>
+          <div class="wine-price">from €45/bottle</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="reviews">
+    <div class="container">
+      <p class="section-tag">Reviews</p>
+      <h2 class="section-title">What Our <em>Guests</em> Say</h2>
+      <div class="reviews-grid">
+        <div class="review-card reveal">
+          <div class="stars">★★★★★</div>
+          <p class="review-text">"The best carbonara I've had outside Italy. The pasta is made fresh every day — you can taste the difference. We come here every Sunday with the family."</p>
+          <div class="review-author">— Sarah M., TripAdvisor</div>
+        </div>
+        <div class="review-card reveal">
+          <div class="stars">★★★★★</div>
+          <p class="review-text">"Found this gem by accident. The wood-fired pizza is incredible — thin crust, perfect char. The tiramisù is homemade and the best I've had in Spain."</p>
+          <div class="review-author">— James K., Google</div>
+        </div>
+        <div class="review-card reveal">
+          <div class="stars">★★★★★</div>
+          <p class="review-text">"Mario himself came out to greet us. Such warm hospitality. The burrata is heavenly and the wine list has great Italian options. A real neighbourhood trattoria."</p>
+          <div class="review-author">— Elena R., TheFork</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="location">
+    <div class="container">
+      <p class="section-tag">Visit Us</p>
+      <h2 class="section-title">Find Your Way to <em>Our Table</em></h2>
+      <div class="info-grid">
+        <div class="info-block reveal">
+          <h3>Opening Hours</h3>
+          <table class="hours-table">
+            <tr><td>Monday</td><td>Closed</td></tr>
+            <tr><td>Tuesday — Thursday</td><td>18:00 — 23:00</td></tr>
+            <tr><td>Friday — Saturday</td><td>18:00 — 00:00</td></tr>
+            <tr><td>Sunday</td><td>12:00 — 22:00</td></tr>
+          </table>
+          <div class="address">
+            <p><strong>📍 Address</strong></p>
+            <p>Av. Antonio Machado, 108<br>29630 Benalmádena Costa<br>Spain</p>
+            <p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
+            <p>+34 952 567 890</p>
+            <p>info@trattoriadamario.es</p>
+          </div>
+        </div>
+        <div class="info-block reveal">
+          <h3>Find Us on the Map</h3>
+          <div style="border-radius4px;overflow:hidden;border:1px solid rgba(201,165,90,0.2);">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="320" style="border:0;display:block;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <p class="footer-logo">Trattoria Da Mario</p>
+    <p>Av. Antonio Machado, 108 · 29630 Benalmádena · +34 952 567 890</p>
+    <p style="margin-top:1rem; opacity: 0.4;">© 2026 Trattoria Da Mario. Made with ❤️ in Benalmádena.</p>
+  </footer>
+
+  <script>
+    const nav = document.getElementById('navbar');
+    window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); });
+
+    function showMenu(category) {
+      document.querySelectorAll('.menu-category').forEach(el => el.classList.remove('active'));
+      document.querySelectorAll('.menu-tab').forEach(el => el.classList.remove('active'));
+      document.getElementById('menu-' + category).classList.add('active');
+      event.target.classList.add('active');
+    }
+
+    const revealEls = document.querySelectorAll('.reveal');
+    const revealObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) { entry.target.classList.add('visible'); revealObserver.unobserve(entry.target); }
+      });
+    }, { threshold: 0.1 });
+    revealEls.forEach(el => revealObserver.observe(el));
+
+    document.querySelectorAll('a[href^="#"]').forEach(a => {
+      a.addEventListener('click', e => {
+        e.preventDefault();
+        const target = document.querySelector(a.getAttribute('href'));
+        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/demos/ristorante/pizza/index.html b/demos/ristorante/pizza/index.html
new file mode 100644
index 0000000..70d076c
--- /dev/null
+++ b/demos/ristorante/pizza/index.html
@@ -0,0 +1,375 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pizzeria da Marco — Artisan Pizza & Pasta</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,900;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --green: #3d8c40;
+      --red: #c0392b;
+      --cream: #faf3e8;
+      --dark: #1a1210;
+      --warm: #2d1f1a;
+      --gold: #d4a843;
+      --text: #e8ddd0;
+      --muted: #9a8a78;
+    }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--text); line-height: 1.6; overflow-x: hidden; }
+
+    /* ITALIAN FLAG ACCENT */
+    .flag-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to right, var(--green) 33%, var(--cream) 33%, var(--cream) 66%, var(--red) 66%); }
+
+    /* NAV */
+    nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
+    nav.scrolled { background: rgba(26,18,16,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,67,0.1); }
+    .nav-logo { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--cream); font-weight: 900; text-decoration: none; font-style: italic; }
+    .nav-logo span { color: var(--green); }
+    .nav-links { display: flex; gap: 2rem; list-style: none; }
+    .nav-links a { color: var(--muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--cream); }
+    .nav-cta { background: var(--red); color: white; padding: 0.5rem 1.2rem; border-radius: 50px; font-weight: 600; font-size: 0.8rem; }
+    .nav-cta:hover { background: #a93226; color: white; text-decoration: none; }
+
+    /* HERO */
+    .hero { height: 100vh; min-height: 580px; position: relative; display: flex; align-items: center; overflow: hidden; }
+    .hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,18,16,0.3) 0%, rgba(26,18,16,0.9) 65%, var(--dark) 100%), url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=1600&q=80') center/cover no-repeat; }
+    .hero-pizza-badge { position: absolute; bottom: 2rem; right: 2rem; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.6; }
+    .hero-pizza-badge .badge-num { font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 900; color: var(--gold); line-height: 1; }
+    .hero-pizza-badge .badge-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
+    .hero-content { position: relative; z-index: 2; padding: 2rem 6rem; max-width: 750px; }
+    .hero-tag { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; font-weight: 600; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
+    .hero h1 { font-family: 'Fraunces', serif; font-size: clamp(3.5rem, 9vw, 6rem); line-height: 0.95; color: var(--cream); margin-bottom: 0.5rem; font-weight: 900; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
+    .hero h1 em { color: var(--red); font-style: italic; }
+    .hero-subtitle { font-size: 1.1rem; color: var(--gold); margin-bottom: 1.5rem; font-weight: 300; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
+    .hero-desc { font-size: 1rem; color: var(--muted); max-width: 480px; margin-bottom 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
+    .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
+    .btn-primary { background: var(--red); color: white; padding: 0.9rem 2.2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.3s; display: inline-block; }
+    .btn-primary:hover { background: #a93226; transform: translateY(-2px); }
+    .btn-ghost { border: 1px solid rgba(250,243,232,0.3); color: var(--cream); padding: 0.9rem 2.2rem; border-radius: 50px; text-decoration: none; font-size: 0.85rem; transition: all 0.3s; display: inline-block; }
+    .btn-ghost:hover { border-color: var(--cream); background: rgba(250,243,232,0.08); text-decoration: none; }
+
+    section { padding: 6rem 2rem; }
+    .container { max-width: 1100px; margin: 0 auto; }
+    .section-tag { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--green); text-align: center; margin-bottom: 0.5rem; font-weight: 600; }
+    .section-title { font-family: 'Fraunces', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; font-weight: 900; }
+    .section-title em { font-style: italic; color: var(--red); }
+
+    /* PIZZA GRID */
+    #pizzas { background: var(--warm); }
+    .pizza-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
+    .pizza-card { background: var(--dark); border-radius: 12px; overflow: hidden; border: 1px solid rgba(212,168,67,0.08); transition: transform 0.3s, border-color 0.3s; }
+    .pizza-card:hover { transform: translateY(-6px); border-color: rgba(212,168,67,0.25); }
+    .pizza-card img { width: 100%; height: 180px; object-fit: cover; }
+    .pizza-info { padding: 1.2rem; }
+    .pizza-info .pizza-name { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 0.4rem; font-weight: 600; }
+    .pizza-info .pizza-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.8rem; line-height: 1.5; }
+    .pizza-footer { display: flex; justify-content: space-between; align-items: center; }
+    .pizza-price { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--green); font-weight: 900; }
+    .pizza-tag { font-size: 0.65rem; padding: 0.2rem 0.5rem; border-radius: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+    .tag-veg { background: rgba(61,140,64,0.15); color: var(--green); }
+    .tag-spicy { background: rgba(192,57,43,0.15); color: var(--red); }
+    .tag-popular { background: rgba(212,168,67,0.15); color: var(--gold); }
+
+    /* ABOUT */
+    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
+    .about-img img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; }
+    .about-text h3 { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--cream); margin-bottom: 1rem; font-weight: 600; }
+    .about-text p { color: var(--muted); margin-bottom: 1rem; font-size: 0.95rem; }
+    .about-text p strong { color: var(--cream); }
+    .process-steps { display: flex; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
+    .process-step { display: flex; align-items: center; gap: 0.8rem; }
+    .process-step .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: white; font-family: 'Fraunces', serif; font-weight: 900; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .process-step .step-text { font-size: 0.8rem; color: var(--muted); }
+    .process-step .step-text strong { color: var(--cream); }
+
+    /* PASTA */
+    #pasta { background: var(--warm); }
+    .pasta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
+    .pasta-item { background: var(--dark); border-radius: 10px; overflow: hidden; }
+    .pasta-item img { width: 100%; height: 140px; object-fit: cover; }
+    .pasta-item .pasta-info { padding: 1rem; }
+    .pasta-item .pasta-name { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--cream); margin-bottom: 0.3rem; }
+    .pasta-item .pasta-desc { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.5rem; }
+    .pasta-item .pasta-price { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--green); font-weight: 900; }
+
+    /* REVIEWS */
+    .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
+    .review-card { background: var(--warm); border: 1px solid rgba(212,168,67,0.08); border-radius: 10px; padding: 1.5rem; }
+    .review-card .stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.8rem; }
+    .review-card .review-text { font-size: 0.88rem; color: var(--muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
+    .review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
+
+    /* LOCATION */
+    #location { background: var(--warm); }
+    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
+    .hours-table { width: 100%; }
+    .hours-table tr { border-bottom: 1px solid rgba(212,168,67,0.08); }
+    .hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
+    .hours-table td:first-child { color: var(--muted); }
+    .hours-table td:last-child { color: var(--text); text-align: right; }
+    .address-block { margin-top: 2rem; }
+    .address-block p { font-size: 0.9rem; color: var(--muted); line-height: 1.9; }
+    .address-block strong { color: var(--green); font-weight: 600; }
+
+    /* FOOTER */
+    footer { background: #0f0a08; padding: 4rem 2rem 2rem; text-align: center; }
+    .footer-logo { font-family: 'Fraunces', serif; font-size: 2.5rem; color: var(--cream); font-weight: 900; font-style: italic; margin-bottom: 0.5rem; }
+    .footer-logo span { color: var(--green); }
+    footer p { font-size: 0.8rem; color: var(--muted); }
+
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
+    .reveal.visible { opacity: 1; transform: translateY(0); }
+
+    @media (max-width: 768px) {
+      .nav-links { display: none; }
+      .hero-content { padding: 2rem; }
+      .about-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
+      .hero-pizza-badge { display: none; }
+    }
+  </style>
+</head>
+<body>
+
+<div class="flag-stripe"></div>
+
+<nav id="navbar">
+  <a href="#" class="nav-logo"><span>Pizzeria</span> da Marco</a>
+  <ul class="nav-links">
+    <li><a href="#pizzas">Pizzas</a></li>
+    <li><a href="#about">Our Story</a></li>
+    <li><a href="#pasta">Pasta</a></li>
+    <li><a href="#reviews">Reviews</a></li>
+    <li><a href="#location" class="nav-cta">Order Now</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <div class="hero-bg"></div>
+  <div class="hero-pizza-badge">
+    <div class="badge-num">4.8</div>
+    <div class="badge-label">Rating</div>
+  </div>
+  <div class="hero-content">
+    <p class="hero-tag">★ Benalmádena Costa ★</p>
+    <h1>Pizzeria<br><em>da Marco</em></h1>
+    <p class="hero-subtitle">Naples in the Costa del Sol · Wood-Fired Since 2010</p>
+    <p class="hero-desc">Real Neapolitan pizza baked in a wood-fired oven at 450°C. 72-hour fermented dough, San Marzano tomatoes, buffalo mozzarella. Open every evening for dinner — no reservations needed.</p>
+    <div class="hero-btns">
+      <a href="#pizzas" class="btn-primary">View Our Pizzas</a>
+      <a href="#location" class="btn-ghost">Find Us</a>
+    </div>
+  </div>
+</section>
+
+<section id="pizzas">
+  <div class="container">
+    <p class="section-tag">From the Wood-Fired Oven</p>
+    <h2 class="section-title">Our <em>Pizzas</em></h2>
+    <div class="pizza-grid">
+      <div class="pizza-card reveal">
+        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500&q=75" alt="Margherita" loading="lazy">
+        <div class="pizza-info">
+          <div class="pizza-name">Margherita DOP</div>
+          <div class="pizza-desc">San Marzano tomatoes, buffalo mozzarella di Battipaglia, fresh basil, extra virgin olive oil</div>
+          <div class="pizza-footer">
+            <div class="pizza-price">€9.50</div>
+            <span class="pizza-tag tag-veg">🌿 Vegetarian</span>
+          </div>
+        </div>
+      </div>
+      <div class="pizza-card reveal">
+        <img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=500&q=75" alt="Diavola" loading="lazy">
+        <div class="pizza-info">
+          <div class="pizza-name">Diavola</div>
+          <div class="pizza-desc">Spicy Italian salami, San Marzano tomatoes, mozzarella, tabasco-infused olive oil, chili flakes</div>
+          <div class="pizza-footer">
+            <div class="pizza-price">€12.00</div>
+            <span class="pizza-tag tag-spicy">🔥 Spicy</span>
+          </div>
+        </div>
+      </div>
+      <div class="pizza-card reveal">
+        <img src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=500&q=75" alt="Quattro Formaggi" loading="lazy">
+        <div class="pizza-info">
+          <div class="pizza-name">Quattro Formaggi</div>
+          <div class="pizza-desc">Mozzarella, gorgonzola piccante, Parmigiano Reggiano, taleggio — four cheese perfection</div>
+          <div class="pizza-footer">
+            <div class="pizza-price">€12.50</div>
+            <span class="pizza-tag tag-veg">🌿 Vegetarian</span>
+          </div>
+        </div>
+      </div>
+      <div class="pizza-card reveal">
+        <img src="https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?w=500&q=75" alt="Tartufo" loading="lazy">
+        <div class="pizza-info">
+          <div class="pizza-name">Tartufo e Funghi</div>
+          <div class="pizza-desc">Black truffle cream, wild mushrooms, mozzarella, taleggio, fresh truffle oil, rosemary</div>
+          <div class="pizza-footer">
+            <div class="pizza-price">€15.00</div>
+            <span class="pizza-tag tag-popular">⭐ Chef's Pick</span>
+          </div>
+        </div>
+      </div>
+      <div class="pizza-card reveal">
+        <img src="https://images.unsplash.com/photo-1600028068383-4589e2c5fc4e?w=500&q=75" alt="Prosciutto" loading="lazy">
+        <div class="pizza-info">
+          <div class="pizza-name">Prosciutto e Funghi</div>
+          <div class="pizza-desc">San Daniele prosciutto, wild mushrooms, San Marzano tomatoes, mozzarella, fresh rocket</div>
+          <div class="pizza-footer">
+            <div class="pizza-price">€13.00</div>
+            <span class="pizza-tag tag-popular">⭐ Popular</span>
+          </div>
+        </div>
+      </div>
+      <div class="pizza-card reveal">
+        <img src="https://images.unsplash.com/photo-1598679253544-2c97992403ea?w=500&q=75" alt="Capricciosa" loading="lazy">
+        <div class="pizza-info">
+          <div class="pizza-name">Capricciosa</div>
+          <div class="pizza-desc">Cooked ham, artichoke hearts, wild mushrooms, black olives, San Marzano tomatoes, mozzarella</div>
+          <div class="pizza-footer">
+            <div class="pizza-price">€12.00</div>
+            <span class="pizza-tag tag-popular">⭐ Classic</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="about">
+  <div class="container">
+    <div class="about-grid">
+      <div class="about-img reveal">
+        <img src="https://images.unsplash.com/photo-1574966740793-953ad37419ca?w=800&q=80" alt="Pizza making" loading="lazy">
+      </div>
+      <div class="about-text reveal">
+        <p class="section-tag">Our Story</p>
+        <h3>Straight from Naples to Benalmádena</h3>
+        <p>Marco Ferretti grew up in the pizzeria his grandfather ran in Naples' Quartieri Spagnoli. In 2010, he brought the family recipe to the Costa del Sol — the same <strong>72-hour fermented dough</strong>, the same <strong>wood-fired oven</strong> built by hand from Neapolitan bricks.</p>
+        <p>Our oven burns at <strong>450°C</strong> — hot enough to bake a pizza in 90 seconds. The dough blisters, the cheese bubbles, the base gets those charred leopard spots that mark a real Neapolitan pizza.</p>
+        <p>We use only <strong>00 flour</strong> from Naples, <strong>San Marzano tomatoes</strong> from the slopes of Vesuvius, and <strong>buffalo mozzarella</strong> from Battipaglia. If it's not from Italy, we don't use it.</p>
+        <div class="process-steps">
+          <div class="process-step"><div class="step-num">1</div><div class="step-text"><strong>72h</strong> Fermented dough</div></div>
+          <div class="process-step"><div class="step-num">2</div><div class="step-text"><strong>450°C</strong> Wood-fired</div></div>
+          <div class="process-step"><div class="step-num">3</div><div class="step-text"><strong>90 sec</strong> Baked to perfection</div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="pasta">
+  <div class="container">
+    <p class="section-tag">Fresh Pasta Daily</p>
+    <h2 class="section-title">Handmade <em>Pasta</em></h2>
+    <div class="pasta-grid">
+      <div class="pasta-item reveal">
+        <img src="https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=400&q=75" alt="Carbonara" loading="lazy">
+        <div class="pasta-info">
+          <div class="pasta-name">Spaghetti Carbonara</div>
+          <div class="pasta-desc">Guanciale, egg yolk, Pecorino Romano, Tellicherry pepper — Roman authentic</div>
+          <div class="pasta-price">€11.00</div>
+        </div>
+      </div>
+      <div class="pasta-item reveal">
+        <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=400&q=75" alt="Cacio e Pepe" loading="lazy">
+        <div class="pasta-info">
+          <div class="pasta-name">Tonnarelli Cacio e Pepe</div>
+          <div class="pasta-desc">Square spaghetti, Pecorino Romano DOP, Tellicherry black pepper</div>
+          <div class="pasta-price">€10.50</div>
+        </div>
+      </div>
+      <div class="pasta-item reveal">
+        <img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?w=400&q=75" alt="Ragù" loading="lazy">
+        <div class="pasta-info">
+          <div class="pasta-name">Pappardelle al Ragù</div>
+          <div class="pasta-desc">Wide ribbon pasta, 8-hour slow-cooked Bolognese ragù, aged Parmigiano</div>
+          <div class="pasta-price">€12.50</div>
+        </div>
+      </div>
+      <div class="pasta-item reveal">
+        <img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=400&q=75" alt="Gnocchi" loading="lazy">
+        <div class="pasta-info">
+          <div class="pasta-name">Gnocchi alla Sorrentina</div>
+          <div class="pasta-desc">Potato gnocchi, tomato sauce, mozzarella di bufala, baked in the wood oven</div>
+          <div class="pasta-price">€10.50</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="reviews">
+  <div class="container">
+    <p class="section-tag">Reviews</p>
+    <h2 class="section-title">What Our <em>Guests</em> Say</h2>
+    <div class="reviews-grid">
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"I've eaten pizza all over Italy and this one is the real deal. The base is perfectly thin, the dough is airy, the char is authentic. The diavola has proper heat. Can't wait to come back."</p>
+        <div class="review-author">— Giulia B., Google</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"No reservations, casual atmosphere, incredible food. The pasta carbonara was creamy and the guanciale was perfectly crispy. Best Italian on the Costa del Sol, hands down."</p>
+        <div class="review-author">— Tom H., TripAdvisor</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"Marco himself made our pizza right in front of us. The quattro formaggi is heaven — proper gorgonzola, not the mild stuff. The tiramisu for dessert was the perfect end. 10/10."</p>
+        <div class="review-author">— Sophie L., TheFork</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="location">
+  <div class="container">
+    <p class="section-tag">Find Us</p>
+    <h2 class="section-title">Come <em>Visit</em></h2>
+    <div class="info-grid">
+      <div class="reveal">
+        <h3 style="font-family:'Fraunces',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
+        <table class="hours-table">
+          <tr><td>Monday — Thursday</td><td>18:00 — 23:00</td></tr>
+          <tr><td>Friday — Saturday</td><td>18:00 — 00:00</td></tr>
+          <tr><td>Sunday</td><td>13:00 — 22:00</td></tr>
+        </table>
+        <div class="address-block">
+          <p><strong>📍 Address</strong></p>
+          <p>Av. Antonio Machado, 124<br>29630 Benalmádena Costa<br>Spain</p>
+          <p style="margin-top:1rem;"><strong>📞 Order / Info</strong></p>
+          <p>+34 952 571 234<br>hello@pizzeriadamarco.es</p>
+        </div>
+      </div>
+      <div class="reveal">
+        <div style="border-radius:12px;overflow:hidden;border:1px solid rgba(212,168,67,0.15);">
+          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <p class="footer-logo"><span>Pizzeria</span> da Marco</p>
+  <p>Av. Antonio Machado, 124 · 29630 Benalmádena Costa · +34 952 571 234</p>
+  <p style="margin-top:1rem;opacity:0.4;">© 2026 Pizzeria da Marco. All rights reserved.</p>
+</footer>
+
+<script>
+  const nav = document.getElementById('navbar');
+  window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
+  document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
+  const revealEls = document.querySelectorAll('.reveal');
+  const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
+  revealEls.forEach(el => observer.observe(el));
+</script>
+</body>
+</html>
diff --git a/demos/ristorante/spanish/index.html b/demos/ristorante/spanish/index.html
new file mode 100644
index 0000000..65aabf8
--- /dev/null
+++ b/demos/ristorante/spanish/index.html
@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>La Bodega del Mar — Mediterranean Kitchen</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Cormorant+Garamond:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root { --bg: #f7f4ef; --bg-card: #ffffff; --bg-warm: #fdf8f2; --navy: #1a3557; --terracotta: #c4622d; --sand: #e8d5b7; --gold: #b8943c; --cream: #faf7f2; --text: #2c2825; --text-muted: #7a6f66; }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
+
+    /* NAV */
+    nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; background: transparent; }
+    nav.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(200,98,45,0.1); }
+    .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--terracotta); font-weight: 700; text-decoration: none; }
+    .nav-links { display: flex; gap: 2rem; list-style: none; }
+    .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--terracotta); }
+    .nav-cta { background: var(--terracotta); color: white; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700; }
+    .nav-cta:hover { background: #b3582a; color: white; text-decoration: none; }
+
+    /* HERO */
+    .hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; overflow: hidden; }
+    .hero-bg { position: absolute; inset: 0; background: linear-gradient(to right, rgba(247,244,239,0.85) 0%, rgba(247,244,239,0.4) 50%, transparent 100%), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=80') center/cover no-repeat; }
+    .hero-content { position: relative; z-index: 2; padding: 2rem 6rem; max-width: 700px; }
+    .hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 1rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
+    .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1.0; color: var(--navy); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
+    .hero h1 em { font-style: italic; color: var(--terracotta); }
+    .hero-subtitle { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--gold); margin-bottom: 1.5rem; font-style: italic; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
+    .hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 480px; margin-bottom 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
+    .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
+    .btn-primary { background: var(--terracotta); color: white; padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-primary:hover { background: #b3582a; transform: translateY(-2px); }
+    .btn-ghost { border: 1px solid var(--navy); color: var(--navy); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-ghost:hover { background: var(--navy); color: white; text-decoration: none; }
+
+    section { padding: 6rem 2rem; }
+    .container { max-width: 1100px; margin: 0 auto; }
+    .section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terracotta); text-align: center; margin-bottom: 0.5rem; }
+    .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--navy); margin-bottom: 3rem; }
+    .section-title em { font-style: italic; color: var(--terracotta); }
+
+    /* ABOUT */
+    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
+    .about-img { border-radius: 8px; overflow: hidden; }
+    .about-img img { width: 100%; height: 420px; object-fit: cover; display: block; }
+    .about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--navy); margin-bottom: 1rem; }
+    .about-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
+    .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
+    .about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text); }
+    .about-feature .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; }
+
+    /* TAPA HIGHLIGHTS */
+    #tapas { background: var(--bg-warm); }
+    .tapas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+    .tapa-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; }
+    .tapa-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
+    .tapa-card img { width: 100%; height: 160px; object-fit: cover; }
+    .tapa-info { padding: 1rem; }
+    .tapa-info .tapa-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--navy); margin-bottom: 0.3rem; }
+    .tapa-info .tapa-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
+    .tapa-info .tapa-price { font-size: 0.95rem; color: var(--terracotta); font-weight: 700; }
+
+    /* MENU CLASSICS */
+    .menu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
+    .menu-col h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--navy); margin-bottom: 1.2rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--sand); }
+    .menu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); gap: 1rem; }
+    .menu-item-name { font-size: 0.95rem; color: var(--text); }
+    .menu-item-desc { font-size: 0.75rem; color: var(--text-muted); }
+    .menu-item-price { font-size: 0.95rem; color: var(--terracotta); font-weight: 700; white-space: nowrap; }
+
+    /* WINE */
+    #wine { background: var(--navy); }
+    #wine .section-tag { color: var(--sand); }
+    #wine .section-title { color: white; }
+    .wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; }
+    .wine-item { text-align: center; padding: 1.2rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
+    .wine-item .wine-name { font-family: 'Playfair Display', serif; font-size: 1rem; color: white; margin-bottom: 0.3rem; }
+    .wine-item .wine-region { font-size: 0.75rem; color: var(--sand); margin-bottom: 0.5rem; }
+    .wine-item .wine-price { font-size: 0.9rem; color: var(--sand); font-weight: 700; }
+
+    /* REVIEWS */
+    .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
+    .review-card { background: white; border: 1px solid var(--sand); border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
+    .review-card .stars { color: var(--terracotta); font-size: 0.9rem; margin-bottom: 0.8rem; }
+    .review-card .review-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
+    .review-card .review-author { font-size: 0.8rem; color: var(--navy); font-weight: 600; }
+
+    /* LOCATION */
+    #location { background: var(--bg-warm); }
+    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
+    .hours-table { width: 100%; }
+    .hours-table tr { border-bottom: 1px solid var(--sand); }
+    .hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
+    .hours-table td:first-child { color: var(--text-muted); }
+    .hours-table td:last-child { color: var(--text); text-align: right; }
+    .address-block { margin-top: 2rem; }
+    .address-block p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
+    .address-block strong { color: var(--terracotta); font-weight: 600; }
+
+    /* FOOTER */
+    footer { background: var(--navy); padding: 4rem 2rem 2rem; text-align: center; }
+    .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: white; font-weight: 700; margin-bottom: 0.5rem; }
+    .footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--sand); margin-bottom: 1rem; }
+    footer p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
+
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
+    .reveal.visible { opacity: 1; transform: translateY(0); }
+
+    @media (max-width: 768px) {
+      .nav-links { display: none; }
+      .hero-content { padding: 2rem; }
+      .about-grid, .menu-split, .info-grid, .tapas-grid { grid-template-columns: 1fr; gap: 2rem; }
+    }
+  </style>
+</head>
+<body>
+
+<nav id="navbar">
+  <a href="#" class="nav-logo">La Bodega del Mar</a>
+  <ul class="nav-links">
+    <li><a href="#about">Our Story</a></li>
+    <li><a href="#tapas">Tapas</a></li>
+    <li><a href="#menu">Menu</a></li>
+    <li><a href="#wine">Wine</a></li>
+    <li><a href="#location" class="nav-cta">Reservas</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <div class="hero-bg"></div>
+  <div class="hero-content">
+    <p class="hero-tag">✦ Benalmádena Costa ✦</p>
+    <h1>La Bodega<br><em>del Mar</em></h1>
+    <p class="hero-subtitle">Cocina Mediterránea · Productos del Mercado</p>
+    <p class="hero-desc">Fresh fish straight from the daily catch, organic vegetables from local farmers, and wines from small Spanish producers. The Costa del Sol on a plate — honest, generous, and full of flavour.</p>
+    <div class="hero-btns">
+      <a href="#tapas" class="btn-primary">Ver Tapas</a>
+      <a href="#location" class="btn-ghost">Reservar Mesa</a>
+    </div>
+  </div>
+</section>
+
+<section id="about">
+  <div class="container">
+    <div class="about-grid">
+      <div class="about-img reveal">
+        <img src="https://images.unsplash.com/photo-1466637574441-749b8f19452f?w=800&q=80" alt="Spanish kitchen" loading="lazy">
+      </div>
+      <div class="about-text reveal">
+        <p class="section-tag">Our Story</p>
+        <h3>Where the sea meets the table</h3>
+        <p>La Bodega del Mar opened in 2012 in the heart of Benalmádena Costa, founded by chef Javier Moreno who spent 20 years working the coastal kitchens of Málaga, Granada, and Almería.</p>
+        <p>Every morning Javier visits the market himself to choose the day's catch — whatever the fishermen brought in that morning. There's no menu for the specials board; it changes with the tide.</p>
+        <p>We call ourselves a bodega, because that's what we are at heart: a place to eat well, drink well, and feel at home. Come as you are.</p>
+        <div class="about-features">
+          <div class="about-feature"><span class="dot"></span>Daily fish market</div>
+          <div class="about-feature"><span class="dot"></span>Local organic produce</div>
+          <div class="about-feature"><span class="dot"></span>Spanish natural wines</div>
+          <div class="about-feature"><span class="dot"></span>Open 7 days a week</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="tapas">
+  <div class="container">
+    <p class="section-tag">Para Picar</p>
+    <h2 class="section-title">Our <em>Tapas</em></h2>
+    <div class="tapas-grid">
+      <div class="tapa-card reveal">
+        <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=75" alt="Gambas al Ajillo" loading="lazy">
+        <div class="tapa-info">
+          <div class="tapa-name">Gambas al Ajillo</div>
+          <div class="tapa-desc">Garlic prawns in olive oil, guindilla pepper, white wine. Served with crusty bread to soak up the sauce.</div>
+          <div class="tapa-price">€10.00</div>
+        </div>
+      </div>
+      <div class="tapa-card reveal">
+        <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?w=400&q=75" alt="Patatas Bravas" loading="lazy">
+        <div class="tapa-info">
+          <div class="tapa-name">Patatas Bravas</div>
+          <div class="tapa-desc">Crispy fried potatoes, bravas sauce (spicy tomato), aioli. The house recipe since day one.</div>
+          <div class="tapa-price">€6.00</div>
+        </div>
+      </div>
+      <div class="tapa-card reveal">
+        <img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&q=75" alt="Jamón Ibérico" loading="lazy">
+        <div class="tapa-info">
+          <div class="tapa-name">Jamón Ibérico de Bellota</div>
+          <div class="tapa-desc">Hand-sliced 48-month aged acorn-fed Ibérico ham. Served with picos bread and tomato aliño.</div>
+          <div class="tapa-price">€14.00</div>
+        </div>
+      </div>
+      <div class="tapa-card reveal">
+        <img src="https://images.unsplash.com/photo-1565944647579-ed1f2d7a1d22?w=400&q=75" alt="Calamares" loading="lazy">
+        <div class="tapa-info">
+          <div class="tapa-name">Calamares Fritos</div>
+          <div class="tapa-desc">Lightly fried squid rings and tentacles, lemon wedge, spicy aioli. Like being on the beach in Málaga.</div>
+          <div class="tapa-price">€9.50</div>
+        </div>
+      </div>
+      <div class="tapa-card reveal">
+        <img src="https://images.unsplash.com/photo-1626200419199-391ae4be7a41?w=400&q=75" alt="Croquetas" loading="lazy">
+        <div class="tapa-info">
+          <div class="tapa-name">Croquetas de Bacalao</div>
+          <div class="tapa-desc">Hand-rolled salt cod croquettes, crispy outside, creamy bechamel inside. Made fresh every morning.</div>
+          <div class="tapa-price">€7.50</div>
+        </div>
+      </div>
+      <div class="tapa-card reveal">
+        <img src="https://images.unsplash.com/photo-1608897013039-887f21d8c804?w=400&q=75" alt="Pulpo" loading="lazy">
+        <div class="tapa-info">
+          <div class="tapa-name">Pulpo a la Gallega</div>
+          <div class="tapa-desc">Galician-style octopus, boiled then seared, on a bed of boiled potatoes, paprika, olive oil.</div>
+          <div class="tapa-price">€13.00</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="menu">
+  <div class="container">
+    <p class="section-tag">Platos Principales</p>
+    <h2 class="section-title">Main <em>Dishes</em></h2>
+    <div class="menu-split">
+      <div class="menu-col">
+        <h3>Fresh from the Sea</h3>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Pescaíto Frito</div>
+            <div class="menu-item-desc">Mixed fried fish — small sardines, calamari, fish of the day. With lemon and alioli</div>
+          </div>
+          <div class="menu-item-price">€16.00</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Sea Bass a la Plancha</div>
+            <div class="menu-item-desc">Grilled sea bass fillet, sautéed potatoes, green pepper, olive oil</div>
+          </div>
+          <div class="menu-item-price">€19.00</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Rice Plate — Paella</div>
+            <div class="menu-item-desc">Traditional paella Valenciana. Chicken, rabbit, green beans, saffron. For 2 persons minimum</div>
+          </div>
+          <div class="menu-item-price">€18.00 pp</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Black Rice</div>
+            <div class="menu-item-desc">Squid ink rice, cuttlefish, monkfish. The specialty of the house</div>
+          </div>
+          <div class="menu-item-price">€19.00</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Grilled Gambas</div>
+            <div class="menu-item-desc">Large prawns on the grill, garlic butter, parsley, white wine</div>
+          </div>
+          <div class="menu-item-price">€22.00</div>
+        </div>
+      </div>
+      <div class="menu-col">
+        <h3>From the Land</h3>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Solomillo al Ajillo</div>
+            <div class="menu-item-desc">Pan-fried pork tenderloin, garlic, white wine, roasted potatoes</div>
+          </div>
+          <div class="menu-item-price">€14.00</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Pollo al Ajillo</div>
+            <div class="menu-item-desc">Chicken pieces braised in garlic, white wine, thyme, olives</div>
+          </div>
+          <div class="menu-item-price">€12.00</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Tortilla Española</div>
+            <div class="menu-item-desc">Classic Spanish omelette — eggs, potatoes, onion. Served warm</div>
+          </div>
+          <div class="menu-item-price">€8.00</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Spinach & Chickpeas</div>
+            <div class="menu-item-desc">Espinacas con garbanzos — Andalusian style stew, cumin, paprika</div>
+          </div>
+          <div class="menu-item-price">€10.00</div>
+        </div>
+        <div class="menu-item">
+          <div>
+            <div class="menu-item-name">Salmorejo</div>
+            <div class="menu-item-desc">Cold Andalusian tomato soup, Ibérico ham, hard-boiled egg, olive oil</div>
+          </div>
+          <div class="menu-item-price">€7.00</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="wine">
+  <div class="container">
+    <p class="section-tag">Vino</p>
+    <h2 class="section-title">Spanish <em>Wines</em></h2>
+    <div class="wine-grid">
+      <div class="wine-item">
+        <div class="wine-name">Albariño</div>
+        <div class="wine-region">Rías Baixas, Galicia</div>
+        <div class="wine-price">from €18/bottle</div>
+      </div>
+      <div class="wine-item">
+        <div class="wine-name">Verdejo</div>
+        <div class="wine-region">Rueda, Castilla y León</div>
+        <div class="wine-price">from €16/bottle</div>
+      </div>
+      <div class="wine-item">
+        <div class="wine-name">Rioja Reserva</div>
+        <div class="wine-region">La Rioja</div>
+        <div class="wine-price">from €22/bottle</div>
+      </div>
+      <div class="wine-item">
+        <div class="wine-name">Ribera del Duero</div>
+        <div class="wine-region">Castilla y León</div>
+        <div class="wine-price">from €24/bottle</div>
+      </div>
+      <div class="wine-item">
+        <div class="wine-name">Priorat</div>
+        <div class="wine-region">Catalunya</div>
+        <div class="wine-price">from €28/bottle</div>
+      </div>
+      <div class="wine-item">
+        <div class="wine-name">Sherry Fino</div>
+        <div class="wine-region">Jerez, Andalucía</div>
+        <div class="wine-price">from €14/bottle</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="reviews">
+  <div class="container">
+    <p class="section-tag">Reviews</p>
+    <h2 class="section-title">What <em>Guests</em> Say</h2>
+    <div class="reviews-grid">
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"The best tapas on the Costa del Sol. We tried the gambas al ajillo, croquetas, and pulpo — all exceptional. The rice dishes are incredible. This is real Spanish food."</p>
+        <div class="review-author">— Helen & Peter, Google</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"Found this gem on our second night in Benalmádena. The owner Javier comes out to say hello. Fresh fish, generous portions, reasonable prices. We ate here 4 nights in a row."</p>
+        <div class="review-author">— Brian M., TripAdvisor</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"Authentic, warm, delicious. The espinacas con garbanzos was the best I've had in Spain. The house wine (tempranillo) is superb. This is what Spanish dining should be."</p>
+        <div class="review-author">— Claudia F., TheFork</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="location">
+  <div class="container">
+    <p class="section-tag">Encuéntranos</p>
+    <h2 class="section-title">Find Your Way to <em>La Bodega</em></h2>
+    <div class="info-grid">
+      <div class="reveal">
+        <h3 style="font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--navy);margin-bottom:1.5rem;">Opening Hours</h3>
+        <table class="hours-table">
+          <tr><td>Monday — Thursday</td><td>12:00 — 23:00</td></tr>
+          <tr><td>Friday — Saturday</td><td>12:00 — 00:00</td></tr>
+          <tr><td>Sunday</td><td>12:00 — 23:00</td></tr>
+        </table>
+        <div class="address-block">
+          <p><strong>📍 Dirección</strong></p>
+          <p>Av. Antonio Machado, 120<br>29630 Benalmádena Costa<br>Spain</p>
+          <p style="margin-top:1rem;"><strong>📞 Reservas</strong></p>
+          <p>+34 952 570 123<br>info@labodegadelmar.es</p>
+        </div>
+      </div>
+      <div class="reveal">
+        <div style="border-radius:8px;overflow:hidden;border:1px solid var(--sand);">
+          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <p class="footer-logo">La Bodega del Mar</p>
+  <p class="footer-tagline">Cocina Mediterránea · Benalmádena Costa</p>
+  <p>Av. Antonio Machado, 120 · 29630 Benalmádena · +34 952 570 123</p>
+  <p style="margin-top:1rem;">© 2026 La Bodega del Mar. All rights reserved.</p>
+</footer>
+
+<script>
+  const nav = document.getElementById('navbar');
+  window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
+  document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
+  const revealEls = document.querySelectorAll('.reveal');
+  const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
+  revealEls.forEach(el => observer.observe(el));
+</script>
+</body>
+</html>
diff --git a/demos/ristorante/steakhouse/index.html b/demos/ristorante/steakhouse/index.html
new file mode 100644
index 0000000..21143f3
--- /dev/null
+++ b/demos/ristorante/steakhouse/index.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The Argentine Grill — Premium Steakhouse</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Bebas+Neue&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root { --bg: #0d0b09; --bg-card: #1a1614; --bg-light: #221e1a; --ember: #e85d04; --gold: #c9922a; --cream: #f0e6d3; --text: #ddd0c0; --text-muted: #8a7d6e; }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
+
+    /* FIRE BG */
+    .hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+    .hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,11,9,0.2) 0%, rgba(13,11,9,0.85) 70%, var(--bg) 100%), url('https://images.unsplash.com/photo-1558030006-450675393462?w=1600&q=80') center/cover no-repeat; }
+    .hero-embers { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(232,93,4,0.15) 0%, transparent 60%); pointer-events: none; }
+
+    nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
+    nav.scrolled { background: rgba(13,11,9,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,146,42,0.15); }
+    .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--gold); letter-spacing: 0.1em; text-decoration: none; }
+    .nav-links { display: flex; gap: 2rem; list-style: none; }
+    .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--gold); }
+    .nav-cta { background: var(--ember); color: white; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700; }
+    .nav-cta:hover { background: #ff6b10; color: white; text-decoration: none; }
+
+    .hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
+    .hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember); margin-bottom: 1rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
+    .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3.5rem, 10vw, 7rem); line-height: 0.95; color: var(--cream); margin-bottom: 0.5rem; font-weight: 900; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
+    .hero-subtitle { font-size: 1.1rem; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
+    .hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
+    .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
+    .btn-primary { background: var(--ember); color: white; padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-primary:hover { background: #ff6b10; transform: translateY(-2px); }
+    .btn-ghost { border: 1px solid rgba(201,146,42,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
+    .btn-ghost:hover { border-color: var(--gold); background: rgba(201,146,42,0.08); text-decoration: none; }
+
+    section { padding: 6rem 2rem; }
+    .container { max-width: 1100px; margin: 0 auto; }
+    .section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember); text-align: center; margin-bottom: 0.5rem; }
+    .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
+    .section-title em { font-style: italic; color: var(--gold); }
+
+    /* CUTS */
+    #cuts { background: var(--bg-card); }
+    .cuts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
+    .cut-card { background: var(--bg); border: 1px solid rgba(201,146,42,0.1); border-radius: 4px; overflow: hidden; text-align: center; transition: border-color 0.3s, transform 0.3s; }
+    .cut-card:hover { border-color: var(--ember); transform: translateY(-4px); }
+    .cut-card img { width: 100%; height: 160px; object-fit: cover; }
+    .cut-card .cut-info { padding: 1rem; }
+    .cut-card .cut-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.3rem; }
+    .cut-card .cut-desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
+    .cut-card .cut-price { font-size: 1rem; color: var(--ember); font-weight: 700; }
+
+    /* ABOUT */
+    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
+    .about-img { position: relative; }
+    .about-img img { width: 100%; height: 420px; object-fit: cover; border-radius: 4px; }
+    .about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
+    .about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
+    .about-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
+    .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; text-align: center; }
+    .about-stat .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--ember); }
+    .about-stat .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
+
+    /* MENU */
+    .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
+    .menu-col h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(201,146,42,0.2); }
+    .menu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 1rem; }
+    .menu-item-name { font-size: 0.95rem; color: var(--text); }
+    .menu-item-desc { font-size: 0.78rem; color: var(--text-muted); }
+    .menu-item-price { font-size: 0.95rem; color: var(--ember); font-weight: 700; white-space: nowrap; }
+
+    /* WINE */
+    #wine { background: var(--bg-card); }
+    .wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem; }
+    .wine-card { background: var(--bg); border: 1px solid rgba(201,146,42,0.1); border-radius: 4px; padding: 1.2rem; text-align: center; }
+    .wine-card .wine-name { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--cream); margin-bottom: 0.3rem; }
+    .wine-card .wine-region { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.5rem; }
+    .wine-card .wine-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; }
+    .wine-card .wine-glass { font-size: 0.8rem; color: var(--text-muted); }
+
+    /* REVIEWS */
+    .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
+    .review-card { background: var(--bg-card); border: 1px solid rgba(201,146,42,0.1); border-radius: 8px; padding: 1.5rem; }
+    .review-card .stars { color: var(--ember); font-size: 0.9rem; margin-bottom: 0.8rem; }
+    .review-card .review-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
+    .review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
+
+    /* LOCATION */
+    #location { background: var(--bg-card); }
+    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
+    .hours-table { width: 100%; }
+    .hours-table tr { border-bottom: 1px solid rgba(201,146,42,0.08); }
+    .hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
+    .hours-table td:first-child { color: var(--text-muted); }
+    .hours-table td:last-child { color: var(--text); text-align: right; }
+    .address-block { margin-top: 2rem; }
+    .address-block p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
+    .address-block strong { color: var(--gold); font-weight: 400; }
+
+    /* FOOTER */
+    footer { background: #070504; padding: 4rem 2rem 2rem; text-align: center; }
+    .footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
+    footer p { font-size: 0.8rem; color: var(--text-muted); }
+
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
+    .reveal.visible { opacity: 1; transform: translateY(0); }
+
+    @media (max-width: 768px) {
+      .nav-links { display: none; }
+      .about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
+      .about-img::after { display: none; }
+    }
+  </style>
+</head>
+<body>
+
+<nav id="navbar">
+  <a href="#" class="nav-logo">THE ARGENTINE GRILL</a>
+  <ul class="nav-links">
+    <li><a href="#cuts">Cuts</a></li>
+    <li><a href="#about">Our Story</a></li>
+    <li><a href="#wine">Wine & Bar</a></li>
+    <li><a href="#reviews">Reviews</a></li>
+    <li><a href="#location" class="nav-cta">Reserve</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <div class="hero-bg"></div>
+  <div class="hero-embers"></div>
+  <div class="hero-content">
+    <p class="hero-tag">★ Benalmádena Costa ★</p>
+    <h1>The Argentine<br>Grill</h1>
+    <p class="hero-subtitle">Dry-Aged Beef · Open Fire · Argentine Heritage</p>
+    <p class="hero-desc">Premium cuts from Argentina and Uruguay, dry-aged in-house for 45 days. Wood-fired grill, premium wine list, and the warmth of South American hospitality on the Costa del Sol.</p>
+    <div class="hero-btns">
+      <a href="#cuts" class="btn-primary">View Our Cuts</a>
+      <a href="#location" class="btn-ghost">Reserve a Table</a>
+    </div>
+  </div>
+</section>
+
+<section id="cuts">
+  <div class="container">
+    <p class="section-tag">From the Grill</p>
+    <h2 class="section-title">Premium <em>Cuts</em></h2>
+    <div class="cuts-grid">
+      <div class="cut-card reveal">
+        <img src="https://images.unsplash.com/photo-1558030006-450675393462?w=400&q=75" alt="Ribeye" loading="lazy">
+        <div class="cut-info">
+          <div class="cut-name">Ribeye 400g</div>
+          <div class="cut-desc">45-day dry-aged, wood-fired, rosemary butter</div>
+          <div class="cut-price">€34.00</div>
+        </div>
+      </div>
+      <div class="cut-card reveal">
+        <img src="https://images.unsplash.com/photo-1600891964092-4316c288032e?w=400&q=75" alt="Filet Mignon" loading="lazy">
+        <div class="cut-info">
+          <div class="cut-name">Filet Mignon 280g</div>
+          <div class="cut-desc">Prime cut, peppercorn crust, red wine jus</div>
+          <div class="cut-price">€38.00</div>
+        </div>
+      </div>
+      <div class="cut-card reveal">
+        <img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&q=75" alt="T-Bone" loading="lazy">
+        <div class="cut-info">
+          <div class="cut-name">T-Bone 600g</div>
+          <div class="cut-desc">For two, dry-aged 30 days, chimichurri side</div>
+          <div class="cut-price">€48.00</div>
+        </div>
+      </div>
+      <div class="cut-card reveal">
+        <img src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=400&q=75" alt="Tomahawk" loading="lazy">
+        <div class="cut-info">
+          <div class="cut-name">Tomahawk 1.2kg</div>
+          <div class="cut-desc">Shareable, 60-day dry-aged, bone-in ribeye</div>
+          <div class="cut-price">€65.00</div>
+        </div>
+      </div>
+      <div class="cut-card reveal">
+        <img src="https://images.unsplash.com/photo-1529694157872-4e0c0f3b238b?w=400&q=75" alt="Wagyu" loading="lazy">
+        <div class="cut-info">
+          <div class="cut-name">Wagyu A5 200g</div>
+          <div class="cut-desc">Japanese Wagyu, truffle mash, red wine reduction</div>
+          <div class="cut-price">€85.00</div>
+        </div>
+      </div>
+      <div class="cut-card reveal">
+        <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=75" alt="Lamb Chops" loading="lazy">
+        <div class="cut-info">
+          <div class="cut-name">Lamb Chops</div>
+          <div class="cut-desc">Patagonian lamb, herb crust, mint sauce</div>
+          <div class="cut-price">€28.00</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="about">
+  <div class="container">
+    <div class="about-grid">
+      <div class="about-img reveal">
+        <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800&q=80" alt="Grill master" loading="lazy">
+      </div>
+      <div class="about-text reveal">
+        <p class="section-tag">Our Story</p>
+        <h3>Fire, tradition, and the perfect steak</h3>
+        <p>The Argentine Grill opened in 2008, bringing the asado culture of Buenos Aires to the Costa del Sol. Our parilla (traditional grill) burns at over 400°C, sealing each cut with a perfect char while keeping the inside tender and juicy.</p>
+        <p>Every week, we receive premium beef from Argentina — grass-fed, free-range — that's dry-aged in our climate-controlled cabinet for up to 60 days. The result is a depth of flavour that modern cooking can't replicate.</p>
+        <p>We are not a steakhouse. We are a temple to the grill.</p>
+        <div class="about-stats">
+          <div class="about-stat"><div class="stat-num">45+</div><div class="stat-label">Days Dry-Aged</div></div>
+          <div class="about-stat"><div class="stat-num">400°</div><div class="stat-label">Grill Temp °C</div></div>
+          <div class="about-stat"><div class="stat-num">17</div><div class="stat-label">Years Open</div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="wine">
+  <div class="container">
+    <p class="section-tag">Wine & Bar</p>
+    <h2 class="section-title">The <em>Wine List</em></h2>
+    <div class="wine-grid">
+      <div class="wine-card">
+        <div class="wine-name">Malbec Reserva</div>
+        <div class="wine-region">Mendoza, Argentina</div>
+        <div class="wine-price">from €28</div>
+        <div class="wine-glass">Glass €6</div>
+      </div>
+      <div class="wine-card">
+        <div class="wine-name">Cabernet Sauvignon</div>
+        <div class="wine-region">Uco Valley, Argentina</div>
+        <div class="wine-price">from €32</div>
+        <div class="wine-glass">Glass €7</div>
+      </div>
+      <div class="wine-card">
+        <div class="wine-name">Bonarda Vieja</div>
+        <div class="wine-region">San Juan, Argentina</div>
+        <div class="wine-price">from €22</div>
+        <div class="wine-glass">Glass €5</div>
+      </div>
+      <div class="wine-card">
+        <div class="wine-name">Torrontés</div>
+        <div class="wine-region">Salta, Argentina</div>
+        <div class="wine-price">from €20</div>
+        <div class="wine-glass">Glass €5</div>
+      </div>
+      <div class="wine-card">
+        <div class="wine-name">Chardonnay Barrel</div>
+        <div class="wine-region">Patagonia, Argentina</div>
+        <div class="wine-price">from €24</div>
+        <div class="wine-glass">Glass €6</div>
+      </div>
+      <div class="wine-card">
+        <div class="wine-name">Sangiovese Riserva</div>
+        <div class="wine-region">Tuscany, Italy</div>
+        <div class="wine-price">from €30</div>
+        <div class="wine-glass">Glass €7</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="reviews">
+  <div class="container">
+    <p class="section-tag">Guest Reviews</p>
+    <h2 class="section-title">What <em>Guests</em> Say</h2>
+    <div class="reviews-grid">
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"The best steak I've had in Spain. The ribeye was perfectly charred on the outside and melt-in-the-mouth tender inside. The Malbec list is excellent. Will be back every week."</p>
+        <div class="review-author">— Darren T., Google</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"We came for our anniversary and it exceeded all expectations. The T-bone for two is incredible. Service was warm and attentive. A hidden gem in Benalmádena."</p>
+        <div class="review-author">— Louise M., TripAdvisor</div>
+      </div>
+      <div class="review-card reveal">
+        <div class="stars">★★★★★</div>
+        <p class="review-text">"As an Argentine, I'm picky about my asado. This place gets it right. The wood-fired flavour, the quality of the beef — proper authentic parilla. Salud!"</p>
+        <div class="review-author">— Carlos R., TheFork</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="location">
+  <div class="container">
+    <p class="section-tag">Find Us</p>
+    <h2 class="section-title">Reserve Your <em>Table</em></h2>
+    <div class="info-grid">
+      <div class="reveal">
+        <h3 style="font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
+        <table class="hours-table">
+          <tr><td>Monday</td><td>Closed</td></tr>
+          <tr><td>Tuesday — Thursday</td><td>19:00 — 23:00</td></tr>
+          <tr><td>Friday — Saturday</td><td>19:00 — 00:00</td></tr>
+          <tr><td>Sunday</td><td>13:00 — 22:00</td></tr>
+        </table>
+        <div class="address-block">
+          <p><strong>📍 Address</strong></p>
+          <p>Av. Antonio Machado, 112<br>29630 Benalmádena Costa<br>Spain</p>
+          <p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
+          <p>+34 952 568 901<br>reservations@theargentinegrill.es</p>
+        </div>
+      </div>
+      <div class="reveal">
+        <div style="border-radius:4px;overflow:hidden;border:1px solid rgba(201,146,42,0.2);">
+          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <p class="footer-logo">THE ARGENTINE GRILL</p>
+  <p>Av. Antonio Machado, 112 · 29630 Benalmádena Costa · +34 952 568 901</p>
+  <p style="margin-top:1rem;opacity:0.4;">© 2026 The Argentine Grill. All rights reserved.</p>
+</footer>
+
+<script>
+  const nav = document.getElementById('navbar');
+  window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
+  document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
+  const revealEls = document.querySelectorAll('.reveal');
+  const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
+  revealEls.forEach(el => observer.observe(el));
+</script>
+</body>
+</html>
diff --git a/demos/ristorante/sushi/index.html b/demos/ristorante/sushi/index.html
new file mode 100644
index 0000000..196030d
--- /dev/null
+++ b/demos/ristorante/sushi/index.html
@@ -0,0 +1,438 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kaito Sushi — Omakase & Izakaya</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Playfair+Display:ital,wght@1,400&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --ink: #0a0a0a;
+      --paper: #f5f0e8;
+      --wood: #8b6b4a;
+      --wood-dark: #5c3d2e;
+      --cream: #faf8f4;
+      --text: #1a1a1a;
+      --muted: #7a6a5a;
+      --gold: #c9a055;
+      --red: #b83b3b;
+    }
+    html { scroll-behavior: smooth; }
+    body { font-family: 'Noto Sans JP', sans-serif; background: var(--ink); color: var(--cream); line-height: 1.7; overflow-x: hidden; }
+
+    /* SLIDE-UP REVEAL */
+    .reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
+    .reveal.visible { opacity: 1; transform: translateY(0); }
+
+    /* NAV */
+    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.5rem 3rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.4s; }
+    nav.scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); }
+    .nav-logo { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; color: var(--cream); font-weight: 300; letter-spacing: 0.2em; text-decoration: none; }
+    .nav-links { display: flex; gap: 2.5rem; list-style: none; }
+    .nav-links a { color: rgba(250,248,244,0.5); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.3s; }
+    .nav-links a:hover { color: var(--cream); }
+    .nav-cta { border: 1px solid rgba(201,160,85,0.5); color: var(--gold); padding: 0.4rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: all 0.3s; }
+    .nav-cta:hover { background: var(--gold); color: var(--ink); }
+
+    /* HERO — Full screen, centered, very minimal */
+    .hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
+    .hero-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1553621042-f6e147245754?w=1600&q=80') center/cover no-repeat; filter: brightness(0.35) saturate(0.6); }
+    .hero-rule { width: 1px; height: 60px; background: var(--gold); margin: 0 auto 2rem; opacity: 0; animation: fadeIn 1s 0.3s forwards; }
+    .hero-eyebrow { font-size: 0.65rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.4s forwards; }
+    .hero h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; color: var(--cream); letter-spacing: 0.3em; line-height: 1.1; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.6s forwards; }
+    .hero-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.9rem, 2vw, 1.2rem); color: rgba(250,248,244,0.5); letter-spacing: 0.2em; margin-bottom: 2.5rem; opacity: 0; animation: fadeUp 1s 0.8s forwards; }
+    .hero-btns { display: flex; gap: 1.2rem; justify-content: center; opacity: 0; animation: fadeUp 1s 1s forwards; }
+    .btn-primary { background: var(--gold); color: var(--ink); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; transition: all 0.3s; }
+    .btn-primary:hover { background: var(--cream); }
+    .btn-ghost { border: 1px solid rgba(250,248,244,0.25); color: var(--cream); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
+    .btn-ghost:hover { border-color: var(--cream); }
+
+    /* KANJI DECORATION */
+    .kanji-strip { background: var(--wood-dark); padding: 1.2rem; text-align: center; }
+    .kanji-strip span { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; color: rgba(250,248,244,0.4); letter-spacing: 0.5em; margin: 0 1rem; }
+
+    /* NARRATIVE / ABOUT — very editorial */
+    .editorial { padding: 8rem 3rem; max-width: 860px; margin: 0 auto; }
+    .editorial-eyebrow { font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
+    .editorial h2 { font-family: 'Noto Serif JP', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--cream); line-height: 1.3; margin-bottom: 2rem; }
+    .editorial p { color: rgba(250,248,244,0.6); font-size: 0.95rem; line-height: 2; margin-bottom: 1.5rem; font-weight: 300; }
+    .editorial p:last-child { margin-bottom: 0; }
+
+    /* HORIZONTAL MENU — full width horizontal scrolling panels */
+    .menu-scroll { background: var(--paper); color: var(--text); overflow-x: auto; }
+    .menu-scroll-inner { display: flex; min-width: max-content; }
+    .menu-panel { min-width: 320px; max-width: 360px; padding: 3rem 2.5rem; border-right: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }
+    .menu-panel:last-child { border-right: none; }
+    .menu-panel-tag { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wood); margin-bottom: 1.5rem; }
+    .menu-panel-title { font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; color: var(--text); margin-bottom: 0.3rem; }
+    .menu-panel-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 2rem; font-style: italic; }
+    .menu-dish { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
+    .menu-dish:last-child { border-bottom: none; }
+    .menu-dish-name { font-size: 0.9rem; color: var(--text); }
+    .menu-dish-desc { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
+    .menu-dish-price { font-size: 0.9rem; color: var(--wood); font-weight: 600; white-space: nowrap; }
+
+    /* OMAKASE FEATURE — asymmetric layout */
+    .omakase { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
+    .omakase-img { background: url('https://images.unsplash.com/photo-1617196034796-73dfa7b1fd56?w=900&q=80') center/cover no-repeat; min-height: 400px; }
+    .omakase-text { background: var(--wood-dark); padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; }
+    .omakase-tag { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
+    .omakase-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; line-height: 1.4; }
+    .omakase-desc { color: rgba(250,248,244,0.6); font-size: 0.9rem; line-height: 1.9; margin-bottom: 2rem; font-weight: 300; }
+    .omakase-price { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.3rem; }
+    .omakase-amount { font-family: 'Noto Serif JP', serif; font-size: 2.5rem; color: var(--cream); font-weight: 300; margin-bottom: 2rem; }
+    .omakase-link { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,160,85,0.3); padding-bottom: 0.2rem; transition: border-color 0.3s; }
+    .omakase-link:hover { border-color: var(--gold); }
+
+    /* IZAKAYA / DRINKS — dark section */
+    .izakaya { background: var(--ink); padding: 6rem 3rem; }
+    .izakaya-inner { max-width: 1100px; margin: 0 auto; }
+    .izakaya-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }
+    .izakaya-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); }
+    .izakaya-title span { display: block; font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; font-family: 'Noto Sans JP', sans-serif; }
+    .drinks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
+    .drink-item { border: 1px solid rgba(201,160,85,0.1); padding: 1.5rem; border-radius: 2px; }
+    .drink-item .drink-name { font-family: 'Noto Serif JP', serif; font-size: 1rem; color: var(--cream); margin-bottom: 0.2rem; }
+    .drink-item .drink-style { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.5rem; }
+    .drink-item .drink-price { font-size: 0.85rem; color: var(--gold); }
+
+    /* REVIEWS — 3 columns, minimal */
+    .reviews-section { background: var(--paper); padding: 6rem 3rem; }
+    .reviews-inner { max-width: 1100px; margin: 0 auto; }
+    .reviews-header { text-align: center; margin-bottom: 3rem; }
+    .reviews-header h2 { font-family: 'Noto Serif JP', serif; font-size: 2rem; font-weight: 300; color: var(--text); margin-bottom: 0.5rem; }
+    .reviews-header p { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
+    .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,0,0,0.08); }
+    .review-item { background: var(--paper); padding: 2.5rem 2rem; }
+    .review-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
+    .review-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.2rem; }
+    .review-author { font-size: 0.75rem; color: var(--text); font-weight: 500; letter-spacing: 0.05em; }
+
+    /* LOCATION — very minimal, 2 columns */
+    .location { background: var(--ink); padding: 6rem 3rem; border-top: 1px solid rgba(201,160,85,0.08); }
+    .location-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
+    .location-block h3 { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; }
+    .hours-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.85rem; }
+    .hours-row span:first-child { color: rgba(250,248,244,0.4); }
+    .hours-row span:last-child { color: var(--cream); }
+    .contact-line { font-size: 0.85rem; color: rgba(250,248,244,0.4); margin-bottom: 0.5rem; }
+    .contact-line a { color: var(--gold); text-decoration: none; }
+    .map-placeholder { border: 1px solid rgba(201,160,85,0.15); overflow: hidden; border-radius: 2px; }
+    .map-placeholder iframe { width: 100%; height: 100%; min-height: 300px; border: none; display: block; filter: brightness(0.8) saturate(0.5); }
+
+    /* FOOTER */
+    footer { background: #050505; padding: 3rem; text-align: center; border-top: 1px solid rgba(201,160,85,0.08); }
+    .footer-logo { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; color: var(--cream); font-weight: 300; letter-spacing: 0.4em; margin-bottom: 1rem; }
+    footer p { font-size: 0.72rem; color: rgba(250,248,244,0.25); letter-spacing: 0.1em; }
+
+    /* ANIMATIONS */
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+    /* RESPONSIVE */
+    @media (max-width: 768px) {
+      nav { padding: 1rem 1.5rem; }
+      .nav-links { display: none; }
+      .hero h1 { letter-spacing: 0.15em; }
+      .omakase { grid-template-columns: 1fr; }
+      .reviews-grid { grid-template-columns: 1fr; }
+      .location-inner { grid-template-columns: 1fr; }
+      .editorial { padding: 5rem 1.5rem; }
+    }
+  </style>
+</head>
+<body>
+
+<nav id="navbar">
+  <a href="#" class="nav-logo">KAITO</a>
+  <ul class="nav-links">
+    <li><a href="#about">About</a></li>
+    <li><a href="#menu">Menu</a></li>
+    <li><a href="#omakase">Omakase</a></li>
+    <li><a href="#drinks">Izakaya</a></li>
+    <li><a href="#location" class="nav-cta">Reserve</a></li>
+  </ul>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-bg"></div>
+  <div class="hero-rule"></div>
+  <p class="hero-eyebrow">Omakase · Izakaya · Benalmádena Costa</p>
+  <h1>KAITO</h1>
+  <p class="hero-sub">Sushi & Japanese Kitchen</p>
+  <div class="hero-btns">
+    <a href="#menu" class="btn-primary">View Menu</a>
+    <a href="#omakase" class="btn-ghost">Omakase Experience</a>
+  </div>
+</section>
+
+<!-- KANJI STRIP -->
+<div class="kanji-strip">
+  <span>壽司</span>
+  <span>職人の技</span>
+  <span>巻物</span>
+  <span>味</span>
+</div>
+
+<!-- ABOUT -->
+<section class="editorial" id="about">
+  <p class="editorial-eyebrow reveal">Our Philosophy</p>
+  <h2 class="reveal">Every piece tells a story of the sea</h2>
+  <p class="reveal">Kaito opened in 2018 with a single mission: to bring the discipline and beauty of Japanese sushi craft to the Costa del Sol. Our head chef, Kenji Tanaka, trained for 12 years in Tokyo's Ginza district before bringing his knife and his philosophy to Spain.</p>
+  <p class="reveal">We buy from the same suppliers as the best sushi bars in Barcelona — bluefin tuna from the Strait of Gibraltar, wild salmon from Norway, otoro from Tsukiji's successor markets. Every morning our fish arrives in ice, every evening it becomes art on your plate.</p>
+  <p class="reveal">Omakase means "I leave it up to you." When you sit at our counter, you surrender to the chef's judgement. This is the highest form of sushi dining — trust, technique, and a meal that changes with the seasons.</p>
+</section>
+
+<!-- HORIZONTAL SCROLLING MENU -->
+<section class="menu-scroll" id="menu">
+  <div class="menu-scroll-inner">
+    <div class="menu-panel">
+      <p class="menu-panel-tag">前菜 / Starters</p>
+      <h3 class="menu-panel-title">Starters</h3>
+      <p class="menu-panel-sub">Small dishes, big flavour</p>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Edamame</div><div class="menu-dish-desc">Sea salt, yuzu chili</div></div>
+        <div class="menu-dish-price">€5</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Miso Soup</div><div class="menu-dish-desc">Dashi, silken tofu, wakame</div></div>
+        <div class="menu-dish-price">€4</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Gyoza (6pc)</div><div class="menu-dish-desc">Pork & chive, ponzu dip</div></div>
+        <div class="menu-dish-price">€8</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Tako Wasabi</div><div class="menu-dish-desc">Octopus, wasabi mayo, tobiko</div></div>
+        <div class="menu-dish-price">€12</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name"> Agedashi Tofu</div><div class="menu-dish-desc">Fried tofu, dashi broth, katsuobushi</div></div>
+        <div class="menu-dish-price">€7</div>
+      </div>
+    </div>
+
+    <div class="menu-panel">
+      <p class="menu-panel-tag">握り / Nigiri</p>
+      <h3 class="menu-panel-title">Nigiri</h3>
+      <p class="menu-panel-sub">Two pieces per order</p>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Salmon</div><div class="menu-dish-desc">Wild Norwegian, sea salt</div></div>
+        <div class="menu-dish-price">€7</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Bluefin Tuna</div><div class="menu-dish-desc">Gibraltar Strait, wasabi</div></div>
+        <div class="menu-dish-price">€9</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Otoro</div><div class="menu-dish-desc">Fatty tuna belly, pickled ginger</div></div>
+        <div class="menu-dish-price">€14</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Sea Bass</div><div class="menu-dish-desc">Yellowtail, ponzu, chive</div></div>
+        <div class="menu-dish-price">€8</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Ebi</div><div class="menu-dish-desc">Tiger prawn, yuzu mayo</div></div>
+        <div class="menu-dish-price">€7</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Ikura</div><div class="menu-dish-desc">Salmon roe, shiso, nori</div></div>
+        <div class="menu-dish-price">€12</div>
+      </div>
+    </div>
+
+    <div class="menu-panel">
+      <p class="menu-panel-tag">巻き物 / Rolls</p>
+      <h3 class="menu-panel-title">Rolls</h3>
+      <p class="menu-panel-sub">8 pieces per roll</p>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Rainbow Roll</div><div class="menu-dish-desc">Salmon, tuna, avocado, cucumber</div></div>
+        <div class="menu-dish-price">€16</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Dragon Roll</div><div class="menu-dish-desc">Eel, cucumber, avocado, unagi sauce</div></div>
+        <div class="menu-dish-price">€17</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Spicy Tuna</div><div class="menu-dish-desc">Tuna, sriracha mayo, cucumber, crispy shallot</div></div>
+        <div class="menu-dish-price">€14</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">California Roll</div><div class="menu-dish-desc">Crab stick, avocado, cucumber, tobiko</div></div>
+        <div class="menu-dish-price">€12</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Vegetable Roll</div><div class="menu-dish-desc">Avocado, cucumber, carrot, asparagus</div></div>
+        <div class="menu-dish-price">€9</div>
+      </div>
+    </div>
+
+    <div class="menu-panel">
+      <p class="menu-panel-tag">メイン / Mains</p>
+      <h3 class="menu-panel-title">Mains</h3>
+      <p class="menu-panel-sub">Rice bowls & cooked dishes</p>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Salmon Teriyaki</div><div class="menu-dish-desc">Grilled salmon, teriyaki, steamed rice, salad</div></div>
+        <div class="menu-dish-price">€18</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Chicken Katsu</div><div class="menu-dish-desc">Breaded chicken, katsu curry, jasmine rice</div></div>
+        <div class="menu-dish-price">€16</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Tonkotsu Ramen</div><div class="menu-dish-desc">12-hour broth, chashu pork, soft egg, nori, noodles</div></div>
+        <div class="menu-dish-price">€17</div>
+      </div>
+      <div class="menu-dish">
+        <div><div class="menu-dish-name">Vegetable Tempura</div><div class="menu-dish-desc">Seasonal vegetables, light batter, tentsuyu dip</div></div>
+        <div class="menu-dish-price">€14</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- OMAKASE FEATURE -->
+<section class="omakase" id="omakase">
+  <div class="omakase-img reveal"></div>
+  <div class="omakase-text reveal">
+    <p class="omakase-tag">体験 / Omakase Experience</p>
+    <h3 class="omakase-title">Let the chef decide your meal</h3>
+    <p class="omakase-desc">Sit at the counter. Watch the knife. Surrender to the seasons. Our omakase menu changes every week — whatever is freshest, most seasonal, most exceptional. Typically 12–15 courses over 90 minutes.</p>
+    <p class="omakase-desc">The chef will guide you through each piece — its origin, its character, why it was chosen today. This is sushi as meditation.</p>
+    <p class="omakase-price">FROM</p>
+    <p class="omakase-amount">€65 per person</p>
+    <a href="#location" class="omakase-link">Reserve your omakase seat →</a>
+  </div>
+</section>
+
+<!-- IZAKAYA / DRINKS -->
+<section class="izakaya" id="drinks">
+  <div class="izakaya-inner">
+    <div class="izakaya-header">
+      <div>
+        <p style="font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;">居酒屋 / Drinks</p>
+        <h2 class="izakaya-title">Izakaya</h2>
+      </div>
+    </div>
+    <div class="drinks-grid">
+      <div class="drink-item">
+        <div class="drink-name">Sake Toko</div>
+        <div class="drink-style">Junmai, chilled, 300ml</div>
+        <div class="drink-price">from €18</div>
+      </div>
+      <div class="drink-item">
+        <div class="drink-name">Sake Daiginjo</div>
+        <div class="drink-style">Premium, floral notes</div>
+        <div class="drink-price">from €28</div>
+      </div>
+      <div class="drink-item">
+        <div class="drink-name">Asahi Draft</div>
+        <div class="drink-style">Japanese lager, 330ml</div>
+        <div class="drink-price">€4.50</div>
+      </div>
+      <div class="drink-item">
+        <div class="drink-name">Sapporo</div>
+        <div class="drink-style">Japanese lager, 330ml</div>
+        <div class="drink-price">€4.50</div>
+      </div>
+      <div class="drink-item">
+        <div class="drink-name"> plum wine</div>
+        <div class="drink-style">Umeshu, on the rocks</div>
+        <div class="drink-price">€7</div>
+      </div>
+      <div class="drink-item">
+        <div class="drink-name">Yuzu Highball</div>
+        <div class="drink-style">Whiskey, yuzu, soda</div>
+        <div class="drink-price">€9</div>
+      </div>
+      <div class="drink-item">
+        <div class="drink-name">Japanese Whisky</div>
+        <div class="drink-style">Suntory Toki, on the rocks</div>
+        <div class="drink-price">€10</div>
+      </div>
+      <div class="drink-item">
+        <div class="drink-name">Green Tea</div>
+        <div class="drink-style">Matcha hot, house blend</div>
+        <div class="drink-price">€4</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- REVIEWS -->
+<section class="reviews-section" id="reviews">
+  <div class="reviews-inner">
+    <div class="reviews-header">
+      <h2 class="reveal">What guests say</h2>
+      <p class="reveal">★★★★★ Google · TripAdvisor · TheFork</p>
+    </div>
+    <div class="reviews-grid">
+      <div class="review-item reveal">
+        <div class="review-stars">★★★★★</div>
+        <p class="review-text">"The omakase experience was the best meal of my life. Chef Kenji's knife work is mesmerising. The otoro melted on my tongue. An absolute must in Benalmádena."</p>
+        <div class="review-author">— Marco T., Google</div>
+      </div>
+      <div class="review-item reveal">
+        <div class="review-stars">★★★★★</div>
+        <p class="review-text">"We did the omakase for our anniversary. The chef explained every piece. The attention to detail, the seasonality, the presentation — this is Michelin-starred quality without the pretension."</p>
+        <div class="review-author">— Laura & David, TripAdvisor</div>
+      </div>
+      <div class="review-item reveal">
+        <div class="review-stars">★★★★★</div>
+        <p class="review-text">"As someone who has eaten sushi in Tokyo, this is the real thing. The fish quality is exceptional, the rice has perfect seasoning, and the sake list is impressive. Kaito is exceptional."</p>
+        <div class="review-author">— Yuki N., TheFork</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- LOCATION -->
+<section class="location" id="location">
+  <div class="location-inner">
+    <div class="location-block reveal">
+      <h3>Visit Us</h3>
+      <div class="hours-row"><span>Monday</span><span>Closed</span></div>
+      <div class="hours-row"><span>Tuesday — Thursday</span><span>18:00 — 23:00</span></div>
+      <div class="hours-row"><span>Friday — Saturday</span><span>18:00 — 00:00</span></div>
+      <div class="hours-row"><span>Sunday</span><span>13:00 — 22:00</span></div>
+      <div style="margin-top:2rem;">
+        <p class="contact-line">📍 Av. Antonio Machado, 128<br>29630 Benalmádena Costa, Spain</p>
+        <p class="contact-line" style="margin-top:0.8rem;">📞 <a href="tel:+34952572001">+34 952 572 001</a></p>
+        <p class="contact-line">✉️ <a href="mailto:info@kaitosushi.es">info@kaitosushi.es</a></p>
+      </div>
+    </div>
+    <div class="map-placeholder reveal">
+      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1=s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" allowfullscreen="" loading="lazy"></iframe>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <p class="footer-logo">KAITO</p>
+  <p>Av. Antonio Machado, 128 · 29630 Benalmádena Costa · +34 952 572 001</p>
+  <p style="margin-top:0.5rem;opacity:0.3;">© 2026 Kaito Sushi. All rights reserved.</p>
+</footer>
+
+<script>
+  const nav = document.getElementById('navbar');
+  window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
+  document.querySelectorAll('a[href^="#"]').forEach(a => {
+    a.addEventListener('click', e => { e.preventDefault();
+      const t = document.querySelector(a.getAttribute('href'));
+      if(t) t.scrollIntoView({behavior:'smooth',block:'start'});
+    });
+  });
+  const revealEls = document.querySelectorAll('.reveal');
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); }
+    });
+  }, {threshold: 0.1});
+  revealEls.forEach(el => observer.observe(el));
+</script>
+</body>
+</html>
diff --git a/diagrams/autojobs-activity.html b/diagrams/autojobs-activity.html
new file mode 100644
index 0000000..8b74c3e
--- /dev/null
+++ b/diagrams/autojobs-activity.html
@@ -0,0 +1,689 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AutoJobs — UML Activity Diagram</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #0a0e1a;
+      color: #e2e8f0;
+      padding: 40px 20px;
+      min-height: 100vh;
+    }
+    h1 {
+      text-align: center;
+      color: #f8fafc;
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 6px;
+    }
+    .subtitle {
+      text-align: center;
+      color: #475569;
+      font-size: 14px;
+      margin-bottom: 40px;
+    }
+
+    /* ============ UML SHAPES ============ */
+    .start-end {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: #10b981;
+      border: 3px solid #0f172a;
+      box-shadow: 0 0 0 3px #10b981;
+    }
+    .action {
+      background: #1e293b;
+      border: 2px solid #334155;
+      border-radius: 10px;
+      padding: 14px 20px;
+      min-width: 180px;
+      max-width: 260px;
+      text-align: center;
+      flex: 1;
+      position: relative;
+    }
+    .action-icon {
+      font-size: 18px;
+      margin-bottom: 4px;
+    }
+    .action-title {
+      font-size: 13px;
+      font-weight: 700;
+      color: #f1f5f9;
+      margin-bottom: 4px;
+    }
+    .action-detail {
+      font-size: 11px;
+      color: #64748b;
+      line-height: 1.4;
+    }
+    .action-sub {
+      background: #1a2332;
+      border: 1px solid #2d3748;
+      border-radius: 8px;
+      padding: 8px 14px;
+      min-width: 140px;
+      text-align: center;
+    }
+    .action-sub-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: #94a3b8;
+    }
+
+    .decision {
+      width: 120px;
+      height: 80px;
+      position: relative;
+      background: #1e293b;
+      border: 2px solid #f59e0b;
+      transform: rotate(45deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .decision-inner {
+      transform: rotate(-45deg);
+      text-align: center;
+    }
+    .decision-label {
+      font-size: 11px;
+      font-weight: 700;
+      color: #f59e0b;
+      text-transform: uppercase;
+    }
+    .decision-sublabel {
+      font-size: 10px;
+      color: #94a3b8;
+      margin-top: 2px;
+    }
+
+    .swimlane-header {
+      background: #0f172a;
+      border: 2px solid;
+      border-radius: 8px 8px 0 0;
+      padding: 8px 16px;
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: #fff;
+      text-align: center;
+    }
+
+    /* ============ LAYOUT ============ */
+    .diagram-wrapper {
+      max-width: 1100px;
+      margin: 0 auto;
+    }
+
+    /* Swimlanes */
+    .swimlanes {
+      display: flex;
+      gap: 16px;
+      justify-content: center;
+    }
+    .swimlane {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+      flex: 1;
+      max-width: 260px;
+      min-width: 180px;
+    }
+
+    /* Vertical flow */
+    .flow {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+    }
+
+    /* Horizontal row */
+    .row {
+      display: flex;
+      gap: 16px;
+      justify-content: center;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    /* Arrow connector */
+    .arrow {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #3b82f6;
+      font-size: 22px;
+      line-height: 1;
+    }
+    .arrow-label {
+      font-size: 10px;
+      color: #475569;
+      text-align: center;
+      margin-top: 2px;
+    }
+    .arrow-branch {
+      font-size: 10px;
+      color: #64748b;
+      margin-top: 2px;
+    }
+
+    /* Fork/join bar */
+    .fork-bar {
+      width: 4px;
+      background: linear-gradient(to bottom, #3b82f6, #6366f1);
+      border-radius: 2px;
+      height: 30px;
+    }
+    .join-bar {
+      width: 60px;
+      height: 4px;
+      background: linear-gradient(to right, #3b82f6, #6366f1);
+      border-radius: 2px;
+    }
+
+    /* Color coding */
+    .col-input { --lane-color: #8b5cf6; }
+    .col-fetch { --lane-color: #0891b2; }
+    .col-classify { --lane-color: #d97706; }
+    .col-eval { --lane-color: #059669; }
+    .col-gen { --lane-color: #db2777; }
+    .col-pipeline { --lane-color: #4f46e5; }
+    .col-alert { --lane-color: #dc2626; }
+
+    .action.col-input { border-color: var(--lane-color); }
+    .action.col-fetch { border-color: var(--lane-color); }
+    .action.col-classify { border-color: var(--lane-color); }
+    .action.col-eval { border-color: var(--lane-color); }
+    .action.col-gen { border-color: var(--lane-color); }
+    .action.col-pipeline { border-color: var(--lane-color); }
+    .action.col-alert { border-color: var(--lane-color); }
+
+    .swimlane-header.col-input { background: var(--lane-color); border-color: var(--lane-color); }
+    .swimlane-header.col-fetch { background: var(--lane-color); border-color: var(--lane-color); }
+    .swimlane-header.col-classify { background: var(--lane-color); border-color: var(--lane-color); }
+    .swimlane-header.col-eval { background: var(--lane-color); border-color: var(--lane-color); }
+    .swimlane-header.col-gen { background: var(--lane-color); border-color: var(--lane-color); }
+    .swimlane-header.col-pipeline { background: var(--lane-color); border-color: var(--lane-color); }
+    .swimlane-header.col-alert { background: var(--lane-color); border-color: var(--lane-color); }
+
+    /* Score boxes */
+    .score-grid {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      flex-wrap: wrap;
+      background: #0f172a;
+      border: 2px solid #059669;
+      border-radius: 10px;
+      padding: 12px 16px;
+      margin: 8px 0;
+    }
+    .score-item {
+      background: #1e293b;
+      border-radius: 6px;
+      padding: 6px 10px;
+      text-align: center;
+      min-width: 90px;
+    }
+    .score-label {
+      font-size: 10px;
+      color: #64748b;
+      margin-bottom: 2px;
+    }
+    .score-value {
+      font-size: 13px;
+      font-weight: 700;
+      color: #f1f5f9;
+    }
+    .score-weight {
+      font-size: 9px;
+      color: #475569;
+    }
+
+    /* Skip/reject box */
+    .skip-box {
+      background: #0f172a;
+      border: 2px dashed #475569;
+      border-radius: 10px;
+      padding: 10px 18px;
+      text-align: center;
+      color: #64748b;
+      font-size: 12px;
+    }
+    .skip-label { color: #dc2626; font-weight: 700; }
+
+    /* Output row */
+    .output-row {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+      background: #0f172a;
+      border: 2px solid #db2777;
+      border-radius: 10px;
+      padding: 12px 16px;
+    }
+    .output-item {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 8px;
+      padding: 8px 14px;
+      text-align: center;
+      min-width: 130px;
+    }
+    .output-icon { font-size: 16px; margin-bottom: 2px; }
+    .output-title { font-size: 11px; font-weight: 700; color: #f1f5f9; }
+    .output-detail { font-size: 10px; color: #64748b; }
+
+    /* Pipeline stages */
+    .pipeline-row {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .pipeline-item {
+      background: #1e293b;
+      border: 1px solid;
+      border-radius: 8px;
+      padding: 10px 14px;
+      min-width: 130px;
+      text-align: center;
+    }
+    .pipeline-item.p-wishlist { border-color: #8b5cf6; }
+    .pipeline-item.p-applied { border-color: #06b6d4; }
+    .pipeline-item.p-interview { border-color: #f59e0b; }
+    .pipeline-item.p-result { border-color: #10b981; }
+    .pipeline-icon { font-size: 16px; }
+    .pipeline-title { font-size: 12px; font-weight: 700; color: #f1f5f9; margin-top: 2px; }
+    .pipeline-detail { font-size: 10px; color: #64748b; }
+
+    /* Horus bot */
+    .horus-box {
+      background: #0f172a;
+      border: 2px solid #dc2626;
+      border-radius: 10px;
+      padding: 12px 20px;
+      text-align: center;
+    }
+    .horus-title { font-size: 13px; font-weight: 700; color: #dc2626; }
+    .horus-detail { font-size: 11px; color: #64748b; margin-top: 2px; }
+
+    /* Arrows between pipeline items */
+    .pipe-arrow {
+      color: #3b82f6;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    /* Separator */
+    .sep {
+      border: none;
+      border-top: 1px dashed #1e293b;
+      margin: 20px 0;
+    }
+
+    /* Legend */
+    .legend {
+      max-width: 800px;
+      margin: 40px auto 0;
+    }
+    .legend-title {
+      text-align: center;
+      font-size: 11px;
+      color: #475569;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 12px;
+    }
+    .legend-items {
+      display: flex;
+      gap: 16px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: #64748b;
+    }
+    .legend-swatch {
+      width: 14px;
+      height: 14px;
+      border-radius: 4px;
+      border: 2px solid;
+    }
+
+    .note {
+      max-width: 700px;
+      margin: 24px auto 0;
+      background: #0f172a;
+      border: 1px solid #1e293b;
+      border-radius: 8px;
+      padding: 14px 18px;
+      font-size: 12px;
+      color: #64748b;
+      line-height: 1.7;
+    }
+    .note strong { color: #94a3b8; }
+
+    @media (max-width: 768px) {
+      .swimlanes { flex-direction: column; }
+      .swimlane { max-width: 100%; }
+    }
+  </style>
+</head>
+<body>
+
+<h1>AutoJobs — UML Activity Diagram</h1>
+<p class="subtitle">hostpioneers.com/autojobs · Complete Job Search Pipeline</p>
+
+<div class="diagram-wrapper">
+
+  <!-- START -->
+  <div class="flow">
+    <div class="start-end"></div>
+    <div class="arrow">▼</div>
+
+    <!-- STEP 1: INPUT -->
+    <div class="row">
+      <div class="action col-input">
+        <div class="action-icon">📋</div>
+        <div class="action-title">USER INPUT</div>
+        <div class="action-detail">Paste job URL OR description text OR fill manual fields</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+    <div class="arrow-label">job_posted()</div>
+
+    <!-- STEP 2: FETCH -->
+    <div class="row">
+      <div class="action col-fetch">
+        <div class="action-icon">🔍</div>
+        <div class="action-title">FETCH & PARSE</div>
+        <div class="action-detail">Extract: title, company, description, board type</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+    <div class="arrow-label">Perplexity API + web scraping</div>
+
+    <div class="row" style="margin-top:8px;">
+      <div class="action-sub">
+        <div class="action-sub-title">📡 Company info (Crunchbase, LinkedIn, website)</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+
+    <!-- STEP 3: CLASSIFY -->
+    <div class="row">
+      <div class="action col-classify">
+        <div class="action-icon">🏷️</div>
+        <div class="action-title">CLASSIFY ROLE</div>
+        <div class="action-detail">Detect archetype, seniority level, location</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+
+    <!-- Classify sub-items -->
+    <div class="row">
+      <div class="action-sub" style="border-color:#d97706;">
+        <div class="action-sub-title">🤖 Voice AI / Agentic / Backend / Full-Stack</div>
+      </div>
+      <div class="action-sub" style="border-color:#d97706;">
+        <div class="action-sub-title">📊 Junior / Mid / Senior / Staff</div>
+      </div>
+      <div class="action-sub" style="border-color:#d97706;">
+        <div class="action-sub-title">🌍 Remote / Spain / EU / US</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+
+    <!-- STEP 4: EVALUATE -->
+    <div class="action col-eval" style="max-width:700px; border-color:#059669;">
+      <div class="action-icon">📐</div>
+      <div class="action-title">EVALUATE — 6 Dimensions</div>
+      <div class="action-detail">Score each 0–100, compute weighted composite score</div>
+    </div>
+
+    <!-- SCORING GRID -->
+    <div class="score-grid">
+      <div class="score-item">
+        <div class="score-label">CV Match</div>
+        <div class="score-value">0–100</div>
+        <div class="score-weight">× 0.25</div>
+      </div>
+      <div class="score-item">
+        <div class="score-label">Comp Fit</div>
+        <div class="score-value">0–100</div>
+        <div class="score-weight">× 0.20</div>
+      </div>
+      <div class="score-item">
+        <div class="score-label">Seniority</div>
+        <div class="score-value">0–100</div>
+        <div class="score-weight">× 0.15</div>
+      </div>
+      <div class="score-item">
+        <div class="score-label">Culture</div>
+        <div class="score-value">0–100</div>
+        <div class="score-weight">× 0.15</div>
+      </div>
+      <div class="score-item">
+        <div class="score-label">Tech Stack</div>
+        <div class="score-value">0–100</div>
+        <div class="score-weight">× 0.15</div>
+      </div>
+      <div class="score-item">
+        <div class="score-label">Interview</div>
+        <div class="score-value">0–100</div>
+        <div class="score-weight">× 0.10</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+    <div class="arrow-label">composite_score = weighted_average()</div>
+
+    <!-- DECISION -->
+    <div class="decision">
+      <div class="decision-inner">
+        <div class="decision-label">SCORE ≥ 70?</div>
+        <div class="decision-sublabel">decision gate</div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div style="display:flex;flex-direction:column;align-items:center;gap:0;">
+        <div class="arrow-label" style="color:#10b981;">YES</div>
+        <div class="arrow">▼</div>
+      </div>
+      <div style="display:flex;flex-direction:column;align-items:center;gap:0;">
+        <div class="arrow-label" style="color:#dc2626;">NO</div>
+        <div class="arrow">▼</div>
+      </div>
+    </div>
+
+    <!-- YES branch: Generate -->
+    <div class="action col-gen" style="border-color:#db2777;">
+      <div class="action-icon">✨</div>
+      <div class="action-title">GENERATE CONTENT</div>
+      <div class="action-detail">If score ≥ 70 → CV PDF + Cover Letter + Interview Prep</div>
+    </div>
+
+    <!-- NO branch: Skip -->
+    <div class="skip-box" style="margin-top: 8px;">
+      <span class="skip-label">⏭️ SKIP</span> — Not recommended
+    </div>
+
+    <!-- Arrows converge back to flow -->
+    <div style="display:flex;gap:120px;justify-content:center;margin:8px 0;">
+      <div class="fork-bar"></div>
+      <div class="fork-bar"></div>
+    </div>
+    <div class="join-bar" style="margin:0 auto;"></div>
+
+    <div class="arrow">▼</div>
+
+    <!-- OUTPUT -->
+    <div class="output-row">
+      <div class="output-item">
+        <div class="output-icon">📄</div>
+        <div class="output-title">CV PDF</div>
+        <div class="output-detail">ATS-optimized, keyword injected</div>
+      </div>
+      <div class="output-item">
+        <div class="output-icon">✉️</div>
+        <div class="output-title">Cover Letter</div>
+        <div class="output-detail">Personalized, 3 paragraphs</div>
+      </div>
+      <div class="output-item">
+        <div class="output-icon">🎯</div>
+        <div class="output-title">Interview Prep</div>
+        <div class="output-detail">Questions + STAR stories</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+
+    <!-- STEP 6: PIPELINE -->
+    <div class="action col-pipeline" style="max-width:700px; border-color:#4f46e5;">
+      <div class="action-icon">📌</div>
+      <div class="action-title">PIPELINE — Kanban Board</div>
+      <div class="action-detail">Job moves through stages as user takes action</div>
+    </div>
+
+    <div class="pipeline-row" style="margin-top:8px;">
+      <div class="pipeline-item p-wishlist">
+        <div class="pipeline-icon">📋</div>
+        <div class="pipeline-title">WISHLIST</div>
+        <div class="pipeline-detail">Score ≥ 70, not yet applied</div>
+      </div>
+      <div class="pipe-arrow">→</div>
+      <div class="pipeline-item p-applied">
+        <div class="pipeline-icon">🚀</div>
+        <div class="pipeline-title">APPLIED</div>
+        <div class="pipeline-detail">User submitted application</div>
+      </div>
+      <div class="pipe-arrow">→</div>
+      <div class="pipeline-item p-interview">
+        <div class="pipeline-icon">💬</div>
+        <div class="pipeline-title">INTERVIEW</div>
+        <div class="pipeline-detail">Scheduled or completed</div>
+      </div>
+      <div class="pipe-arrow">→</div>
+      <div class="pipeline-item p-result">
+        <div class="pipeline-icon">✅</div>
+        <div class="pipeline-title">RESULT</div>
+        <div class="pipeline-detail">Offer / Rejected</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+    <div class="arrow-label">user moves cards · outcome recorded</div>
+
+    <!-- STEP 7: ALERTS -->
+    <div class="action col-alert" style="max-width:700px; border-color:#dc2626;">
+      <div class="action-icon">🔔</div>
+      <div class="action-title">TELEGRAM ALERTS</div>
+      <div class="action-detail">Horus bot notifies at key moments</div>
+    </div>
+
+    <div class="row" style="margin-top:8px;">
+      <div class="output-item" style="border-color:#dc2626;">
+        <div class="output-icon">🆕</div>
+        <div class="output-title">Evaluation done</div>
+        <div class="output-detail">Score + content ready</div>
+      </div>
+      <div class="output-item" style="border-color:#dc2626;">
+        <div class="output-icon">⏰</div>
+        <div class="output-title">Interview 24h</div>
+        <div class="output-detail">Reminder alert</div>
+      </div>
+      <div class="output-item" style="border-color:#dc2626;">
+        <div class="output-icon">🏆</div>
+        <div class="output-title">Offer received</div>
+        <div class="output-detail">Immediate alert</div>
+      </div>
+    </div>
+
+    <div class="arrow">▼</div>
+
+    <div class="horus-box">
+      <div class="horus-title">🤖 Horus Bot</div>
+      <div class="horus-detail">Telegram · @Horus_Da_Bot</div>
+    </div>
+
+    <div class="arrow">▼</div>
+
+    <!-- FEEDBACK LOOP -->
+    <div class="action" style="border-color:#475569; max-width:400px;">
+      <div class="action-icon">🔁</div>
+      <div class="action-title">ICP LEARNING LOOP — Future</div>
+      <div class="action-detail">Track conversions → auto-tune scoring weights</div>
+    </div>
+
+    <div class="arrow">▼</div>
+
+    <!-- END -->
+    <div class="start-end" style="background:#dc2626; box-shadow:0 0 0 3px #dc2626;"></div>
+
+  </div>
+</div>
+
+<!-- LEGEND -->
+<div class="legend">
+  <div class="legend-title">Color Legend</div>
+  <div class="legend-items">
+    <div class="legend-item">
+      <div class="legend-swatch" style="background:#1e293b;border-color:#8b5cf6;"></div>
+      <span>Input</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-swatch" style="background:#1e293b;border-color:#0891b2;"></div>
+      <span>Fetch</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-swatch" style="background:#1e293b;border-color:#d97706;"></div>
+      <span>Classify</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-swatch" style="background:#1e293b;border-color:#059669;"></div>
+      <span>Evaluate</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-swatch" style="background:#1e293b;border-color:#db2777;"></div>
+      <span>Generate</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-swatch" style="background:#1e293b;border-color:#4f46e5;"></div>
+      <span>Pipeline</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-swatch" style="background:#1e293b;border-color:#dc2626;"></div>
+      <span>Alert</span>
+    </div>
+  </div>
+</div>
+
+<div class="note">
+  <strong>How it works:</strong> User pastes a job URL → AutoJobs fetches & parses the listing → classifies it by role type, seniority & location → evaluates across 6 weighted dimensions (CV match, comp, seniority, culture, tech, interview feasibility) → decision gate at score 70 → if pass, generates ATS CV PDF + personalized cover letter + interview prep → job enters the pipeline board → moves Wishlist → Applied → Interview → Result as user takes action → Horus Telegram bot sends alerts at key moments. Future: ICP learning loop tracks conversions and auto-tunes scoring weights.
+</div>
+
+</body>
+</html>
diff --git a/diagrams/autojobs-flowchart.html b/diagrams/autojobs-flowchart.html
new file mode 100644
index 0000000..5e924b3
--- /dev/null
+++ b/diagrams/autojobs-flowchart.html
@@ -0,0 +1,490 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AutoJobs Pipeline — Flowchart</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #0f1117;
+      color: #e2e8f0;
+      padding: 40px 20px;
+      min-height: 100vh;
+    }
+    h1 {
+      text-align: center;
+      color: #f8fafc;
+      font-size: 24px;
+      margin-bottom: 8px;
+    }
+    .subtitle {
+      text-align: center;
+      color: #64748b;
+      font-size: 14px;
+      margin-bottom: 40px;
+    }
+    .flowchart {
+      max-width: 1100px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      align-items: center;
+    }
+    .row {
+      display: flex;
+      gap: 24px;
+      justify-content: center;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .step {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 12px;
+      padding: 16px 20px;
+      min-width: 200px;
+      max-width: 260px;
+      text-align: center;
+      flex: 1;
+    }
+    .step-num {
+      display: inline-block;
+      background: #3b82f6;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      padding: 3px 8px;
+      border-radius: 20px;
+      margin-bottom: 10px;
+    }
+    .step-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #f1f5f9;
+      margin-bottom: 8px;
+    }
+    .step-details {
+      font-size: 12px;
+      color: #94a3b8;
+      line-height: 1.5;
+    }
+    .step-details span {
+      display: block;
+    }
+    .arrow {
+      color: #3b82f6;
+      font-size: 24px;
+      text-align: center;
+      line-height: 1;
+      padding: 4px 0;
+    }
+    .arrow-label {
+      font-size: 11px;
+      color: #475569;
+      text-align: center;
+      margin-top: -8px;
+    }
+    /* Stage colors */
+    .input { border-color: #8b5cf6; }
+    .input .step-num { background: #8b5cf6; }
+    .fetch { border-color: #06b6d4; }
+    .fetch .step-num { background: #06b6d4; }
+    .classify { border-color: #f59e0b; }
+    .classify .step-num { background: #f59e0b; }
+    .eval { border-color: #10b981; }
+    .eval .step-num { background: #10b981; }
+    .gen { border-color: #ec4899; }
+    .gen .step-num { background: #ec4899; }
+    .pipeline { border-color: #6366f1; }
+    .pipeline .step-num { background: #6366f1; }
+    .alert { border-color: #ef4444; }
+    .alert .step-num { background: #ef4444; }
+
+    /* Sub-steps */
+    .sub-row {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: 0;
+    }
+    .sub-step {
+      background: #1a2332;
+      border: 1px solid #1e293b;
+      border-radius: 8px;
+      padding: 10px 14px;
+      min-width: 150px;
+      max-width: 200px;
+      text-align: center;
+    }
+    .sub-step-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: #cbd5e1;
+      margin-bottom: 4px;
+    }
+    .sub-step-detail {
+      font-size: 11px;
+      color: #64748b;
+    }
+
+    .scoring-box {
+      background: #0f172a;
+      border: 2px solid #10b981;
+      border-radius: 12px;
+      padding: 16px 24px;
+      margin: 16px auto;
+      max-width: 700px;
+      width: 100%;
+    }
+    .scoring-title {
+      font-size: 13px;
+      font-weight: 700;
+      color: #10b981;
+      margin-bottom: 12px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    .scoring-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: center;
+    }
+    .scoring-item {
+      background: #1e293b;
+      border-radius: 6px;
+      padding: 8px 12px;
+      text-align: center;
+      min-width: 120px;
+    }
+    .scoring-label {
+      font-size: 11px;
+      color: #94a3b8;
+      margin-bottom: 2px;
+    }
+    .scoring-value {
+      font-size: 16px;
+      font-weight: 700;
+      color: #f1f5f9;
+    }
+    .scoring-weight {
+      font-size: 10px;
+      color: #475569;
+    }
+
+    .decision-box {
+      background: #1e293b;
+      border: 2px solid #f59e0b;
+      border-radius: 12px;
+      padding: 16px 24px;
+      margin: 16px auto;
+      max-width: 400px;
+      text-align: center;
+    }
+    .decision-title {
+      font-size: 13px;
+      font-weight: 700;
+      color: #f59e0b;
+      margin-bottom: 6px;
+    }
+    .decision-text {
+      font-size: 14px;
+      color: #e2e8f0;
+      margin-bottom: 8px;
+    }
+    .decision-threshold {
+      font-size: 12px;
+      color: #94a3b8;
+    }
+
+    .output-row {
+      display: flex;
+      gap: 16px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .output-item {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 10px;
+      padding: 12px 16px;
+      min-width: 160px;
+      text-align: center;
+    }
+    .output-icon {
+      font-size: 20px;
+      margin-bottom: 4px;
+    }
+    .output-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #f1f5f9;
+      margin-bottom: 4px;
+    }
+    .output-detail {
+      font-size: 11px;
+      color: #64748b;
+    }
+
+    .separator {
+      border: none;
+      border-top: 1px dashed #1e293b;
+      margin: 24px 0;
+      width: 100%;
+    }
+
+    .legend {
+      max-width: 700px;
+      margin: 40px auto 0;
+      display: flex;
+      gap: 16px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #64748b;
+    }
+    .legend-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+
+    @media (max-width: 600px) {
+      .step { min-width: 160px; }
+      .sub-step { min-width: 130px; }
+    }
+  </style>
+</head>
+<body>
+
+<h1>AutoJobs Pipeline — Flowchart</h1>
+<p class="subtitle">hostpioneers.com/autojobs — AI-Powered Job Search System</p>
+
+<div class="flowchart">
+
+  <!-- STEP 1: INPUT -->
+  <div class="row">
+    <div class="step input">
+      <div class="step-num">STEP 1</div>
+      <div class="step-title">INPUT</div>
+      <div class="step-details">
+        <span>Job URL pasted</span>
+        <span>OR JD text pasted</span>
+        <span>OR manual fields</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="arrow">▼</div>
+  <div class="arrow-label">user pastes URL or description</div>
+
+  <!-- STEP 2: FETCH -->
+  <div class="row">
+    <div class="step fetch">
+      <div class="step-num">STEP 2</div>
+      <div class="step-title">FETCH & PARSE</div>
+      <div class="step-details">
+        <span>Extract: title, company, description</span>
+        <span>Detect board type</span>
+        <span>Fetch company info</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="arrow">▼</div>
+  <div class="arrow-label">Perplexity API + web scraping</div>
+
+  <!-- STEP 3: CLASSIFY -->
+  <div class="row">
+    <div class="step classify">
+      <div class="step-num">STEP 3</div>
+      <div class="step-title">CLASSIFY</div>
+      <div class="step-details">
+        <span>Voice AI / Agentic / Backend / Full-Stack</span>
+        <span>Junior / Mid / Senior / Staff</span>
+        <span>Remote / Spain / EU / US</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="arrow">▼</div>
+
+  <!-- STEP 4: EVALUATE -->
+  <div class="step eval" style="max-width:700px;">
+    <div class="step-num">STEP 4</div>
+    <div class="step-title">EVALUATE — 6 Dimensions</div>
+    <div class="step-details">
+      <span>Each dimension scored 0–100, then weighted average = composite score</span>
+    </div>
+  </div>
+
+  <!-- SCORING GRID -->
+  <div class="scoring-box">
+    <div class="scoring-title">Scoring Dimensions</div>
+    <div class="scoring-grid">
+      <div class="scoring-item">
+        <div class="scoring-label">CV Match</div>
+        <div class="scoring-value">0–100</div>
+        <div class="scoring-weight">× 0.25</div>
+      </div>
+      <div class="scoring-item">
+        <div class="scoring-label">Compensation Fit</div>
+        <div class="scoring-value">0–100</div>
+        <div class="scoring-weight">× 0.20</div>
+      </div>
+      <div class="scoring-item">
+        <div class="scoring-label">Seniority Fit</div>
+        <div class="scoring-value">0–100</div>
+        <div class="scoring-weight">× 0.15</div>
+      </div>
+      <div class="scoring-item">
+        <div class="scoring-label">Culture & Growth</div>
+        <div class="scoring-value">0–100</div>
+        <div class="scoring-weight">× 0.15</div>
+      </div>
+      <div class="scoring-item">
+        <div class="scoring-label">Tech Stack Match</div>
+        <div class="scoring-value">0–100</div>
+        <div class="scoring-weight">× 0.15</div>
+      </div>
+      <div class="scoring-item">
+        <div class="scoring-label">Interview Feasibility</div>
+        <div class="scoring-value">0–100</div>
+        <div class="scoring-weight">× 0.10</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="arrow">▼</div>
+
+  <!-- DECISION -->
+  <div class="decision-box">
+    <div class="decision-title">DECISION GATE</div>
+    <div class="decision-text">Composite Score ≥ 70?</div>
+    <div class="decision-threshold">If NO (score &lt; 70) → "Not recommended — skip this role"</div>
+  </div>
+
+  <div class="arrow">▼</div>
+  <div class="arrow-label" style="color:#10b981;">YES → Generate content</div>
+
+  <!-- STEP 5: GENERATE -->
+  <div class="step gen" style="max-width:700px;">
+    <div class="step-num">STEP 5</div>
+    <div class="step-title">GENERATE — If Score ≥ 70</div>
+    <div class="step-details">
+      <span>ATS-Optimized CV PDF + Personalized Cover Letter</span>
+    </div>
+  </div>
+
+  <div class="output-row">
+    <div class="output-item">
+      <div class="output-icon">📄</div>
+      <div class="output-title">CV PDF</div>
+      <div class="output-detail">Keyword-injected, ATS-optimized</div>
+    </div>
+    <div class="output-item">
+      <div class="output-icon">✉️</div>
+      <div class="output-title">Cover Letter</div>
+      <div class="output-detail">Personalized, 3 paragraphs</div>
+    </div>
+    <div class="output-item">
+      <div class="output-icon">🎯</div>
+      <div class="output-title">Interview Prep</div>
+      <div class="output-detail">Questions + STAR stories</div>
+    </div>
+  </div>
+
+  <div class="arrow">▼</div>
+
+  <!-- STEP 6: PIPELINE -->
+  <div class="step pipeline" style="max-width:700px;">
+    <div class="step-num">STEP 6</div>
+    <div class="step-title">PIPELINE — Kanban Board</div>
+  </div>
+
+  <div class="output-row">
+    <div class="output-item" style="border-color:#8b5cf6;">
+      <div class="output-icon">📋</div>
+      <div class="output-title">Wishlist</div>
+      <div class="output-detail">Score ≥ 70, not yet applied</div>
+    </div>
+    <div class="output-item" style="border-color:#06b6d4;">
+      <div class="output-icon">🚀</div>
+      <div class="output-title">Applied</div>
+      <div class="output-detail">User submitted application</div>
+    </div>
+    <div class="output-item" style="border-color:#f59e0b;">
+      <div class="output-icon">💬</div>
+      <div class="output-title">Interview</div>
+      <div class="output-detail">Scheduled or completed</div>
+    </div>
+    <div class="output-item" style="border-color:#10b981;">
+      <div class="output-icon">✅</div>
+      <div class="output-title">Offer / Reject</div>
+      <div class="output-detail">Outcome recorded</div>
+    </div>
+  </div>
+
+  <div class="arrow">▼</div>
+
+  <!-- STEP 7: ALERT -->
+  <div class="step alert" style="max-width:700px;">
+    <div class="step-num">STEP 7</div>
+    <div class="step-title">ALERTS & FOLLOW-UP</div>
+    <div class="step-details">
+      <span>Telegram notification via Horus bot</span>
+    </div>
+  </div>
+
+  <div class="output-row">
+    <div class="output-item">
+      <div class="output-icon">🆕</div>
+      <div class="output-title">New Evaluation</div>
+      <div class="output-detail">Complete notification</div>
+    </div>
+    <div class="output-item">
+      <div class="output-icon">⏰</div>
+      <div class="output-title">Interview Reminder</div>
+      <div class="output-detail">24h before</div>
+    </div>
+    <div class="output-item">
+      <div class="output-icon">🏆</div>
+      <div class="output-title">Offer Received</div>
+      <div class="output-detail">Immediate alert</div>
+    </div>
+  </div>
+
+  <hr class="separator">
+
+  <!-- FEEDBACK LOOP -->
+  <div class="step" style="border-color:#475569; max-width:500px;">
+    <div class="step-title" style="color:#94a3b8;">🔁 ICP LEARNING LOOP (Future)</div>
+    <div class="step-details">
+      <span>Track which jobs actually convert → auto-adjust scoring weights</span>
+    </div>
+  </div>
+
+</div>
+
+<!-- LEGEND -->
+<div class="legend">
+  <div class="legend-item"><div class="legend-dot" style="background:#8b5cf6;"></div> Input</div>
+  <div class="legend-item"><div class="legend-dot" style="background:#06b6d4;"></div> Fetch</div>
+  <div class="legend-item"><div class="legend-dot" style="background:#f59e0b;"></div> Classify</div>
+  <div class="legend-item"><div class="legend-dot" style="background:#10b981;"></div> Evaluate</div>
+  <div class="legend-item"><div class="legend-dot" style="background:#ec4899;"></div> Generate</div>
+  <div class="legend-item"><div class="legend-dot" style="background:#6366f1;"></div> Pipeline</div>
+  <div class="legend-item"><div class="legend-dot" style="background:#ef4444;"></div> Alert</div>
+</div>
+
+</body>
+</html>
diff --git a/email-v2.html b/email-v2.html
new file mode 100644
index 0000000..11ae6e9
--- /dev/null
+++ b/email-v2.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Is AI answering calls for your competitors?</title>
+  <style type="text/css">
+    body, table, td, p, a, li, blockquote {
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+    img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
+    
+    body { margin: 0; padding: 0; background-color: #f4f4f4; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #1a1a2e; }
+    
+    .email-container { max-width: 600px; margin: 0 auto; background-color: #ffffff; }
+    
+    .header { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%); padding: 30px 40px; text-align: center; }
+    .header h1 { color: #ffffff; font-size: 28px; font-weight: 700; margin: 0; line-height: 1.3; }
+    .header .subtitle { color: #ffd700; font-size: 16px; margin-top: 10px; }
+    
+    .hero-section { padding: 40px 40px 30px; text-align: center; }
+    .hero-section h2 { font-size: 26px; color: #1a1a2e; margin: 0 0 20px; line-height: 1.3; }
+    .hero-section p { font-size: 17px; line-height: 1.6; color: #4a4a5a; margin: 0; }
+    
+    .highlight-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #f59e0b; padding: 20px 25px; margin: 30px 40px; border-radius: 0 8px 8px 0; }
+    .highlight-box p { margin: 0; font-size: 15px; color: #92400e; font-style: italic; }
+    
+    .testimonial { background: #f9fafb; border-radius: 12px; padding: 20px; margin: 0 40px 15px; border: 1px solid #e5e7eb; }
+    .testimonial p { margin: 0 0 10px; font-size: 15px; color: #374151; line-height: 1.5; }
+    .testimonial .author { font-size: 13px; color: #6b7280; font-weight: 600; }
+    .testimonial .stars { color: #f59e0b; margin-bottom: 8px; }
+    
+    .features { padding: 30px 40px; background: #fff; }
+    .features h3 { font-size: 18px; color: #1a1a2e; margin: 0 0 20px; text-align: center; }
+    .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    .feature-item { background: #f9fafb; padding: 15px; border-radius: 8px; }
+    .feature-item p { font-size: 14px; color: #374151; margin: 0; line-height: 1.4; }
+    .feature-item .emoji { font-size: 16px; margin-right: 8px; }
+    
+    .offer-section { background: linear-gradient(180deg, #1a1a2e 0%, #2d2d44 100%); padding: 40px; text-align: center; }
+    .offer-section h3 { color: #ffffff; font-size: 24px; margin: 0 0 20px; }
+    
+    .urgency { background: #dc2626; color: #ffffff; padding: 12px 20px; border-radius: 8px; margin-bottom: 20px; font-size: 15px; font-weight: 700; }
+    .urgency span { color: #ffd700; }
+    
+    .offer-item { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; margin-bottom: 15px; text-align: left; }
+    .offer-item h4 { color: #ffd700; font-size: 18px; margin: 0 0 8px; }
+    .offer-item p { color: #e5e7eb; font-size: 14px; margin: 0; line-height: 1.5; }
+    .offer-item .price { font-size: 22px; font-weight: 700; color: #ffffff; margin-top: 10px; }
+    .offer-item .price span { font-size: 14px; color: #9ca3af; font-weight: 400; }
+    
+    .cta-button { display: inline-block; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #ffffff; text-decoration: none; font-weight: 700; font-size: 18px; padding: 16px 40px; border-radius: 8px; margin: 20px 0; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); }
+    .cta-button:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
+    
+    .guarantee { background: rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; margin-top: 20px; }
+    .guarantee p { color: #9ca3af; font-size: 13px; margin: 0; }
+    .guarantee strong { color: #4ade80; }
+    
+    .closing { padding: 30px 40px; text-align: center; }
+    .closing p { font-size: 16px; color: #4a4a5a; line-height: 1.6; margin: 0 0 15px; }
+    .reply-cta { background: #f3f4f6; border-radius: 8px; padding: 15px 20px; margin: 20px 0; }
+    .reply-cta p { font-size: 14px; color: #6b7280; margin: 0; }
+    
+    .footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 25px 40px; text-align: center; }
+    .footer p { font-size: 12px; color: #9ca3af; margin: 0 0 10px; }
+    .footer a { color: #6b7280; text-decoration: underline; }
+    
+    @media only screen and (max-width: 480px) {
+      .email-container { width: 100% !important; }
+      .header, .hero-section, .offer-section, .closing, .features, .footer { padding-left: 20px !important; padding-right: 20px !important; }
+      .testimonial, .highlight-box { margin-left: 20px !important; margin-right: 20px !important; }
+      .header h1 { font-size: 22px !important; }
+      .hero-section h2 { font-size: 20px !important; }
+      .features-grid { grid-template-columns: 1fr; }
+      .cta-button { display: block !important; padding: 14px 20px !important; font-size: 16px !important; }
+    }
+  </style>
+</head>
+<body>
+  <div class="email-container">
+    
+    <!-- Header -->
+    <div class="header">
+      <h1>🤖 Is AI answering calls for your competitors?</h1>
+      <p class="subtitle">Here's what's happening right now...</p>
+    </div>
+    
+    <!-- Hero Section -->
+    <div class="hero-section">
+      <h2>Quick question:</h2>
+      <p>When was the last time you checked what your competitors are doing online?</p>
+      <p style="margin-top: 15px;">Here's what's happening <strong>RIGHT NOW</strong> while you're reading this...</p>
+    </div>
+    
+    <!-- Testimonial with real name -->
+    <div class="testimonial">
+      <div class="stars">⭐⭐⭐⭐⭐</div>
+      <p>"We were skeptical at first. But in 60 days, our inbound leads increased 40%. The AI answers in Spanish AND English — our clients love it. It's like having a receptionist who never sleeps."</p>
+      <p class="author">— Carlos M., Owner, Restaurante El Puerto, Málaga</p>
+    </div>
+    
+    <!-- Features -->
+    <div class="features">
+      <h3>What smart businesses discovered:</h3>
+      <div class="features-grid">
+        <div class="feature-item">
+          <p>🍽️ A restaurant reduced no-shows by 60% with AI call handling</p>
+        </div>
+        <div class="feature-item">
+          <p>🦷 A dentist booked 14 new patients in 30 days with an AI receptionist</p>
+        </div>
+        <div class="feature-item">
+          <p>🏠 A realtor closed 3 deals/month they were missing before</p>
+        </div>
+        <div class="feature-item">
+          <p>💊 A clinic automated 80% of appointment scheduling</p>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Offer Section -->
+    <div class="offer-section">
+      <h3>🎯 Your unfair advantage:</h3>
+      
+      <!-- Urgency - Cleopatra's addition -->
+      <div class="urgency">
+        ⚠️ Only <span>15 founding spots</span> remaining this month
+      </div>
+      
+      <div class="offer-item">
+        <h4>🤖 Hire an AI Worker</h4>
+        <p>One agent that answers calls, qualifies leads, and books appointments — 24/7, never misses a lead</p>
+        <p class="price">$797<span>/month</span></p>
+      </div>
+      
+      <div class="offer-item">
+        <h4>🚀 AI Agent Team</h4>
+        <p>3+ agents: Competitor intel, reputation management, sales + onboarding — the full team</p>
+        <p class="price">$1,797<span>/month</span></p>
+      </div>
+      
+      <p style="color: #e5e7eb; font-size: 14px; margin-top: 20px;">
+        One-time setup: $1,997 (single) / $4,997 (multi-agent)
+      </p>
+      
+      <!-- Cleopatra's CTA change -->
+      <a href="https://hostpioneers.com/?utm_source=brevo&utm_campaign=ai-workers&utm_medium=email#assessment" class="cta-button">
+        Get Your Free AI Readiness Assessment →
+      </a>
+      
+      <div class="guarantee">
+        <p><strong>🛡️ 60-Day Guarantee:</strong> If you don't see results, next month is free. No questions asked.</p>
+        <p style="margin-top: 8px;"><strong>⏰ Founding Client Pricing closes April 30, 2026</strong></p>
+      </div>
+    </div>
+    
+    <!-- Closing -->
+    <div class="closing">
+      <p>If you're curious what this would look like for YOUR business, just hit reply and tell us:</p>
+      <div class="reply-cta">
+        <p>1. What do you do?<br>2. What's your biggest challenge with leads or calls?</p>
+        <p style="margin-top: 10px; font-weight: 600; color: #1a1a2e;">We'll recommend the best setup in plain English. No jargon.</p>
+      </div>
+      <p>Talk soon,<br><strong>The HostPioneers Team</strong></p>
+    </div>
+    
+    <!-- Footer -->
+    <div class="footer">
+      <p>You received this because you're a valued contact.</p>
+      <p>
+        <a href="{{ unsubscribe }}">Unsubscribe</a> &nbsp;|&nbsp; 
+        <a href="{{ update_profile }}">Update preferences</a>
+      </p>
+      <p style="margin-top: 15px;">© 2026 HostPioneers | AI Agent Agency | hostpioneers.com</p>
+    </div>
+    
+  </div>
+</body>
+</html>
diff --git a/next-batch-300.csv b/next-batch-300.csv
new file mode 100644
index 0000000..622836e
--- /dev/null
+++ b/next-batch-300.csv
@@ -0,0 +1,301 @@
+name	email	company	country	email_status	segment
+Romain Blade	kristinkreuk65@gmail.com	MOI	FR	pending	Re-engage
+DIMOU  RODANTHI	howardjohn.tucker@yahoo.com		GR	pending	Re-engage
+Martha Kuzmeski	agonqisi@hotmail.com	Kuzmeski	US	pending	Re-engage
+Julie Eckert	yahoowalletcom@gmail.com		US	pending	Re-engage
+Ozwan Janom	patrickspongebob1420@yahoo.com		MY	pending	Re-engage
+malush kadrush	riki.minaj@hotmail.com		AL	pending	Re-engage
+Paul Tingley	tingleypaul@msn.com		GB	pending	Re-engage
+chen xiaodong	sx01_f@server.uio.cc		CN	pending	Re-engage
+dai judo	daijudo@hotmail.com	seedersunite	GB	pending	Re-engage
+Alberto J. Ruiz Gutierrez	alberto@collinsnetworks.net	Collins Networks.NET	MX	pending	Re-engage
+Ahmed Hussein	nonameface@Live.com		MV	pending	Re-engage
+AKUDO OBUTE	AKUDOO@HOTMAIL.COM		US	pending	Re-engage
+Elizabeth   Duval	visionermutiu@yahoo.com		US	pending	Re-engage
+matt edwards	zeus.nbt@gmail.com	Berlin	GB	pending	Re-engage
+busuu logs	busuulogs@e-mail.ua	busuulogs incorp	US	pending	Re-engage
+Jochen Leidner	gu3sti@msn.com		US	pending	Re-engage
+brad jones	info100@skymail.mn	jonespharmacyltd	US	pending	Re-engage
+goopet goopet	abdulsalamadam@gmail.com	none	US	pending	Re-engage
+Aca Savanovic	vlada.expert@gmail.com		RS	pending	Re-engage
+Ernestina Huerta	huerta@comcast.com		US	pending	Re-engage
+jay orec	father-of-kj@hotmail.com		CA	pending	Re-engage
+Marc Streckfuss	marc@fam-streckfuss.de		DE	pending	Re-engage
+Julias Cäsar	weissewolf@z1p.biz		TH	pending	Re-engage
+Peggy Howard	peggy_howard@ymail.com		US	pending	Re-engage
+Selena Kortial	rinnor.-@live.com		US	pending	Re-engage
+joao ribeiro	lucassfera@hotmail.com	mostardas.com	BR	pending	Re-engage
+Alex Volgov	alexsize@gmail.com	None	RU	pending	Re-engage
+Maryjo Petz	humsay1@hotmail.com		US	pending	Re-engage
+Jorgen Kvalvaag	jorgenmk@gmail.com		NO	pending	Re-engage
+Maria Pereira	ana_paula1717@hotmail.com		BR	pending	Re-engage
+Akarat Laoharattanawiboon	demoinvest@gmail.com		TH	pending	Re-engage
+Sonia Tie shicasho	claudiopiassifreire@yahoo.com.br		BR	pending	Re-engage
+iceguest top	iceguest@live.com	icetop	US	pending	Re-engage
+Nancy Larue	betapyeumusic@gmail.com		CA	pending	Re-engage
+Patricia Lenahan	cvolksdorf@hotmail.com		US	pending	Re-engage
+Samuel Kaka	zizoudu59200@hotmail.fr	Kaka	FR	pending	Re-engage
+Andrew Fiegener	just_mywife@yahoo.com		US	pending	Re-engage
+pikachu pikachu	ducanhhp91@gmail.com	dfsf	VN	pending	Re-engage
+Michele Barnes	lkj4dkj3mns@mailinator.com		US	pending	Re-engage
+Nam Huynh	Jim.Nightshade2@gmail.com		US	pending	Re-engage
+Kenneth Benjamin	Ordinary@tvstar.com		US	pending	Re-engage
+Sung Won Lee	philong_bo2000@yahoo.com	ltt	US	pending	Re-engage
+Craig Hall	harry.t2h@gmail.com	host37	US	pending	Re-engage
+Fouad Outmani	aljazera80@hotmail.fr	inter	GB	pending	Re-engage
+Felipe Weiss	spike@debian.cl	INODOCHILE	CL	pending	Re-engage
+Nguyen Viet	metvaiqua@gmail.com		VN	pending	Re-engage
+jeniffer peron	golmatolsz@live.com	n/l	US	pending	Re-engage
+KATHLEEN THREADWELL	kathleen123threadwel@me.com		GB	pending	Re-engage
+Gerald Charles	jessicab@anonmail.de		US	pending	Re-engage
+Sebally Queylin	squeylin@gmail.com		US	pending	Re-engage
+bagina dagonda	jaredsumel@live.ca		US	pending	Re-engage
+IZAIAS LIMA RAMOS	iks.exe@hotmail.com		BR	pending	Re-engage
+alpha younes	forsan4ever@gmail.com		MA	pending	Re-engage
+BINH NGUYEN	fixbugvn@yahoo.com	FPT	VN	pending	Re-engage
+Alexander Eving	pornlove.org@gmail.com	Eving	SK	pending	Re-engage
+Philip Schmidt	philip.n.schmidt@gmail.com		DK	pending	Re-engage
+Jennifer Zelenko	jenniferzelenko@AOL.COM	Nec	US	pending	Re-engage
+Sky Leaf	ogdox@live.ca	Idek	CA	pending	Re-engage
+Donna  Marie Baloy	carlosrkr@hotmail.com	sport	NF	pending	Re-engage
+Antonio Rossetti	jolulemoas@hotmail.com		BR	pending	Re-engage
+Roth Olivier	olivierroth2@gmail.com		CH	pending	Re-engage
+Stephen Humber	trianh1114@zing.vn		US	pending	Re-engage
+Hilary Guetersloh	HilaryGuetersloh8797@hotmail.com		US	pending	Re-engage
+Alisa SauraAlisaiol	Alisatzd945@hotmail.com		FR	pending	Re-engage
+Ed Acosta	rew@romelhot.info		US	pending	Re-engage
+michael harvin	mharvin70@yahoo.com		US	pending	Re-engage
+Tahir Ali	tammany.harding@yahoo.com		US	pending	Re-engage
+rajandren kalyani	vps1@thegioiaccount.com		SG	pending	Re-engage
+Lars Svendson	lsmalmo@googlemail.com		SE	pending	Re-engage
+joel moorhead	joelmoorheads@hotmail.com	joel moorhead	US	pending	Re-engage
+Mark Huges	salesadmin@ghuyan.com		US	pending	Re-engage
+Joseph Parmelee	alalilo@gmail.com	NA	US	pending	Re-engage
+Jack  Garcia	tinhocblog@gmail.com		GB	pending	Re-engage
+Heidi Preusz	h.preusz@gmx.de		DE	pending	Re-engage
+ Kimluong Bui	kcwb0x@live.com		US	pending	Re-engage
+Trinh Quoc Dat	trinhquocdatfx@gmail.com		VN	pending	Re-engage
+Chrisdopthe Diop	obamax3@yahoo.com		US	pending	Re-engage
+Enrique Palomino	richard@fumador.com		GB	pending	Re-engage
+Stephen  Vigebo	ssvigebo@gmail.com	byroe	GB	pending	Re-engage
+Jessica Kohl	filefactory55@gmail.com		DE	pending	Re-engage
+Dat Le	dat.le79@gmail.com		CA	pending	Re-engage
+efry ddrg	yannickfl@yahoo.fr	drg	US	pending	Re-engage
+Leslie Kikuchi	jul10@heaven-vn.com	dhp	US	pending	Re-engage
+Wang Tai	secondspaces@gmail.com	N/A	US	pending	Re-engage
+Adam Born	lrhostingcom@gmail.com	LR Hosting	NL	pending	Re-engage
+john davies	johndavieskgb@gmail.com	wallmark inc	BS	pending	Re-engage
+James Guerra	Axisofaj@gmail.com		US	pending	Re-engage
+Roberto chier	roberto.chier@gmail.com		BR	pending	Re-engage
+deinse kuhn	ar_isufi@Live.com	Yannic	DE	pending	Re-engage
+CORY  OGLE	tuan.ngoc4209@gmail.com		US	pending	Re-engage
+ayub khan	ayubkhanmatta@yahoo.com	nil	PK	pending	Re-engage
+John Burch	themadmongo@gmail.com		US	pending	Re-engage
+Jamie Quilon	jamie@nova8x.com		US	pending	Re-engage
+killed jester	jester255@hotmail.com		AU	pending	Re-engage
+Emma Webb	darren_ralph@yahoo.co.uk		GB	pending	Re-engage
+Jason Bradford	boxt13@tormail.org	CabbageCabbage&amp;CO	GB	pending	Re-engage
+blake drew	silent_bluekz@hotmail.com	Acid Burn	CA	pending	Re-engage
+thierry marouze	bozzo64@orange.fr		FR	pending	Re-engage
+Reginald Boldon	timkhongcan@live.com		US	pending	Re-engage
+Samuel Yam	littlegreen2002@gmail.com	-	SG	pending	Re-engage
+Sebastian Falborg Jørgensen	sebastian@kamadon.dk		DK	pending	Re-engage
+Robin E Scalisi	yakusaxd@yahoo.com		CA	pending	Re-engage
+kenny collins	independent.financial.company@gmail.com		NG	pending	Re-engage
+Silence Silence47	silence4710@gmail.com	GSO	FR	pending	Re-engage
+raul alves pinto neto	raulal46@hotmail.com		BR	pending	Re-engage
+Antonio Bocaccio	antoniopetuchelli@yahoo.it		IT	pending	Re-engage
+Cristina Brust Brust	mastercratos2@live.com	Brust	BR	pending	Re-engage
+Bryan Cheek	nonprofit@pp-donations.com		US	pending	Re-engage
+ROLANDO POLANCO	newbievip@yahoo.com		US	pending	Re-engage
+Wilfried Hafner	hafner@securstar.com	SecurStar	DE	pending	Re-engage
+Massimo Altamura	glaer@hotmail.it		IT	pending	Re-engage
+John Wynn	lno_prokilla30@live.com		US	pending	Re-engage
+shah ali	laurieeverall@yahoo.com		PK	pending	Re-engage
+CONNIE HOLMAN	newbievnx@gmail.com		US	pending	Re-engage
+Ashley Quijano	irving3mann@yahoo.co.uk	CP.inc	US	pending	Re-engage
+Robert Beckel	rgbeckel@hotmail.com	gbeckel	US	pending	Re-engage
+Masrina Bakri	root@jbsex.org		PH	pending	Re-engage
+full jmaes	ams.smtp2011@gmail.com		NG	pending	Re-engage
+Thomas Vaccaro	thmvacc@aol.com		CA	pending	Re-engage
+Krystal Shaw	renngoz@gmail.com	VHC Team	US	pending	Re-engage
+Jo kauzy	duckyjet@gmail.com		GB	pending	Re-engage
+prash cha	prde06@gmail.com		IN	pending	Re-engage
+Ludovic BAILLY	zaby39@gmail.com		FR	pending	Re-engage
+qwe asd	123@qwe.com	shgjf fhejs sdfskdjfjd	US	pending	Re-engage
+Jim Jones	unvrslxprts@gmail.com		US	pending	Re-engage
+josh markovitz	jmarkovitz@hotmail.com		US	pending	Re-engage
+Javier Sanchez Soto	artistamagico2000@hotmail.com	c-group	MX	pending	Re-engage
+henio costadella junior	danduzzi@hotmail.com	danduzzi	BR	pending	Re-engage
+Pam DeGroot	th3-cr4ck3r@live.com	matriX	US	pending	Re-engage
+gembala malam	psycholyzern999@gmail.com	g3m	US	pending	Re-engage
+Nikos Phreaker	phreaker@hotmail.gr	Hosting1337	US	pending	Re-engage
+Marcia  Feduk	greg_lason04@yahoo.com	globalpayment	GB	pending	Re-engage
+Jessie Lanley	technophobic@live.com	Generics Inc	US	pending	Re-engage
+Kasper Noes	kasper.noes@hotmail.com		DK	pending	Re-engage
+hunter matthews	thecouponkid86@yahoo.com		US	pending	Re-engage
+noname nana nana	notmeiswear732@hotmail.com	nanan	US	pending	Re-engage
+Phil Mac	phil@3rdera.com	3rdEra	US	pending	Re-engage
+Channa Lynch 	chana.lynch@yahoo.com.vn		US	pending	Re-engage
+Phill Jones	phill_jones15@yahoo.com		GB	pending	Re-engage
+Renaldo  Montenegro	adamsjoys@gmail.com		GB	pending	Re-engage
+sony ericsson	vhcvampire@gmail.com	SONY ERICSSON	US	pending	Re-engage
+eric mitchell	justchiln@conwaycorp.net	fallen	US	pending	Re-engage
+sharon smith	smith200@internet4now.com		US	pending	Re-engage
+Bi Don	snake1308@hotmail.com		FR	pending	Re-engage
+Collen Zalewski	mig.ghost12@gmail.com		US	pending	Re-engage
+hakim barada	lfoorja11@live.fr		SA	pending	Re-engage
+First Name Last Name	rax2boy@yahoo.com		TC	pending	Re-engage
+Rogers Mercury	ubsbaninvestmentplc@aol.com		US	pending	Re-engage
+toilatuantk chuaoi	toilatuantk@gmail.com	chuaoi	US	pending	Re-engage
+Smith kane	smithkane@live.com	smith interantional 	IN	pending	Re-engage
+raja gile	racun@windowslive.com		AU	pending	Re-engage
+Clay Bowers	theman866abh@yahoo.com		US	pending	Re-engage
+ricardo filipusis	picsandpics@hotmail.com		CA	pending	Re-engage
+bob Nice	upvc000@gmail.com	bobnice	US	pending	Re-engage
+Todd Neal	generaltoad@gmail.com		US	pending	Re-engage
+john shephard	spoterhot@gmail.com		GB	pending	Re-engage
+Paul Vara	paul.vara2@gmail.com		FR	pending	Re-engage
+Herbert Müller	bollebach@omail.pro		DE	pending	Re-engage
+net plus	netnet5555@yahoo.com	plusinvest	US	pending	Re-engage
+Dennis  j Staley	angelique.blain@aol.com	Staley inc	US	pending	Re-engage
+Martin Madden	lavitavu@yahoo.com		GB	pending	Re-engage
+John Leite	ReactioNzVPS@live.com	IRC	US	pending	Re-engage
+DUILIO  SERRA GONCALVES	kimzik@live.com		BR	pending	Re-engage
+klessio  anderson	klessio_and@hotmail.com		BR	pending	Re-engage
+mr x	f289452@rmqkr.net	barq	LY	pending	Re-engage
+Hussain ALQattan	rockboy2011@gmail.com		GB	pending	Re-engage
+joseph giordano	josephgiordano98@yahoo.com	oncode tech	US	pending	Re-engage
+Rafael Bruxel	rafael.bruxel@gmail.com		BR	pending	Re-engage
+pp pp	servers2012@yahoo.com	us	US	pending	Re-engage
+luis  escobar	pr3bitaslele@hotmail.com	n-a	CL	pending	Re-engage
+kharn galphys	kharn_galphys@msn.com		CA	pending	Re-engage
+Norma Tyler	Tyler@thichgi.com		US	pending	Re-engage
+chad hostetler	zacpanelot@hotmail.com		US	pending	Re-engage
+Paul Wusa	szenepate@googlemail.com		DE	pending	Re-engage
+isabelle lezeune	leisa@live.fr		GB	pending	Re-engage
+Sam Josh	tough.boot@yahoo.com	Info	US	pending	Re-engage
+Julio Cezar	chkinginfect@gmail.com	Windows ltda	BR	pending	Re-engage
+Stephanie L Ningen	stningen@yahoo.com		US	pending	Re-engage
+zizo zizo	zied.ibra@gmail.com	streetdown	FR	pending	Re-engage
+Juan Lopez	vigade72@gmail.com		MX	pending	Re-engage
+Sam Jhones	sam_jhones4@yahoo.com		US	pending	Re-engage
+Audrey  Harris	jisigd@hotmail.com		PL	pending	Re-engage
+James Fox	james_fox30@yahoo.com		DE	pending	Re-engage
+Marlena  Magdalin	ubav4e@gmail.com		US	pending	Re-engage
+Paula Banks	lopaz-horani@hotmail.com		US	pending	Re-engage
+Darcy Vincent	toniliu899@yahoo.com		US	pending	Re-engage
+pierre-marie chopin	pm.chopin@yahoo.fr		FR	pending	Re-engage
+Ion Dragos Iulian	stanrobert82@yahoo.com		RO	pending	Re-engage
+Derrick Gretna	mr.derick69@live.com		US	pending	Re-engage
+IZABEL  CRISTINA	mariaamartines@terra.com.br	Boutequin company	BR	pending	Re-engage
+Vikas Saini	vikassaini01@gmail.com	BadiDuniya.com	IN	pending	Re-engage
+Angela Sheppard	nhokpyvn@gmail.com		GB	pending	Re-engage
+jacqueline souza	gilbertomg52@uol.com.br		BR	pending	Re-engage
+Roy Smith j	RoySmith@angelic.com		GB	pending	Re-engage
+Alma Flores	ianthemellors@yahoo.co.uk		US	pending	Re-engage
+Jake Brown	futureallstar27@yahoo.com		US	pending	Re-engage
+Terri Milosavljevic	soma.saso82@yahoo.com		US	pending	Re-engage
+Ingrid Juliana Cerveny Passos	franciscomilitar@uol.com.br		BR	pending	Re-engage
+Adam Vough	allenj27@gmail.com		US	pending	Re-engage
+Roxanne Pastore	akashsharma74u@gmail.com		US	pending	Re-engage
+Jack Arnadin	newman.hale@yahoo.com		US	pending	Re-engage
+Joseph Christie	ahmedto7eground@yahoo.com		US	pending	Re-engage
+david smith	babafemi78@yahoo.com	d&amp;s.co	GH	pending	Re-engage
+ngo the quan	admin@luvideez.com	VNUGROUP	VN	pending	Re-engage
+Tony  Thomas	anjingsundala@yahoo.com		US	pending	Re-engage
+Berenguel  Sébastien	shicogenius@aol.com	    	FR	pending	Re-engage
+jumbamba marianosh	a@cerebel.net		GB	pending	Re-engage
+LASUNDRA HARLEY	accessrusun2@live.com		US	pending	Re-engage
+p c	shikhargupta@live.in		IN	pending	Re-engage
+Khalil Awada	khalil.awada@live.com	LebNetwork.net	LB	pending	Re-engage
+brianna baucum	doug.gardner15@gmail.com		US	pending	Re-engage
+Ted Kersh	sean511x@gmail.com	RSElites	CA	pending	Re-engage
+Janga Benito 	v.nfrog@yahoo.com		US	pending	Re-engage
+ELIZABETH SINANAN	nto@att.net		US	pending	Re-engage
+Detlef Hintert	dark_snake@hushmail.com		DE	pending	Re-engage
+Tom Willoughby	464d123sa@dsa.ru		US	pending	Re-engage
+Sean Ward	sean.ward@yahoo.co.uk		GB	pending	Re-engage
+Bartlomiej Nowicki	soseipl@gmail.com	-	PL	pending	Re-engage
+Armando Tolas	undervalley@yahoo.com	SoftwareEngine SES	US	pending	Re-engage
+James Beeh	beehjames@yahoo.com		US	pending	Re-engage
+Sergio Fabiani	x-anass-93@hotmail.fr	L'Aquila	IT	pending	Re-engage
+Philippe Kamin	philippe.kamin@bbox.fr		FR	pending	Re-engage
+Viktoria Lambertova	vikike_sk@pobox.sk		SK	pending	Re-engage
+Kester Bryan  Sy	kesterbryansy@yahoo.com		PH	pending	Re-engage
+Patrick Fushigi	fushigi@hotmail.de		GE	pending	Re-engage
+shane stott	shanestott24@yahoo.co.uk	Ubeh Productions	GB	pending	Re-engage
+baba razack	baba_yinkus@yahoo.com	razackinvestments	NG	pending	Re-engage
+Johnson Thangasamy	johnson.pk@gmail.com		US	pending	Re-engage
+Adam Palmer	adam.palmer3@gmail.com	Innovus	GB	pending	Re-engage
+mousawi mousawiz	mousawiz4@hotmail.com		AE	pending	Re-engage
+john urwin	blade68uk@live.co.uk	thebox1	GB	pending	Re-engage
+bassy ezeugo	mr.bassyfamily@yahoo.co.uk	nigeria	NG	pending	Re-engage
+Darryl Parr	quocnc1991@gmail.com	Parr	US	pending	Re-engage
+shrief Kamel	ganeluca1@yahoo.com	pc	US	pending	Re-engage
+Sean Melton	xygenhost@yahoo.com		US	pending	Re-engage
+ziko baba	follylawal2005@yahoo.com		NG	pending	Re-engage
+Beau Reilly	BeauReillyEHT@yahoo.com	NexonFail	US	pending	Re-engage
+aminoos David	zecv77@yahoo.fr	de	US	pending	Re-engage
+Mark  Trevithick	anocasio2788@rocketmail.com		US	pending	Re-engage
+Willard Morgan	s.limitedx@gmail.com		US	pending	Re-engage
+Elham Timy	destimy.1@hotmail.com	destimy	MK	pending	Re-engage
+Gatzen Grant	gatzegrant@hotmail.com		US	pending	Re-engage
+alfred müller	cityhacker@hotmail.com		GA	pending	Re-engage
+cliff Hagan	cliff.hagan@aol.com		US	pending	Re-engage
+Tyler Ostolski	Tylerostolski@yahoo.com		US	pending	Re-engage
+David Sobotta Sobotta	pokot@dcemail.com		US	pending	Re-engage
+beth Huffner	b.huffner@comcast.net		US	pending	Re-engage
+Matt B	Matt2012@gmail.com		GB	pending	Re-engage
+kim butler	kim_butler001@yahoo.com		US	pending	Re-engage
+idjOs dub	mridjo@hotmail.com	free	FR	pending	Re-engage
+ervin dada	lat.173mantaghe@rogers.com	dashervin	IR	pending	Re-engage
+claire filler	claire.filler@nodns.org		GB	pending	Re-engage
+david smith	david244us@gmail.com		US	pending	Re-engage
+Kevin Bui	Kevinbui@politicalfrome.com		US	pending	Re-engage
+kano silva rocha	maquinavps9@live.com		BR	pending	Re-engage
+Øivind Hellerdal Rasmussen	oivindhr@gmail.com	Øivind H. Rasmussen	NO	pending	Re-engage
+Ben Blakeley	ben1206@gmail.com	Merked	GB	pending	Re-engage
+Jacquelyn Paul	jpaul4208@gmail.com		US	pending	Re-engage
+Jose Alfredo Jimenez	pepeltoroxd@hotmail.com		MX	pending	Re-engage
+ignacio guzman	ignacioaguzman@prodigy.net.mx		MX	pending	Re-engage
+Allen Epps	known@live.ca		US	pending	Re-engage
+Valentin Nacht	nachval@maxodeo.com		RO	pending	Re-engage
+smith anderson	rdpssuport@gmail.com		MK	pending	Re-engage
+Klaus Andersen	ka@streetsurfing.dk	Street-surff ApS	DK	pending	Re-engage
+Able Eval	ableeval@live.com	Evatech Limited	US	pending	Re-engage
+Ying Wang	yingwang62@aol.com	Ying Wang	US	pending	Re-engage
+TONG XIN	tongxin2006@gmail.com	TONGSITE	CN	pending	Re-engage
+freedep lost	perviydep@gmail.com		US	pending	Re-engage
+Williams Garcia	nicole.colleen@yahoo.com	Bktelectronics	US	pending	Re-engage
+Kevin Gibson	longtran1512@hotmail.com		US	pending	Re-engage
+Mohamed Arafat	catchme@arafath.com	BlueSpot Technologies	SG	pending	Re-engage
+JUDITH A BRADFORD	d-davis@ireland.com		US	pending	Re-engage
+Keith   Orr	KeithPOrr@rhyta.com	AlbaGaming	US	pending	Re-engage
+Platzner Gheorghe	ptzgigi@yahoo.com		RO	pending	Re-engage
+ brian fenn	fennbrian@live.com		GB	pending	Re-engage
+francois azerty	francois@hotmail.fr		FR	pending	Re-engage
+Amy Raymond	nemesisfx15@me.com		GB	pending	Re-engage
+jack Chris	bayzi.123@gmail.com	mic	FR	pending	Re-engage
+Ivan Spasikj	goltarce@hotmail.com	Sheraton	AE	pending	Re-engage
+shawn perreault	boicon88@gmail.com	HTC	US	pending	Re-engage
+thuy pham	viagrastim@me.com		US	pending	Re-engage
+Margaret Mangan	readyde@aol.com	Mangan Ltd.	US	pending	Re-engage
+Derek Johns	derek.john@live.com	Vox	GB	pending	Re-engage
+Phyl Caretto	thocker59@hotmail.com		US	pending	Re-engage
+Shashikant Patil	jaclyneikey@yahoo.com		US	pending	Re-engage
+Taryn DeMers	mc_wardenner01@yahoo.com		US	pending	Re-engage
+murat sarioglu	turkdekorasyon@hotmail.com		UA	pending	Re-engage
+Scenex Network	pdelacruz3@uh.edu	SceneX	US	pending	Re-engage
+lolo bodo	linux-sharing@hotmail.fr	local	FR	pending	Re-engage
+Patrick Hicks	Hicks@n-mail.biz		US	pending	Re-engage
+Joy Boyer	bluuorchid@hotmail.com		US	pending	Re-engage
+Anthony  Tolder	minhloc0011@yahoo.com		US	pending	Re-engage
+Fernando Hara	fernando@webhara.com.br	Hara	BR	pending	Re-engage
+Josef Haider	haiderjosef@gmail.com		AT	pending	Re-engage
+Marcus Crew	mark-crew71@hotmail.com	Carp Inc	US	pending	Re-engage
+xxxx xxxx	lukasz.godfather@gmail.com	xxxx	US	pending	Re-engage
+Kevin Althaus	kevin@kevinaltha.us		US	pending	Re-engage
+leomancini padilha	octaviomendess2@hotmail.com		BR	pending	Re-engage
+Ha Duong	dhh15487@gmail.com		VN	pending	Re-engage
+acidcia acidcia	cia.33@hotmail.fr	acidcia	FR	pending	Re-engage
diff --git a/photo-viewer/index.html b/photo-viewer/index.html
new file mode 100644
index 0000000..2975f11
--- /dev/null
+++ b/photo-viewer/index.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>📸 Photo Viewer - Horus AI</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Segoe UI', system-ui, sans-serif;
+      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
+      min-height: 100vh;
+      color: #fff;
+      padding: 20px;
+    }
+    .container { max-width: 1000px; margin: 0 auto; }
+    h1 {
+      text-align: center;
+      font-size: 2rem;
+      margin-bottom: 20px;
+      background: linear-gradient(90deg, #ffd700, #f59e0b);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .upload-area {
+      background: rgba(255,255,255,0.05);
+      border: 2px dashed #6366f1;
+      border-radius: 16px;
+      padding: 40px;
+      text-align: center;
+      margin-bottom: 30px;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+    .upload-area:hover { border-color: #818cf8; background: rgba(255,255,255,0.08); }
+    .upload-icon { font-size: 3rem; margin-bottom: 10px; }
+    .upload-text { color: #94a3b8; }
+    
+    .image-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 20px;
+    }
+    .image-card {
+      background: rgba(255,255,255,0.05);
+      border-radius: 12px;
+      overflow: hidden;
+      border: 1px solid rgba(255,255,255,0.1);
+      transition: transform 0.3s;
+    }
+    .image-card:hover { transform: scale(1.03); }
+    .image-card img {
+      width: 100%;
+      height: 150px;
+      object-fit: cover;
+    }
+    .image-card .caption {
+      padding: 12px;
+      font-size: 0.9rem;
+      color: #94a3b8;
+    }
+    
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.9);
+      z-index: 1000;
+      justify-content: center;
+      align-items: center;
+    }
+    .modal.show { display: flex; }
+    .modal img {
+      max-width: 90%;
+      max-height: 90%;
+      border-radius: 8px;
+    }
+    .modal-close {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      font-size: 2rem;
+      color: #fff;
+      cursor: pointer;
+      background: none;
+      border: none;
+    }
+    
+    .share-box {
+      background: rgba(255,255,255,0.05);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 30px;
+    }
+    .share-box h3 { margin-bottom: 15px; color: #ffd700; }
+    .share-url {
+      display: flex;
+      gap: 10px;
+    }
+    .share-url input {
+      flex: 1;
+      padding: 12px;
+      border-radius: 8px;
+      border: 1px solid #333;
+      background: #0f172a;
+      color: #fff;
+      font-size: 1rem;
+    }
+    .share-url button {
+      padding: 12px 24px;
+      background: #6366f1;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: bold;
+    }
+    .share-url button:hover { background: #818cf8; }
+    
+    input[type="file"] { display: none; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>📸 Photo Viewer - Share with Horus</h1>
+    
+    <div class="share-box">
+      <h3>🔗 Share via URL</h3>
+      <div class="share-url">
+        <input type="text" id="imageUrl" placeholder="Paste image URL here...">
+        <button onclick="loadFromUrl()">Load Image</button>
+      </div>
+    </div>
+    
+    <div class="upload-area" onclick="document.getElementById('fileInput').click()">
+      <div class="upload-icon">📁</div>
+      <p class="upload-text">Click to upload image or drag & drop</p>
+      <p style="color:#666; font-size:0.85rem; margin-top:10px;">Supports: JPG, PNG, GIF, WebP</p>
+    </div>
+    <input type="file" id="fileInput" accept="image/*" onchange="handleFile(this.files[0])">
+    
+    <div class="image-grid" id="gallery"></div>
+  </div>
+  
+  <div class="modal" id="modal" onclick="closeModal()">
+    <button class="modal-close">×</button>
+    <img id="modalImg" src="" alt="Full size">
+  </div>
+  
+  <script>
+    let images = [];
+    
+    function loadFromUrl() {
+      const url = document.getElementById('imageUrl').value.trim();
+      if (url) {
+        addImage(url, 'URL Image');
+        document.getElementById('imageUrl').value = '';
+      }
+    }
+    
+    function handleFile(file) {
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          addImage(e.target.result, file.name);
+        };
+        reader.readAsDataURL(file);
+      }
+    }
+    
+    function addImage(src, caption) {
+      images.unshift({ src, caption });
+      renderGallery();
+    }
+    
+    function renderGallery() {
+      const gallery = document.getElementById('gallery');
+      gallery.innerHTML = images.map((img, i) => `
+        <div class="image-card" onclick="openModal(${i})">
+          <img src="${img.src}" alt="${img.caption}">
+          <div class="caption">${img.caption}</div>
+        </div>
+      `).join('');
+    }
+    
+    function openModal(index) {
+      document.getElementById('modalImg').src = images[index].src;
+      document.getElementById('modal').classList.add('show');
+    }
+    
+    function closeModal() {
+      document.getElementById('modal').classList.remove('show');
+    }
+  </script>
+</body>
+</html>
diff --git a/receipt.html b/receipt.html
new file mode 100644
index 0000000..d9e20d0
--- /dev/null
+++ b/receipt.html
@@ -0,0 +1,682 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mobilkvitto</title>
+  <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    
+    :root {
+      --bg: #0f172a;
+      --card: #1e293b;
+      --border: #334155;
+      --text: #f1f5f9;
+      --text-dim: #94a3b8;
+      --accent: #3b82f6;
+      --green: #22c55e;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      padding: 20px;
+    }
+    
+    .container {
+      max-width: 480px;
+      margin: 0 auto;
+    }
+    
+    /* Header */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+    }
+    
+    .logo {
+      font-size: 18px;
+      font-weight: 700;
+    }
+    
+    .logo span { color: var(--accent); }
+    
+    .lang-toggle {
+      display: flex;
+      gap: 8px;
+    }
+    
+    .lang-btn {
+      padding: 6px 14px;
+      border-radius: 20px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text-dim);
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    
+    .lang-btn.active {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: white;
+    }
+    
+    /* Card */
+    .card {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 24px;
+      margin-bottom: 16px;
+    }
+    
+    .card-header {
+      text-align: center;
+      margin-bottom: 20px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border);
+    }
+    
+    .card-title {
+      font-size: 22px;
+      font-weight: 700;
+      margin-bottom: 4px;
+    }
+    
+    .card-subtitle {
+      font-size: 13px;
+      color: var(--text-dim);
+    }
+    
+    /* Fields */
+    .field {
+      margin-bottom: 16px;
+    }
+    
+    .field label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
+    }
+    
+    .field input {
+      width: 100%;
+      padding: 12px 14px;
+      background: rgba(0,0,0,0.3);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      color: var(--text);
+      font-size: 15px;
+      transition: border-color 0.2s;
+    }
+    
+    .field input:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    
+    .field input::placeholder {
+      color: #475569;
+    }
+    
+    .field-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+    
+    .divider {
+      border: none;
+      border-top: 1px dashed var(--border);
+      margin: 20px 0;
+    }
+    
+    /* Summary */
+    .summary {
+      background: rgba(59, 130, 246, 0.1);
+      border: 1px solid rgba(59, 130, 246, 0.2);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 16px;
+    }
+    
+    .summary-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    
+    .summary-row:last-child {
+      margin-bottom: 0;
+      padding-top: 10px;
+      border-top: 1px solid rgba(59, 130, 246, 0.2);
+    }
+    
+    .summary-label {
+      font-size: 13px;
+      color: var(--text-dim);
+    }
+    
+    .summary-value {
+      font-size: 15px;
+      font-weight: 600;
+    }
+    
+    .summary-total .summary-label {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text);
+    }
+    
+    .summary-total .summary-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--green);
+    }
+    
+    .price-input-wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+    }
+    
+    .price-input-wrap input {
+      padding-right: 50px;
+      font-size: 20px;
+      font-weight: 700;
+      width: 130px;
+      text-align: right;
+    }
+    
+    .price-input-wrap::after {
+      content: 'SEK';
+      position: absolute;
+      right: 14px;
+      color: var(--text-dim);
+      font-size: 13px;
+      font-weight: 600;
+    }
+    
+    /* Print Button */
+    .print-btn {
+      width: 100%;
+      padding: 14px;
+      background: #1e293b;
+      color: white;
+      border: none;
+      border-radius: 12px;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    
+    .print-btn:hover { background: #334155; }
+    
+    /* Footer */
+    .footer {
+      text-align: center;
+      margin-top: 20px;
+      font-size: 11px;
+      color: #475569;
+      line-height: 1.6;
+    }
+    
+    .date-field {
+      display: flex;
+      gap: 12px;
+    }
+    
+    .date-field .field { flex: 1; }
+    
+    @media (max-width: 400px) {
+      body { padding: 12px; }
+      .card { padding: 16px; }
+      .field-row { grid-template-columns: 1fr; }
+      .date-field { flex-direction: column; gap: 0; }
+    }
+    
+    /* =================== */
+    /* RECEIPT PRINT STYLES */
+    /* =================== */
+    @media print {
+      @page {
+        size: A4;
+        margin: 10mm 15mm 15mm 15mm;
+      }
+      @page:not(:first) {
+        margin-top: 10mm;
+      }
+      @page:first {
+        margin-top: 0;
+      }
+      
+      body {
+        background: white !important;
+        color: #000 !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        font-size: 12px !important;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+        width: 100% !important;
+      }
+      html { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+      body::before { content: '' !important; }
+      body::after { content: '' !important; }
+      @page { margin: 10mm 15mm 15mm 15mm !important; }
+      .card-subtitle { font-size: 11px !important; color: #000 !important; }
+      #lblSeller, #lblBuyer, #lblModel, #lblIMEI, #lblCondition, #lblDate, #lblLocation, #lblTotal, #lblNotes { color: #000 !important; font-weight: 600 !important; }
+      
+      .container {
+        max-width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+      
+      .no-print { display: none !important; }
+      
+      .header { display: none !important; }
+      
+      .card {
+        background: white !important;
+        border: 2px solid #1e293b !important;
+        border-radius: 8px !important;
+        padding: 30px !important;
+        margin: 0 auto !important;
+        max-width: 170mm !important;
+        box-shadow: none !important;
+      }
+      
+      .card-header {
+        text-align: center;
+        padding: 0 0 20px 0 !important;
+        margin-bottom: 20px !important;
+        border-bottom: 2px solid #1e293b !important;
+        border-top: none !important;
+      }
+      
+      .receipt-icon { display: none !important; }
+      
+      .card-title {
+        font-size: 24px !important;
+        font-weight: 700 !important;
+        text-transform: uppercase !important;
+        margin-bottom: 4px !important;
+        color: #000 !important;
+      }
+      
+      .card-subtitle {
+        font-size: 12px !important;
+        color: #000 !important;
+      }
+      
+      .field-row {
+        display: grid !important;
+        grid-template-columns: 1fr 1fr !important;
+        gap: 15px !important;
+      }
+      
+      .field {
+        margin-bottom: 15px !important;
+      }
+      
+      .field label {
+        font-size: 10px !important;
+        font-weight: 600 !important;
+        color: #000 !important;
+        text-transform: uppercase !important;
+        letter-spacing: 0.5px !important;
+        margin-bottom: 6px !important;
+        display: block !important;
+      }
+      
+      .field input {
+        background: transparent !important;
+        border: none !important;
+        border-bottom: 1px solid #ccc !important;
+        padding: 6px 0 !important;
+        color: #000 !important;
+        font-size: 13px !important;
+        font-family: inherit !important;
+        border-radius: 0 !important;
+        width: 100% !important;
+      }
+      
+      .divider {
+        border: none !important;
+        border-top: 1px solid #e5e7eb !important;
+        margin: 20px 0 !important;
+      }
+      
+      .summary {
+        background: #f8fafc !important;
+        border: 1px solid #e2e8f0 !important;
+        border-radius: 8px !important;
+        padding: 20px !important;
+        margin: 20px 0 !important;
+      }
+      
+      .summary-row {
+        display: flex !important;
+        justify-content: space-between !important;
+        margin-bottom: 10px !important;
+      }
+      
+      .summary-label {
+        font-size: 13px !important;
+        color: #000 !important;
+      }
+      
+      .summary-total .summary-label {
+        font-size: 16px !important;
+        font-weight: 600 !important;
+      }
+      
+      .summary-total .summary-value {
+        font-size: 28px !important;
+        font-weight: 700 !important;
+        color: #16a34a !important;
+      }
+      
+      .price-input-wrap::after {
+        content: 'SEK' !important;
+        right: 0 !important;
+        position: static !important;
+        margin-left: 4px !important;
+      }
+      
+      .price-input-wrap input {
+        width: 120px !important;
+        text-align: right !important;
+        padding: 4px 8px 4px 4px !important;
+        font-size: 20px !important;
+        font-weight: 700 !important;
+      }
+      
+      .footer {
+        display: none !important;
+      }
+      
+      /* Receipt footer */
+      .receipt-footer {
+        display: block !important;
+        text-align: center;
+        margin-top: 12px;
+        padding-top: 8px;
+        border-top: 1px dashed #000;
+        font-size: 9px;
+        color: #666;
+        line-height: 1.4;
+      }
+    }
+    
+    .receipt-footer { display: none; }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  
+  <!-- Screen Header -->
+  <div class="header no-print">
+    <div class="logo">Host<span>Pioneers</span></div>
+    <div class="lang-toggle">
+      <button class="lang-btn active" onclick="setLang('sv')" id="btnSv">SV</button>
+      <button class="lang-btn" onclick="setLang('en')" id="btnEn">EN</button>
+    </div>
+  </div>
+  
+  <!-- Receipt Card (shown on screen + print) -->
+  <div class="card">
+    <div class="card-header">
+      <div class="receipt-icon" style="display:none">📱</div>
+      <h1 class="card-title" id="title">Mobilkvitto</h1>
+      <p class="card-subtitle" id="subtitle">Kvitto för försäljning av begagnad mobiltelefon</p>
+    </div>
+    
+    <!-- Parties -->
+    <div class="field-row">
+      <div class="field">
+        <label id="lblSeller">Säljare</label>
+        <input type="text" id="seller" placeholder="Namn">
+      </div>
+      <div class="field">
+        <label id="lblBuyer">Köpare</label>
+        <input type="text" id="buyer" placeholder="Namn">
+      </div>
+    </div>
+    
+    <hr class="divider">
+    
+    <!-- Phone Details -->
+    <div class="field">
+      <label id="lblModel">Mobilmodell</label>
+      <input type="text" id="model" placeholder="t.ex. iPhone 15 Pro">
+    </div>
+    
+    <div class="field-row">
+      <div class="field">
+        <label id="lblIMEI">IMEI-nummer</label>
+        <input type="text" id="imei" placeholder="15 siffror">
+      </div>
+      <div class="field">
+        <label id="lblCondition">Skick</label>
+        <input type="text" id="condition" placeholder="Bra/God">
+      </div>
+    </div>
+    
+    <hr class="divider">
+    
+    <!-- Date & Location -->
+    <div class="date-field">
+      <div class="field">
+        <label id="lblDate">Datum</label>
+        <input type="date" id="date">
+      </div>
+      <div class="field">
+        <label id="lblLocation">Plats</label>
+        <input type="text" id="location" placeholder="Stad">
+      </div>
+    </div>
+    
+    <hr class="divider">
+    
+    <!-- Price -->
+    <div class="summary">
+      <div class="summary-row summary-total">
+        <span class="summary-label" id="lblTotal">Att betala</span>
+        <div class="price-input-wrap">
+          <input type="number" id="price" placeholder="0" oninput="updatePrice()">
+        </div>
+      </div>
+    </div>
+    
+    <!-- Notes -->
+    <div class="field">
+      <label id="lblNotes">Anteckningar</label>
+      <input type="text" id="notes" style="color:#94a3b8;">
+    </div>
+    
+    <!-- Print Button -->
+    <button class="print-btn no-print" onclick="window.print()" style="background:#1e293b;">
+      <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
+      <span id="btnPrint">Spara som PDF / Skriv ut</span>
+    </button>
+    
+    <!-- Receipt Footer (only visible when printing) -->
+    <div class="receipt-footer">
+      Detta kvitto är en privat överenskommelse mellan säljare och köpare. Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits.
+    </div>
+    
+    <!-- Signature -->
+    <div class="sig-section" style="margin-top: 20px;">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:30px;">
+        <!-- Säljare - Haitham's signature -->
+        <div>
+          <label style="font-size:10px;color:#000;font-weight:600;">Säljare</label>
+          <div style="padding-bottom:6px;">
+            <svg viewBox="0 0 280 55" style="width:100%;height:50px;overflow:visible;">
+              <text x="5" y="42" font-family="'Caveat', cursive" font-size="34" font-style="italic" fill="#1e3a5f" font-weight="400">Haitham Khalifa</text>
+            </svg>
+          </div>
+          <div style="font-size:11px;color:#000;">Haitham Khalifa</div>
+        </div>
+        <!-- Köpare - Empty for buyer -->
+        <div>
+          <label style="font-size:10px;color:#000;font-weight:600;">Köpare</label>
+          <div style="border-bottom:1px solid #334155;height:50px;"></div>
+          <div style="font-size:10px;color:#94a3b8;margin-top:4px;">&nbsp;</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <div class="footer no-print">
+    <p>Fyll i uppgifterna och spara som PDF eller skriv ut direkt.</p>
+  </div>
+</div>
+
+<script>
+  // Auto-fill date
+  document.getElementById('date').valueAsDate = new Date();
+  
+  const texts = {
+    sv: {
+      title: "Mobilkvitto",
+      subtitle: "Kvitto för försäljning av begagnad mobiltelefon",
+      lblSeller: "Säljare",
+      lblBuyer: "Köpare",
+      lblModel: "Mobilmodell",
+      lblIMEI: "IMEI-nummer",
+      lblCondition: "Skick",
+      lblDate: "Datum",
+      lblLocation: "Plats",
+      lblTotal: "Att betala",
+      lblNotes: "Anteckningar",
+      btnPrint: "Spara som PDF / Skriv ut",
+      sellerPlaceholder: "Namn",
+      buyerPlaceholder: "Namn",
+      modelPlaceholder: "t.ex. iPhone 15 Pro",
+      imeiPlaceholder: "15 siffror",
+      conditionPlaceholder: "Bra/God",
+      locationPlaceholder: "Stad",
+      notesPlaceholder: "Valfritt",
+      footerLine1: "Detta kvitto är en privat överenskommelse mellan säljare och köpare.",
+      footerLine2: "Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits."
+    },
+    en: {
+      title: "Mobile Receipt",
+      subtitle: "Receipt for sale of used mobile phone",
+      lblSeller: "Seller",
+      lblBuyer: "Buyer",
+      lblModel: "Phone Model",
+      lblIMEI: "IMEI Number",
+      lblCondition: "Condition",
+      lblDate: "Date",
+      lblLocation: "Location",
+      lblTotal: "Total",
+      lblNotes: "Notes",
+      btnPrint: "Save as PDF / Print",
+      sellerPlaceholder: "Full Name",
+      buyerPlaceholder: "Full Name",
+      modelPlaceholder: "e.g. iPhone 15 Pro",
+      imeiPlaceholder: "15 digits",
+      conditionPlaceholder: "Good/Fair",
+      locationPlaceholder: "City",
+      notesPlaceholder: "Optional",
+      footerLine1: "Detta kvitto är en privat överenskommelse mellan säljare och köpare.",
+      footerLine2: "Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits."
+    }
+  };
+  
+  function setLang(lang) {
+    const t = texts[lang];
+    
+    document.getElementById('title').innerText = t.title;
+    document.getElementById('subtitle').innerText = t.subtitle;
+    document.getElementById('lblSeller').innerText = t.lblSeller;
+    document.getElementById('lblBuyer').innerText = t.lblBuyer;
+    document.getElementById('lblModel').innerText = t.lblModel;
+    document.getElementById('lblIMEI').innerText = t.lblIMEI;
+    document.getElementById('lblCondition').innerText = t.lblCondition;
+    document.getElementById('lblDate').innerText = t.lblDate;
+    document.getElementById('lblLocation').innerText = t.lblLocation;
+    document.getElementById('lblTotal').innerText = t.lblTotal;
+    document.getElementById('lblNotes').innerText = t.lblNotes;
+    document.getElementById('btnPrint').innerText = t.btnPrint;
+    
+    document.getElementById('seller').placeholder = t.sellerPlaceholder;
+    document.getElementById('buyer').placeholder = t.buyerPlaceholder;
+    document.getElementById('model').placeholder = t.modelPlaceholder;
+    document.getElementById('imei').placeholder = t.imeiPlaceholder;
+    document.getElementById('condition').placeholder = t.conditionPlaceholder;
+    document.getElementById('location').placeholder = t.locationPlaceholder;
+    document.getElementById('notes').placeholder = t.notesPlaceholder;
+    
+    document.getElementById('btnSv').classList.toggle('active', lang === 'sv');
+    document.getElementById('btnEn').classList.toggle('active', lang === 'en');
+    
+    document.documentElement.lang = lang;
+  }
+  
+  // Save/Load from localStorage
+  const FIELDS = ['seller', 'buyer', 'model', 'imei', 'condition', 'date', 'location', 'price', 'notes'];
+  
+  function saveData() {
+    FIELDS.forEach(id => {
+      const el = document.getElementById(id);
+      if (el) localStorage.setItem('receipt_' + id, el.value);
+    });
+    // Update signature seller display
+    const sellerEl = document.getElementById('seller');
+    const display = document.getElementById('sigSellerDisplay');
+    if (sellerEl && display) display.textContent = sellerEl.value || '—';
+  }
+  
+  function loadData() {
+    FIELDS.forEach(id => {
+      const el = document.getElementById(id);
+      if (el) {
+        const val = localStorage.getItem('receipt_' + id);
+        if (val) el.value = val;
+      }
+    });
+    // Update signature seller display
+    const sellerVal = localStorage.getItem('receipt_seller');
+    if (sellerVal) {
+      const display = document.getElementById('sigSellerDisplay');
+      if (display) display.textContent = sellerVal;
+    }
+  }
+  
+  // Load on page load
+  document.addEventListener('DOMContentLoaded', loadData);
+  
+  // Save on input
+  FIELDS.forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.addEventListener('input', saveData);
+  });
+  
+  function updatePrice() {}
+</script>
+
+</body>
+</html>
\ No newline at end of file

Monday	12:00 — 23:00
Tuesday	12:00 — 23:00
Wednesday	12:00 — 23:00
Thursday	12:00 — 23:00
Friday — Saturday	12:00 — 00:00
Sunday	12:00 — 23:00
Monday — Thursday	18:00 — 23:00
Friday — Saturday	18:00 — 00:00
Sunday	13:00 — 22:00
Monday	Closed
Tuesday — Thursday	18:00 — 23:00
Friday — Saturday	18:00 — 00:00
Sunday	12:00 — 22:00