diff --git a/Profice WebSite/images/icons/grafik-removebg-preview.png b/Profice WebSite/images/icons/grafik-removebg-preview.png
new file mode 100644
index 0000000..dca0e8b
Binary files /dev/null and b/Profice WebSite/images/icons/grafik-removebg-preview.png differ
diff --git a/Profice WebSite/images/icons/okay-removebg-preview.png b/Profice WebSite/images/icons/okay-removebg-preview.png
new file mode 100644
index 0000000..7a86b6e
Binary files /dev/null and b/Profice WebSite/images/icons/okay-removebg-preview.png differ
diff --git a/Profice WebSite/images/icons/pulse-removebg-preview.png b/Profice WebSite/images/icons/pulse-removebg-preview.png
new file mode 100644
index 0000000..4406c2b
Binary files /dev/null and b/Profice WebSite/images/icons/pulse-removebg-preview.png differ
diff --git a/Profice WebSite/images/icons/steam-removebg-preview.png b/Profice WebSite/images/icons/steam-removebg-preview.png
new file mode 100644
index 0000000..cd9d879
Binary files /dev/null and b/Profice WebSite/images/icons/steam-removebg-preview.png differ
diff --git a/Profice WebSite/images/icons/uhren-removebg-preview.png b/Profice WebSite/images/icons/uhren-removebg-preview.png
new file mode 100644
index 0000000..852ede0
Binary files /dev/null and b/Profice WebSite/images/icons/uhren-removebg-preview.png differ
diff --git a/Profice WebSite/images/icons/upload-removebg-preview.png b/Profice WebSite/images/icons/upload-removebg-preview.png
new file mode 100644
index 0000000..9cd52dc
Binary files /dev/null and b/Profice WebSite/images/icons/upload-removebg-preview.png differ
diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html
index 2d22f50..c037094 100644
--- a/Profice WebSite/index.html	
+++ b/Profice WebSite/index.html	
@@ -98,6 +98,12 @@
                 <a href="#fit" class="nav-link">Für wen?</a>
                 <a href="#process" class="nav-link">Prozess</a>
                 <a href="#demo-section" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="sites/feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         
diff --git a/Profice WebSite/sites/automatisation.html b/Profice WebSite/sites/automatisation.html
index 6a1dd19..912ede3 100644
--- a/Profice WebSite/sites/automatisation.html	
+++ b/Profice WebSite/sites/automatisation.html	
@@ -93,6 +93,12 @@
                 <a href="../index.html#qualification" class="nav-link">Für wen?</a>
                 <a href="../index.html#process" class="nav-link">Prozess</a>
                 <a href="../index.html#interaction" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="top-banner-right">
diff --git a/Profice WebSite/sites/datenschutz.html b/Profice WebSite/sites/datenschutz.html
index 02b3b7f..ab20447 100644
--- a/Profice WebSite/sites/datenschutz.html	
+++ b/Profice WebSite/sites/datenschutz.html	
@@ -149,6 +149,12 @@
                 <a href="../index.html#fit" class="nav-link">Für wen?</a>
                 <a href="../index.html#process" class="nav-link">Prozess</a>
                 <a href="../index.html#demo-section" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         
diff --git a/Profice WebSite/sites/feed.html b/Profice WebSite/sites/feed.html
new file mode 100644
index 0000000..ecde3ac
--- /dev/null
+++ b/Profice WebSite/sites/feed.html	
@@ -0,0 +1,809 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <!-- Cookiebot -->
+    <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d6499c25-b3c2-41ac-8edf-60a4209f74c9" data-blockingmode="auto" type="text/javascript"></script>
+    <script>
+        window.addEventListener('CookiebotOnDialogDisplay', function() {
+            var dialog = document.getElementById('CybotCookiebotDialog');
+            if (dialog) {
+                dialog.style.setProperty('position', 'fixed', 'important');
+                dialog.style.setProperty('bottom', '0', 'important');
+                dialog.style.setProperty('top', 'auto', 'important');
+                dialog.style.setProperty('left', '0', 'important');
+                dialog.style.setProperty('right', '0', 'important');
+                dialog.style.setProperty('width', '100%', 'important');
+                dialog.style.setProperty('transform', 'none', 'important');
+                dialog.style.setProperty('margin', '0', 'important');
+            }
+        });
+    </script>
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-PNJK5FN7');</script>
+    <!-- End Google Tag Manager -->
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Profice Feed - Aktuelle Einblicke in KI-Automatisierung, digitale Prozesse und intelligente Lösungen für Unternehmen.">
+    <meta name="keywords" content="Profice, KI, Automatisierung, Feed, Neuigkeiten, digitale Mitarbeiter, Prozessoptimierung">
+    <meta name="author" content="Profice">
+    <meta property="og:title" content="Feed - Profice">
+    <meta property="og:description" content="Aktuelle Einblicke und Impulse rund um KI-Automatisierung und digitale Prozesse.">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="https://profice.de/images/logo/logo-01-complete.png">
+    <meta name="robots" content="index, follow">
+    <title>Feed - Profice</title>
+    
+    <!-- Favicon with multiple sizes for better visibility -->
+    <link rel="icon" type="image/png" sizes="32x32" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="../images/logo/Appicon 1024X1024-01.png">
+    <link rel="shortcut icon" href="../images/logo/Appicon 1024X1024-01.png">
+    
+    <!-- Preload critical resources -->
+    <link rel="preload" href="../style/design.css?v=20260304" as="style">
+    <link rel="preload" href="../style/cursor.css?v=20260304" as="style">
+    <link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="../style/design.css?v=20260304">
+    <link rel="stylesheet" href="../style/cursor.css?v=20260304">
+
+    <style>
+        /* Feed Page Styles */
+        .feed-content {
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 130px 30px 60px;
+        }
+
+        .feed-header {
+            text-align: center;
+            margin-bottom: 60px;
+        }
+
+        .feed-label {
+            display: inline-block;
+            color: var(--accent-orange);
+            font-size: 13px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            margin-bottom: 16px;
+        }
+
+        .feed-title {
+            font-size: 42px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 16px;
+            line-height: 1.2;
+        }
+
+        .feed-subtitle {
+            font-size: 18px;
+            color: var(--primary-mid);
+            max-width: 700px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        /* Hero Visual — side by side */
+        .hero-visual {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 48px;
+            align-items: center;
+            margin-bottom: 70px;
+            background: rgba(255,255,255,0.85);
+            border-radius: 24px;
+            padding: 48px;
+            border: 1px solid rgba(79,71,71,0.08);
+        }
+        .hero-visual-text h2 {
+            font-size: 26px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 14px;
+            line-height: 1.3;
+        }
+        .hero-visual-text p {
+            font-size: 15px;
+            color: var(--primary-mid);
+            line-height: 1.7;
+        }
+        .hero-visual-graphic { text-align: center; }
+
+        /* Section Block */
+        .feed-section {
+            margin-bottom: 24px;
+        }
+        .feed-section.spaced { margin-bottom: 60px; }
+
+        .feed-section-label {
+            display: inline-block;
+            color: var(--accent-orange);
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            margin-bottom: 12px;
+        }
+
+        .feed-section-title {
+            font-size: 28px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 8px;
+            line-height: 1.3;
+        }
+
+        .feed-section-text {
+            font-size: 16px;
+            color: var(--primary-mid);
+            line-height: 1.7;
+            max-width: 800px;
+        }
+
+        /* Feature Grid */
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 24px;
+            margin-bottom: 70px;
+        }
+
+        .feature-card {
+            background: rgba(255, 255, 255, 0.85);
+            border: 1px solid rgba(79, 71, 71, 0.08);
+            border-radius: 18px;
+            padding: 32px 28px;
+            text-align: center;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 14px 35px rgba(79, 71, 71, 0.1);
+        }
+
+        .feature-card .feature-icon-wrap {
+            width: 64px;
+            height: 64px;
+            border-radius: 16px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 18px;
+        }
+        .feature-icon-wrap.teal { background: rgba(90,158,150,0.12); }
+        .feature-icon-wrap.orange { background: rgba(212,134,74,0.12); }
+        .feature-icon-wrap.green { background: rgba(127,184,130,0.12); }
+
+        .feature-card h3 {
+            font-size: 17px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 8px;
+        }
+
+        .feature-card p {
+            font-size: 14px;
+            color: var(--primary-mid);
+            line-height: 1.6;
+        }
+
+        /* Segment Visual */
+        .segment-visual {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 48px;
+            align-items: center;
+            margin-bottom: 70px;
+        }
+        .segment-graphic { text-align: center; }
+
+        .segment-cards {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .seg-card {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            background: rgba(255,255,255,0.9);
+            border-radius: 16px;
+            padding: 22px 24px;
+            border-left: 4px solid;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .seg-card:hover {
+            transform: translateX(6px);
+            box-shadow: 0 8px 24px rgba(79,71,71,0.08);
+        }
+        .seg-card.core { border-color: var(--accent-green); }
+        .seg-card.longtail { border-color: var(--accent-orange); }
+        .seg-card.feeder { border-color: var(--accent-teal); }
+
+        .seg-card .seg-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        .seg-card.core .seg-icon { background: rgba(127,184,130,0.15); }
+        .seg-card.longtail .seg-icon { background: rgba(212,134,74,0.15); }
+        .seg-card.feeder .seg-icon { background: rgba(90,158,150,0.15); }
+
+        .seg-card .seg-text h3 {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 3px;
+        }
+        .seg-card .seg-text p {
+            font-size: 13px;
+            color: var(--primary-mid);
+            line-height: 1.5;
+        }
+
+        /* Pipeline Visual */
+        .pipeline-wrap {
+            margin-bottom: 70px;
+        }
+        .pipeline {
+            display: flex;
+            align-items: stretch;
+            gap: 0;
+            position: relative;
+        }
+        .pipeline-step {
+            flex: 1;
+            text-align: center;
+            padding: 36px 20px;
+            background: rgba(255,255,255,0.88);
+            border: 1px solid rgba(79,71,71,0.08);
+            position: relative;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .pipeline-step:first-child { border-radius: 18px 0 0 18px; }
+        .pipeline-step:last-child { border-radius: 0 18px 18px 0; }
+        .pipeline-step:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 30px rgba(79,71,71,0.08);
+            z-index: 2;
+        }
+
+        .pipeline-step .pipe-icon {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 14px;
+        }
+        .pipeline-step:nth-child(1) .pipe-icon { background: rgba(212,134,74,0.12); }
+        .pipeline-step:nth-child(2) .pipe-icon { background: rgba(90,158,150,0.12); }
+        .pipeline-step:nth-child(3) .pipe-icon { background: rgba(127,184,130,0.12); }
+
+        .pipeline-step h3 {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 6px;
+        }
+        .pipeline-step p {
+            font-size: 13px;
+            color: var(--primary-mid);
+            line-height: 1.5;
+        }
+        .pipeline-arrow {
+            display: flex;
+            align-items: center;
+            z-index: 3;
+            margin: 0 -8px;
+        }
+
+        /* Highlight Section */
+        .feed-highlight {
+            background: rgba(255, 255, 255, 0.95);
+            border: 2px solid var(--accent-green);
+            border-radius: 24px;
+            padding: 48px;
+            text-align: center;
+            margin-bottom: 60px;
+        }
+
+        .feed-highlight h2 {
+            font-size: 28px;
+            font-weight: 700;
+            color: var(--primary-dark);
+            margin-bottom: 14px;
+        }
+
+        .feed-highlight p {
+            font-size: 16px;
+            color: var(--primary-mid);
+            max-width: 600px;
+            margin: 0 auto 28px;
+            line-height: 1.7;
+        }
+
+        .feed-highlight .highlight-btn {
+            display: inline-block;
+            padding: 14px 32px;
+            background: var(--accent-teal);
+            color: white;
+            text-decoration: none;
+            border-radius: 12px;
+            font-weight: 600;
+            font-size: 15px;
+            transition: all 0.3s ease;
+        }
+
+        .feed-highlight .highlight-btn:hover {
+            background: #4a8e86;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(90, 158, 150, 0.3);
+        }
+
+        /* ROI Section */
+        .roi-section {
+            display: grid;
+            grid-template-columns: 1fr auto 1fr;
+            gap: 0;
+            align-items: center;
+            margin-bottom: 70px;
+            background: rgba(255,255,255,0.9);
+            border-radius: 24px;
+            border: 1px solid rgba(79,71,71,0.08);
+            overflow: hidden;
+        }
+        .roi-box {
+            padding: 44px 36px;
+            text-align: center;
+        }
+        .roi-box .roi-label {
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 1.5px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        .roi-box .roi-amount {
+            font-size: 40px;
+            font-weight: 700;
+            line-height: 1.1;
+            margin-bottom: 6px;
+        }
+        .roi-box .roi-desc {
+            font-size: 14px;
+            color: var(--primary-mid);
+        }
+        .roi-box.cost .roi-label { color: var(--accent-orange); }
+        .roi-box.cost .roi-amount { color: var(--primary-dark); }
+        .roi-box.profit .roi-label { color: var(--accent-green); }
+        .roi-box.profit .roi-amount { color: var(--accent-green); }
+        .roi-arrow {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 10px;
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .feed-content { padding: 110px 20px 40px; }
+            .feed-title { font-size: 30px; }
+            .hero-visual { grid-template-columns: 1fr; padding: 32px 24px; }
+            .hero-visual-graphic { order: -1; }
+            .feature-grid { grid-template-columns: 1fr; }
+            .segment-visual { grid-template-columns: 1fr; }
+            .segment-graphic { order: -1; }
+            .pipeline { flex-direction: column; }
+            .pipeline-step:first-child { border-radius: 18px 18px 0 0; }
+            .pipeline-step:last-child { border-radius: 0 0 18px 18px; }
+            .pipeline-arrow { transform: rotate(90deg); margin: -8px 0; justify-content: center; }
+            .roi-section { grid-template-columns: 1fr; }
+            .roi-arrow { transform: rotate(90deg); padding: 10px 0; }
+            .roi-box .roi-amount { font-size: 30px; }
+            .feed-highlight { padding: 32px 24px; }
+        }
+    </style>
+</head>
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNJK5FN7"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- Hexagonal Background Canvas -->
+    <canvas id="hexCanvas"></canvas>
+
+    <!-- Top Banner -->
+    <header class="top-banner dark-theme">
+        <div class="top-banner-left">
+            <div class="banner-left">
+                <a href="../index.html" class="logo-link">
+                    <img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
+                </a>
+            </div>
+        </div>
+        <div class="top-banner-center">
+            <nav class="main-nav">
+                <a href="../index.html#hero" class="nav-link">Start</a>
+                <a href="../index.html#problems" class="nav-link">Systeme</a>
+                <a href="../index.html#fit" class="nav-link">Für wen?</a>
+                <a href="../index.html#process" class="nav-link">Prozess</a>
+                <a href="../index.html#demo-section" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link active" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+        <div class="top-banner-right">
+            <button id="cursorToggle">
+                <img src="../images/icons/spider.png?v=20260303" alt="Spider" class="cursor-icon" style="width: 46px; height: 46px;">
+            </button>
+        </div>
+    </header>
+
+    <div class="overlay" id="overlay"></div>
+
+    <!-- Feed Content -->
+    <main class="feed-content">
+        <div class="feed-header">
+            <span class="feed-label">Profice Feed</span>
+            <h1 class="feed-title">Intelligentes Feed-Management für Google Shopping</h1>
+            <p class="feed-subtitle">Mehr Profit aus Ihren Google-Shopping-Kampagnen — durch automatisierte, datenbasierte Steuerung Ihres Produktfeeds.</p>
+        </div>
+
+        <!-- Hero Visual: Text + Graphic -->
+        <div class="hero-visual">
+            <div class="hero-visual-text">
+                <h2>Ihr Produktfeed — auf Profitabilität optimiert</h2>
+                <p>Feed erkennt automatisch, welche Produkte Gewinn bringen und welche Budget verbrennen. Ihr Werbebudget fließt gezielt in die Artikel, die sich wirklich lohnen.</p>
+            </div>
+            <div class="hero-visual-graphic">
+                <svg width="320" height="200" viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <!-- Bar chart showing budget optimization -->
+                    <rect x="20" y="160" width="280" height="1" rx="0.5" fill="#8a8a7a" opacity="0.3"/>
+                    <!-- Before bars -->
+                    <text x="70" y="190" font-size="11" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Vorher</text>
+                    <rect x="30" y="60" width="28" height="100" rx="6" fill="#d4864a" opacity="0.35"/>
+                    <rect x="62" y="40" width="28" height="120" rx="6" fill="#d4864a" opacity="0.55"/>
+                    <rect x="94" y="80" width="28" height="80" rx="6" fill="#d4864a" opacity="0.25"/>
+                    <!-- Arrow -->
+                    <path d="M145 100 L175 100" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="4 3"/>
+                    <path d="M172 94 L180 100 L172 106" stroke="#8a8a7a" stroke-width="2" fill="none"/>
+                    <!-- After bars — optimized -->
+                    <text x="250" y="190" font-size="11" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Nachher</text>
+                    <rect x="200" y="25" width="28" height="135" rx="6" fill="#7fb882" opacity="0.8"/>
+                    <rect x="232" y="55" width="28" height="105" rx="6" fill="#d4864a" opacity="0.7"/>
+                    <rect x="264" y="120" width="28" height="40" rx="6" fill="#4a7db8" opacity="0.3"/>
+                    <!-- Labels -->
+                    <text x="214" y="18" font-size="9" fill="#7fb882" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Core</text>
+                    <text x="246" y="48" font-size="9" fill="#d4864a" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Feeder</text>
+                    <text x="278" y="114" font-size="9" fill="#4a7db8" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Longtail</text>
+                </svg>
+            </div>
+        </div>
+
+        <!-- Features with SVG icons -->
+        <div class="feed-section">
+            <span class="feed-section-label">Vorteile</span>
+            <h2 class="feed-section-title">Was Feed für Sie leistet</h2>
+        </div>
+        <div class="feature-grid">
+            <div class="feature-card">
+                <div class="feature-icon-wrap teal">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="14" width="4" height="6" rx="1"/><rect x="10" y="9" width="4" height="11" rx="1"/><rect x="16" y="4" width="4" height="16" rx="1"/></svg>
+                </div>
+                <h3>Profitabilität pro Produkt</h3>
+                <p>Jedes Produkt wird individuell bewertet — basierend auf echtem Gewinn.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon-wrap orange">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                </div>
+                <h3>Intelligente Segmentierung</h3>
+                <p>Automatische Einteilung in profitable, neue und unprofitable Gruppen.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon-wrap green">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 12 6 12 8 5 11 19 14 9 16 14 18 12 22 12"/></svg>
+                </div>
+                <h3>Live-Daten</h3>
+                <p>Performance-Daten werden automatisch abgerufen — immer aktuell.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon-wrap teal">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><polyline points="7 13 10.5 16.5 17 9"/></svg>
+                </div>
+                <h3>Feed-Qualität gesichert</h3>
+                <p>Fehlerhafte Produktdaten werden automatisch korrigiert.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon-wrap orange">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+                </div>
+                <h3>Voll automatisiert</h3>
+                <p>Läuft eigenständig — mit Benachrichtigungen bei Bedarf.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon-wrap green">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                </div>
+                <h3>Direkt einsatzbereit</h3>
+                <p>Sofort kompatibel mit Google Merchant Center.</p>
+            </div>
+        </div>
+
+        <!-- Segment Visual: Donut Chart + Cards -->
+        <div class="feed-section">
+            <span class="feed-section-label">Strategie</span>
+            <h2 class="feed-section-title">Drei Segmente. Eine klare Logik.</h2>
+        </div>
+        <div class="segment-visual">
+            <div class="segment-graphic">
+                <svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <!-- Background track -->
+                    <circle cx="130" cy="130" r="95" stroke="#EBEBDE" stroke-width="30" fill="none"/>
+                    <!--
+                        Woven donut: each arc split at its midpoint into two halves.
+                        Render order (back → front) creates the over/under effect at each junction:
+                          Teal over Green  (at top / 0°)
+                          Green over Orange (at ~144°)
+                          Orange over Teal  (at ~270°)
+                        Circumference ≈ 597 units.
+                        Green: 0–239  | Orange: 239–448  | Teal: 448–597
+                    -->
+                    <g>
+                        <animateTransform
+                            attributeName="transform"
+                            attributeType="XML"
+                            type="rotate"
+                            from="0 130 130"
+                            to="360 130 130"
+                            dur="20s"
+                            repeatCount="indefinite"/>
+
+                        <!-- BACK halves (rendered first = underneath at their far junction) -->
+
+                        <!-- Green back half: units 0 → 119.5 -->
+                        <circle cx="130" cy="130" r="95" stroke="#7fb882" stroke-width="30" fill="none"
+                            stroke-dasharray="119.5 477.5" stroke-dashoffset="0"
+                            transform="rotate(-90 130 130)" stroke-linecap="round"/>
+
+                        <!-- Orange back half: units 239 → 343.5 -->
+                        <circle cx="130" cy="130" r="95" stroke="#d4864a" stroke-width="30" fill="none"
+                            stroke-dasharray="104.5 492.5" stroke-dashoffset="-239"
+                            transform="rotate(-90 130 130)" stroke-linecap="round"/>
+
+                        <!-- Teal back half: units 448 → 522.5 -->
+                        <circle cx="130" cy="130" r="95" stroke="#5a9e96" stroke-width="30" fill="none"
+                            stroke-dasharray="74.5 522.5" stroke-dashoffset="-448"
+                            transform="rotate(-90 130 130)" stroke-linecap="round"/>
+
+                        <!-- FRONT halves (rendered last = on top at their leading junction) -->
+
+                        <!-- Green front half: units 119.5 → 239  →  Green over Orange at 144° -->
+                        <circle cx="130" cy="130" r="95" stroke="#7fb882" stroke-width="30" fill="none"
+                            stroke-dasharray="119.5 477.5" stroke-dashoffset="-119.5"
+                            transform="rotate(-90 130 130)" stroke-linecap="round"/>
+
+                        <!-- Orange front half: units 343.5 → 448  →  Orange over Teal at 270° -->
+                        <circle cx="130" cy="130" r="95" stroke="#d4864a" stroke-width="30" fill="none"
+                            stroke-dasharray="104.5 492.5" stroke-dashoffset="-343.5"
+                            transform="rotate(-90 130 130)" stroke-linecap="round"/>
+
+                        <!-- Teal front half: units 522.5 → 597  →  Teal over Green at 0°/top -->
+                        <circle cx="130" cy="130" r="95" stroke="#5a9e96" stroke-width="30" fill="none"
+                            stroke-dasharray="74.5 522.5" stroke-dashoffset="-522.5"
+                            transform="rotate(-90 130 130)" stroke-linecap="round"/>
+                    </g>
+                    <!-- Center text (static, outside animated group) -->
+                    <text x="130" y="122" font-size="28" fill="#5a5252" text-anchor="middle" font-weight="700" font-family="Montserrat,sans-serif">POAS</text>
+                    <text x="130" y="146" font-size="12" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Segmentierung</text>
+                </svg>
+            </div>
+            <div class="segment-cards">
+                <div class="seg-card core">
+                    <div class="seg-icon">
+                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+                    </div>
+                    <div class="seg-text">
+                        <h3>Core — Gewinnbringer</h3>
+                        <p>Maximale Sichtbarkeit und höchstes Budget</p>
+                    </div>
+                </div>
+                <div class="seg-card longtail">
+                    <div class="seg-icon">
+                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                    </div>
+                    <div class="seg-text">
+                        <h3>Feeder — Neue Chancen</h3>
+                        <p>Gezieltes Testing nach Preisniveau</p>
+                    </div>
+                </div>
+                <div class="seg-card feeder">
+                    <div class="seg-icon">
+                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                    </div>
+                    <div class="seg-text">
+                        <h3>Longtail — Budgetfresser</h3>
+                        <p>Budget begrenzen oder umleiten</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Pipeline Visual -->
+        <div class="feed-section">
+            <span class="feed-section-label">Ablauf</span>
+            <h2 class="feed-section-title">So funktioniert es</h2>
+        </div>
+        <div class="pipeline-wrap">
+            <div class="pipeline">
+                <div class="pipeline-step">
+                    <div class="pipe-icon">
+                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+                    </div>
+                    <h3>Daten verbinden</h3>
+                    <p>Shop-Feed, Einkaufspreise und Google-Ads-Daten</p>
+                </div>
+                <div class="pipeline-arrow">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+                </div>
+                <div class="pipeline-step">
+                    <div class="pipe-icon">
+                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                    </div>
+                    <h3>Gewinn berechnen</h3>
+                    <p>POAS-Wert pro Produkt ermitteln</p>
+                </div>
+                <div class="pipeline-arrow">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+                </div>
+                <div class="pipeline-step">
+                    <div class="pipe-icon">
+                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                    </div>
+                    <h3>Feed optimieren</h3>
+                    <p>Optimierter Feed für Google Merchant Center</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- ROI Section -->
+        <div class="feed-section">
+            <span class="feed-section-label">Investition</span>
+            <h2 class="feed-section-title">Kleine Investition. Großer Effekt.</h2>
+        </div>
+        <div class="roi-section">
+            <div class="roi-box cost">
+                <div class="roi-label">Investition</div>
+                <div class="roi-amount">ab 1.000 &euro;</div>
+                <div class="roi-desc">Einrichtung &amp; Optimierung</div>
+            </div>
+            <div class="roi-arrow">
+                <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+                    <circle cx="24" cy="24" r="22" fill="rgba(127,184,130,0.1)" stroke="#7fb882" stroke-width="1.5"/>
+                    <line x1="14" y1="24" x2="34" y2="24" stroke="#7fb882" stroke-width="2.5" stroke-linecap="round"/>
+                    <polyline points="28,18 34,24 28,30" fill="none" stroke="#7fb882" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+            <div class="roi-box profit">
+                <div class="roi-label">Ergebnis</div>
+                <div class="roi-amount">+527 %</div>
+                <div class="roi-desc">Mehr Gewinn aus dem gleichen Werbebudget</div>
+            </div>
+        </div>
+
+        <!-- CTA -->
+        <div class="feed-highlight">
+            <h2>Feed-Optimierung für Ihren Shop?</h2>
+            <p>Wir richten das System für Ihren Google-Shopping-Account ein — vollautomatisiert und auf Ihre Produkte abgestimmt.</p>
+            <a href="offers.html" class="highlight-btn">Unverbindlich anfragen</a>
+        </div>
+    </main>
+
+    <!-- Footer Banner -->
+    <footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
+        <style>
+            .footer-banner a { color: white !important; }
+        </style>
+        <div class="footer-container">
+            <div class="footer-content">
+                <!-- Company Info Section -->
+                <div class="footer-section">
+                    <div class="footer-description">
+                        <p>Intelligente Prozesse für nachhaltiges Wachstum</p>
+                    </div>
+                </div>
+                
+                <!-- Quick Links Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Services</h4>
+                    <nav class="footer-nav">
+                        <a href="../index.html#systeme" class="footer-link">KI Systeme</a>
+                        <a href="../index.html#interaction" class="footer-link">Demo</a>
+                    </nav>
+                </div>
+                
+                <!-- Legal Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Rechtliches</h4>
+                    <nav class="footer-nav">
+                        <a href="datenschutz.html" class="footer-link">Datenschutzerklärung</a>
+                        <a href="impressum.html" class="footer-link">Impressum</a>
+                    </nav>
+                </div>
+                
+                <!-- Contact Section -->
+                <div class="footer-section">
+                    <h4 class="footer-title">Kontakt</h4>
+                    <div class="footer-contact">
+                        <div class="contact-item">
+                            <img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
+                            <span><a href="mailto:info@profice.de">info@profice.de</a></span>
+                        </div>
+                    </div>
+                    <div class="social-media">
+                        <div class="social-icons">
+                            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
+                                <img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
+                            </a>
+                            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
+                                <img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <div class="footer-bottom-content">
+                    <p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
+                    <div class="footer-bottom-links">
+                        <a href="datenschutz.html" class="footer-link">Datenschutz</a>
+                        <span class="separator">•</span>
+                        <a href="impressum.html" class="footer-link">Impressum</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Optimized script loading -->
+    <script src="../scripts/hex-background.js?v=20260304" defer></script>
+    <script src="../scripts/script.js?v=20260304" defer></script>
+    <script src="../scripts/cursor.js?v=20260304" defer></script>
+    <script src="../scripts/scroll-header.min.js?v=20260304" defer></script>
+
+</body>
+</html>
diff --git a/Profice WebSite/sites/impressum.html b/Profice WebSite/sites/impressum.html
index 1ee9d19..4448551 100644
--- a/Profice WebSite/sites/impressum.html	
+++ b/Profice WebSite/sites/impressum.html	
@@ -148,6 +148,12 @@
                 <a href="../index.html#fit" class="nav-link">Für wen?</a>
                 <a href="../index.html#process" class="nav-link">Prozess</a>
                 <a href="../index.html#demo-section" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         
diff --git a/Profice WebSite/sites/ki-integration.html b/Profice WebSite/sites/ki-integration.html
index 259fffa..ec04b28 100644
--- a/Profice WebSite/sites/ki-integration.html	
+++ b/Profice WebSite/sites/ki-integration.html	
@@ -93,6 +93,12 @@
                 <a href="../index.html#qualification" class="nav-link">Für wen?</a>
                 <a href="../index.html#process" class="nav-link">Prozess</a>
                 <a href="../index.html#interaction" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="top-banner-right">
diff --git a/Profice WebSite/sites/leads.html b/Profice WebSite/sites/leads.html
index ca51d15..dae9f07 100644
--- a/Profice WebSite/sites/leads.html	
+++ b/Profice WebSite/sites/leads.html	
@@ -94,6 +94,12 @@
                 <a href="../index.html#qualification" class="nav-link">Für wen?</a>
                 <a href="../index.html#process" class="nav-link">Prozess</a>
                 <a href="../index.html#interaction" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="top-banner-right">
diff --git a/Profice WebSite/sites/offers.html b/Profice WebSite/sites/offers.html
index 0b88eb9..e37ce41 100644
--- a/Profice WebSite/sites/offers.html	
+++ b/Profice WebSite/sites/offers.html	
@@ -93,6 +93,12 @@
                 <a href="../index.html#qualification" class="nav-link">Für wen?</a>
                 <a href="../index.html#process" class="nav-link">Prozess</a>
                 <a href="../index.html#interaction" class="nav-link active">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="top-banner-right">
diff --git a/Profice WebSite/sites/website.html b/Profice WebSite/sites/website.html
index 16ad992..70f6833 100644
--- a/Profice WebSite/sites/website.html	
+++ b/Profice WebSite/sites/website.html	
@@ -93,6 +93,12 @@
                 <a href="../index.html#qualification" class="nav-link">Für wen?</a>
                 <a href="../index.html#process" class="nav-link">Prozess</a>
                 <a href="../index.html#interaction" class="nav-link">Kontakt</a>
+                <div class="nav-dropdown">
+                    <a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
+                    <div class="dropdown-menu">
+                        <a href="feed.html" class="dropdown-item">Google Feed</a>
+                    </div>
+                </div>
             </nav>
         </div>
         <div class="top-banner-right">
diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css
index 6bbc546..914a842 100644
--- a/Profice WebSite/style/design.css	
+++ b/Profice WebSite/style/design.css	
@@ -111,7 +111,7 @@ body {
     right: 0;
     z-index: 1001;
     border-bottom: 3px solid var(--accent-orange);
-    overflow: hidden;
+    overflow: visible;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     
@@ -373,6 +373,94 @@ body {
     width: 100%;
 }
 
+/* Nav Dropdown */
+.nav-dropdown {
+    position: relative;
+}
+
+.nav-dropdown .nav-link {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.nav-dropdown .nav-link .dropdown-arrow {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    transition: transform 0.3s ease;
+    margin-top: 2px;
+}
+
+.nav-dropdown:hover .nav-link .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--primary-dark);
+    border: 1px solid rgba(235, 235, 222, 0.15);
+    border-radius: 12px;
+    padding: 8px 0;
+    min-width: 180px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
+    transform: translateX(-50%) translateY(8px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+    z-index: 1002;
+}
+
+.dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid var(--primary-dark);
+}
+
+.dropdown-menu::after {
+    content: '';
+    position: absolute;
+    top: -12px;
+    left: 0;
+    right: 0;
+    height: 12px;
+}
+
+.nav-dropdown:hover .dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+}
+
+.dropdown-menu .dropdown-item {
+    display: block;
+    padding: 10px 20px;
+    color: var(--primary-light);
+    text-decoration: none;
+    font-size: 15px;
+    font-weight: 500;
+    transition: background 0.2s ease, color 0.2s ease;
+    white-space: nowrap;
+}
+
+.dropdown-menu .dropdown-item:hover {
+    background: rgba(235, 235, 222, 0.1);
+    color: var(--accent-orange);
+}
+
 .logo-link {
     text-decoration: none;
     display: flex;