```json { "files": { "index.html": "\n\n\n \n \n Oishii Sushi Restaurant Aachen - Authentisches Sushi & Japanische Küche\n \n \n\n\n \n \n\n \n
\n
\n
\n
\n
Aachen
\n

Oishiiおいしい

\n

Authentische japanische Küche trifft moderne Kreationen

\n

Frischer Fisch • Handgemachtes Sushi • Traditionelle Rezepte

\n
\n Unser Menü entdecken\n Reservierung\n
\n
\n
\n
\n \n
\n
\n\n \n
\n
\n
\n Unser Angebot\n

Kulinarische Vielfalt

\n

Entdecken Sie die Kunst der japanischen Küche

\n
\n
\n
\n
🍣
\n

Sushi & Sashimi

\n

Frischeste Zutaten, kunstvoll zubereitet nach traditionellen Techniken. Von klassischen Nigiri bis zu kreativen Inside-Out Rolls.

\n
    \n
  • Nigiri & Maki
    • \n
  • California & Philadelphia Rolls
    • \n
  • Sashimi-Variationen
    • \n
\n
\n
\n
🍜
\n

Warme Küche

\n

Aromatische Ramen, knuspriges Tempura und saftige Teriyaki-Gerichte – die perfekte Balance aus Tradition und Innovation.

\n
    \n
  • Ramen & Udon Nudeln
    • \n
  • Teriyaki & Donburi
    • \n
  • Tempura & Gyoza
    • \n
\n
\n
\n
🍱
\n

Bento & Sets

\n

Sorgfältig zusammengestellte Bento-Boxen und Menüs für ein komplettes japanisches Geschmackserlebnis.

\n
    \n
  • Lunch Bento-Boxen
    • \n
  • Sushi-Sets für 2-4 Personen
    • \n
  • Vegetarische Optionen
    • \n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n 🏮\n
\n
\n
\n Über uns\n

Willkommen bei Oishii

\n

Im Herzen von Aachen servieren wir seit Jahren authentische japanische Küche mit Leidenschaft und Hingabe.

\n

Unser Name \"Oishii\" bedeutet \"lecker\" auf Japanisch – und genau das ist unser Versprechen an Sie. Wir kombinieren traditionelle Rezepte mit frischen, regionalen Zutaten und modernen Geschmacksnoten.

\n
\n
\n
01
\n

Frische Qualität

\n

Täglich frische Lieferung von Premium-Fisch und ausgewählten Zutaten

\n
\n
\n
02
\n

Meisterhafte Zubereitung

\n

Unser Team besteht aus erfahrenen Sushi-Meistern

\n
\n
\n
03
\n

Modernes Ambiente

\n

Genießen Sie Ihr Essen in stilvoller, entspannter Atmosphäre

\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n Besuchen Sie uns\n

Bereit für ein unvergessliches Geschmackserlebnis?

\n

Reservieren Sie jetzt Ihren Tisch oder bestellen Sie zum Mitnehmen

\n
\n \n
📞
\n
\n Telefon\n +49 241 9008360\n
\n \n \n
✉️
\n
\n E-Mail\n info@oishii.de\n
\n \n
\n
\n

Öffnungszeiten

\n
\n
\n Mo - Fr\n 11:30 - 15:00 & 17:30 - 22:30\n
\n
\n Sa - So\n 12:00 - 23:00\n
\n
\n
\n
\n
\n
\n\n \n \n\n \n\n", "assets/style.css": ":root {\n --color-primary: #c41e3a;\n --color-primary-dark: #a01830;\n --color-secondary: #1a1a1a;\n --color-accent: #d4af37;\n --color-text: #2c2c2c;\n --color-text-light: #666666;\n --color-bg: #ffffff;\n --color-bg-light: #f8f8f8;\n --color-bg-dark: #1a1a1a;\n --color-border: #e5e5e5;\n \n --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;\n --font-accent: 'Georgia', serif;\n \n --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);\n \n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-primary);\n color: var(--color-text);\n line-height: 1.6;\n background-color: var(--color-bg);\n overflow-x: hidden;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 24px;\n}\n\n/* Navigation */\n.navbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(10px);\n box-shadow: var(--shadow-sm);\n z-index: 1000;\n transition: var(--transition);\n}\n\n.navbar.scrolled {\n box-shadow: var(--shadow-md);\n}\n\n.nav-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 0;\n}\n\n.logo {\n font-size: 28px;\n font-weight: 700;\n color: var(--color-primary);\n text-decoration: none;\n letter-spacing: 1px;\n transition: var(--transition);\n}\n\n.logo:hover {\n color: var(--color-primary-dark);\n}\n\n.nav-menu {\n display: flex;\n list-style: none;\n gap: 40px;\n align-items: center;\n}\n\n.nav-menu a {\n color: var(--color-text);\n text-decoration: none;\n font-weight: 500;\n font-size: 15px;\n transition: var(--transition);\n position: relative;\n}\n\n.nav-menu a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--color-primary);\n transition: var(--transition);\n}\n\n.nav-menu a:hover::after,\n.nav-menu a.active::after {\n width: 100%;\n}\n\n.nav-menu a:hover {\n color: var(--color-primary);\n}\n\n.btn-nav {\n background: var(--color-primary);\n color: white !important;\n padding: 10px 24px;\n border-radius: 6px;\n}\n\n.btn-nav::after {\n display: none;\n}\n\n.btn-nav:hover {\n background: var(--color-primary-dark);\n color: white !important;\n transform: translateY(-2px);\n}\n\n.mobile-toggle {\n display: none;\n flex-direction: column;\n gap: 5px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 5px;\n}\n\n.mobile-toggle span {\n width: 25px;\n height: 3px;\n background: var(--color-text);\n transition: var(--transition);\n border-radius: 2px;\n}\n\n/* Hero Section */\n.hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);\n overflow: hidden;\n margin-top: 76px;\n}\n\n.hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: \n radial-gradient(circle at 20% 50%, rgba(196, 30, 58, 0.1) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);\n pointer-events: none;\n}\n\n.hero-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image/svg+xml,');\n opacity: 0.5;\n}\n\n.hero-content {\n text-align: center;\n position: relative;\n z-index: 2;\n max-width: 800px;\n padding: 40px 0;\n}\n\n.hero-badge {\n display: inline-block;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n color: var(--color-accent);\n padding: 8px 20px;\n border-radius: 30px;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 30px;\n border: 1px solid rgba(212, 175, 55, 0.3);\n}\n\n.hero-title {\n font-size: clamp(48px, 8vw, 96px);\n font-weight: 700;\n color: white;\n margin-bottom: 20px;\n letter-spacing: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n}\n\n.subtitle {\n font-size: clamp(24px, 4vw, 42px);\n color: var(--color-accent);\n font-weight: 400;\n letter-spacing: 4px;\n}\n\n.hero-description {\n font-size: clamp(18px, 2.5vw, 24px);\n color: rgba(255, 255, 255, 0.9);\n margin-bottom: 15px;\n font-weight: 300;\n letter-spacing: 1px;\n}\n\n.hero-tagline {\n font-size: 16px;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 40px;\n letter-spacing: 1px;\n}\n\n.hero-buttons {\n display: flex;\n gap: 20px;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.btn {\n display: inline-block;\n padding: 16px 40px;\n border-radius: 8px;\n text-decoration: none;\n font-weight: 600;\n font-size: 16px;\n transition: var(--transition);\n cursor: pointer;\n border: 2px solid transparent;\n}\n\n.btn-primary {\n background: var(--color-primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--color-primary-dark);\n transform: translateY(-3px);\n box-shadow: 0 8px 24px rgba(196, 30, 58, 0.3);\n}\n\n.btn-secondary {\n background: transparent;\n color: white;\n border: 2px solid white;\n}\n\n.btn-secondary:hover {\n background: white;\n color: var(--color-text);\n transform: translateY(-3px);\n}\n\n.scroll-indicator {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n}\n\n.scroll-indicator span {\n display: block;\n width: 24px;\n height: 40px;\n border: 2px solid rgba(255, 255, 255, 0.5);\n border-radius: 20px;\n position: relative;\n}\n\n.scroll-indicator span::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 8px;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 2px;\n animation: scroll 2s infinite;\n}\n\n@keyframes scroll {\n 0%, 100% {\n opacity: 0;\n transform: translateX(-50%) translateY(0);\n }\n 50% {\n opacity: 1;\n transform: translateX(-50%) translateY(8px);\n }\n}\n\n/* Section Styles */\nsection {\n padding: 100px 0;\n}\n\n.section-header {\n text-align: center;\n max-width: 700px;\n margin: 0 auto 60px;\n}\n\n.section-badge {\n display: inline-block;\n background: rgba(196, 30, 58, 0.1);\n color: var(--color-primary);\n padding: 8px 20px;\n border-radius: 30px;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 20px;\n}\n\n.section-badge.light {\n background: rgba(255, 255, 255, 0.2);\n color: white;\n}\n\n.section-header h2 {\n font-size: clamp(32px, 5vw, 48px);\n color: var(--color-secondary);\n margin-bottom: 20px;\n font-weight: 700;\n}\n\n.section-header p {\n font-size: 18px;\n color: var(--color-text-light);\n}\n\n/* Services Section */\n.services {\n background: var(--color-bg-light);\n}\n\n.services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 40px;\n}\n\n.service-card {\n background: white;\n padding: 40px;\n border-radius: 16px;\n box-shadow: var(--shadow-sm);\n transition: var(--transition);\n border: 1px solid var(--color-border);\n}\n\n.service-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-lg);\n border-color: var(--color-primary);\n}\n\n.service-icon {\n font-size: 64px;\n margin-bottom: 24px;\n display: block;\n}\n\n.service-card h3 {\n font-size: 24px;\n color: var(--color-secondary);\n margin-bottom: 16px;\n font-weight: 700;\n}\n\n.service-card > p {\n color: var(--color-text-light);\n margin-bottom: 24px;\n line-height: 1.7;\n}\n\n.service-features {\n list-style: none;\n padding: 0;\n}\n\n.service-features li {\n color: var(--color-text);\n padding: 10px 0;\n padding-left: 28px;\n position: relative;\n font-size: 15px;\n}\n\n.service-features li::before {\n content: '✓';\n position: absolute;\n left: 0;\n color: var(--color-primary);\n font-weight: 700;\n}\n\n/* About Section */\n.about {\n background: white;\n}\n\n.about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n\n.about-image {\n position: relative;\n}\n\n.image-placeholder {\n aspect-ratio: 4/3;\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-lg);\n position: relative;\n overflow: hidden;\n}\n\n.image-placeholder::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\n}\n\n.image-icon {\n font-size: 120px;\n opacity: 0.3;\n position: relative;\n z-index: 1;\n}\n\n.about-content .section-badge {\n margin-bottom: 20px;\n}\n\n.about-content h2 {\n font-size: clamp(32px, 4vw, 42px);\n color: var(--color-secondary);\n margin-bottom: 24px;\n font-weight: 700;\n}\n\n.about-content .lead {\n font-size: 20px;\n color: var(--color-text);\n font-weight: 500;\n margin-bottom: 20px;\n line-height: 1.6;\n}\n\n.about-content p {\n color: var(--color-text-light);\n margin-bottom: 40px;\n line-height: 1.8;\n}\n\n.about-features {\n display: flex;\n flex-direction: column;\n gap: 30px;\n}\n\n.about-feature {\n display: flex;\n gap: 20px;\n}\n\n.feature-number {\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n background: rgba(196, 30, 58, 0.1);\n color: var(--color-primary);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 18px;\n}\n\n.about-feature h4 {\n font-size: 18px;\n color: var(--color-secondary);\n margin-bottom: 8px;\n font-weight: 600;\n}\n\n.about-feature p {\n margin: 0;\n font-size: 15px;\n}\n\n/* CTA Section */\n.cta {\n background: linear-gradient(135deg, var(--color-secondary) 0%, #2c2c2c 100%);\n color: white;\n position: relative;\n overflow: hidden;\n}\n\n.cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: \n radial-gradient(circle at 30% 30%, rgba(196, 30, 58, 0.15) 0%, transparent 50%),\n radial-gradient(circle at 70% 70%, rgba(212, 175, 55, 0.15) 0%, transparent 50%);\n pointer-events: none;\n}\n\n.cta-content {\n position: relative;\n z-index: 2;\n text-align: center;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.cta-content h2 {\n font-size: clamp(32px, 5vw, 48px);\n color: white;\n margin-bottom: 20px;\n font-weight: 700;\n}\n\n.cta-content > p {\n font-size: 18px;\n color: rgba(255, 255, 255, 0.8);\n margin-bottom: 50px;\n}\n\n.contact-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 30px;\n margin-bottom: 60px;\n}\n\n.contact-card {\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n padding: 30px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n gap: 20px;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.contact-card:hover {\n background: rgba(255, 255, 255, 0.15);\n transform: translateY(-5px);\n border-color: var(--color-accent);\n}\n\n.contact-icon {\n font-size: 40px;\n flex-shrink: 0;\n}\n\n.contact-info {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: left;\n}\n\n.contact-label {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 5px;\n}\n\n.contact-value {\n font-size: 18px;\n color: white;\n font-weight: 600;\n}\n\n.opening-hours {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n padding: 40px;\n border-radius: 12px;\n max-width: 600px;\n margin: 0 auto;\n}\n\n.opening-hours h3 {\n font-size: 24px;\n margin-bottom: 30px;\n color: var(--color-accent);\n}\n\n.hours-grid {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.hours-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.hours-item:last-child {\n border-bottom: none;\n padding-bottom: 0;\n}\n\n.day {\n font-weight: 600;\n font-size: 16px;\n}\n\n.time {\n color: rgba(255, 255, 255, 0.8);\n font-size: 15px;\n}\n\n/* Footer */\n.footer {\n background: var(--color-bg-dark);\n color: rgba(255, 255, 255, 0.8);\n padding: 80px 0 30px;\n}\n\n.footer-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 50px;\n margin-bottom: 50px;\n}\n\n.footer-logo {\n font-size: 28px;\n font-weight: 700;\n color: var(--color-primary);\n margin-bottom: 20px;\n}\n\n.footer-col p {\n color: rgba(255, 255, 255, 0.6);\n margin-bottom: 25px;\n line-height: 1.7;\n}\n\n.social-links {\n display: flex;\n gap: 15px;\n}\n\n.social-link {\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n color: white;\n transition: var(--transition);\n font-size: 14px;\n}\n\n.social-link:hover {\n background: var(--color-primary);\n border-color: var(--color-primary);\n transform: translateY(-3px);\n}\n\n.footer-col h4 {\n color: white;\n font-size: 18px;\n margin-bottom: 20px;\n font-weight: 600;\n}\n\n.footer-links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.footer-links a {\n color: rgba(255, 255, 255, 0.6);\n text-decoration: none;\n transition: var(--transition);\n font-size: 15px;\n}\n\n.footer-links a:hover {\n color: var(--color-primary);\n padding-left: 5px;\n}\n\n.footer-links li {\n color: rgba(255, 255, 255, 0.6);\n font-size: 15px;\n}\n\n.footer-bottom {\n padding-top: 30px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n}\n\n.footer-bottom p {\n color: rgba(255, 255, 255, 0.5);\n font-size: 14px;\n}\n\n.footer-legal {\n display: flex;\n gap: 30px;\n}\n\n.footer-legal a {\n color: rgba(255, 255, 255, 0.5);\n text-decoration: none;\n font-size: 14px;\n transition: var(--transition);\n}\n\n.footer-legal a:hover {\n color: var(--color-primary);\n}\n\n/* Responsive Design */\n@media (max-width: 968px) {\n .nav-menu {\n position: fixed;\n top: 76px;\n left: -100%;\n width: 100%;\n height: calc(100vh - 76px);\n background: white;\n flex-direction: column;\n justify-content: flex-start;\n padding: 40px 0;\n transition: var(--transition);\n box-shadow: var(--shadow-lg);\n }\n \n .nav-menu.active {\n left: 0;\n }\n \n .mobile-toggle {\n display: flex;\n }\n \n .mobile-toggle.active span:nth-child(1) {\n transform: rotate(45deg) translate(7px, 7px);\n }\n \n .mobile-toggle.active span:nth-child(2) {\n opacity: 0;\n }\n \n .mobile-toggle.active span:nth-child(3) {\n transform: rotate(-45deg) translate(7px, -7px);\n }\n \n .about-grid {\n grid-template-columns: 1fr;\n gap: 50px;\n }\n \n .footer-grid {\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n }\n}\n\n@media (max-width: 768px) {\n section {\n padding: 60px 0;\n }\n \n .hero {\n margin-top: 76px;\n min-height: calc(100vh - 76px);\n }\n \n .services-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n \n .contact-cards {\n grid-template-columns: 1fr;\n }\n \n .footer-grid {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n \n .footer-bottom {\n flex-direction: column;\n text-align: center;\n }\n \n .footer-legal {\n flex-direction: column;\n gap: 15px;\n }\n}\n\n@media (max-width: 480px) {\n .hero-buttons {\n flex-direction: column;\n width: 100%;\n }\n \n .btn {\n width: 100%;\n text-align: center;\n }\n \n .container {\n padding: 0 16px;\n }\n \n .service-card,\n .opening-hours {\n padding: 30px 20px;\n }\n}", "assets/app.js": "// Mobile Menu Toggle\nconst mobileToggle = document.querySelector('.mobile-toggle');\nconst navMenu = document.querySelector('.nav-menu');\nconst body = document.body;\n\nif (mobileToggle && navMenu) {\n mobileToggle.addEventListener('click', () => {\n mobileToggle.classList.toggle('active');\n navMenu.classList.toggle('active');\n body.style.overflow = navMenu.classList.contains('active') ? 'hidden' : '';\n });\n\n // Close menu when clicking on a link\n const navLinks = document.querySelectorAll('.nav-menu a');\n navLinks.forEach(link => {\n link.addEventListener('click', () => {\n mobileToggle.classList.remove('active');\n navMenu.classList.remove('active');\n body.style.overflow = '';\n });\n });\n}\n\n// Navbar scroll effect\nconst navbar = document.querySelector('.navbar');\nlet lastScroll = 0;\n\nwindow.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n \n if (currentScroll > 100) {\n navbar.classList.add('scrolled');\n } else {\n navbar.classList.remove('scrolled');\n }\n \n lastScroll = currentScroll;\n});\n\n// Active nav link on scroll\nconst sections = document.querySelectorAll('section[id]');\nconst navItems = document.querySelectorAll('.nav-menu a');\n\nfunction highlightNavOnScroll() {\n const scrollY = window.pageYOffset;\n \n sections.forEach(section => {\n const sectionHeight = section.offsetHeight;\n const sectionTop = section.offsetTop - 100;\n const sectionId = section.getAttribute('id');\n \n if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {\n navItems.forEach(item => {\n item.classList.remove('active');\n if (item.getAttribute('href') === `#${sectionId}`) {\n item.classList.add('active');\n }\n });\n }\n });\n}\n\nwindow.addEventListener('scroll', highlightNavOnScroll);\n\n// Smooth scroll for anchor links\nconst anchorLinks = document.querySelectorAll('a[href^=\"#\"]');\n\nanchorLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n const href = link.getAttribute('href');\n \n // Skip if it's just \"#\"\n if (href === '#') {\n e.preventDefault();\n return;\n }\n \n const target = document.querySelector(href);\n \n if (target) {\n e.preventDefault();\n const offsetTop = target.offsetTop - 76; // Account for fixed navbar\n \n window.scrollTo({\n top: offsetTop,\n behavior: 'smooth'\n });\n }\n });\n});\n\n// Intersection Observer for fade-in animations\nconst observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n};\n\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n}, observerOptions);\n\n// Observe all service cards and about features\nconst animatedElements = document.querySelectorAll('.service-card, .about-feature, .contact-card');\n\nanimatedElements.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n observer.observe(el);\n});\n\n// Stagger animation for service cards\nconst serviceCards = document.querySelectorAll('.service-card');\nserviceCards.forEach((card, index) => {\n card.style.transitionDelay = `${index * 0.1}s`;\n});\n\n// Phone and email link tracking (optional analytics)\nconst contactLinks = document.querySelectorAll('a[href^=\"tel:\"], a[href^=\"mailto:\"]');\n\ncontactLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n const type = link.href.startsWith('tel:') ? 'phone' : 'email';\n const value = link.href.replace(/^(tel:|mailto:)/, '');\n \n // Log contact interaction (you can replace this with actual analytics)\n console.log(`Contact interaction: ${type} - ${value}`);\n \n // Example: Google Analytics event\n // if (typeof gtag !== 'undefined') {\n // gtag('event', 'contact', {\n // 'event_category': type,\n // 'event_label': value\n // });\n // }\n });\n});\n\n// Parallax effect for hero section\nconst hero = document.querySelector('.hero');\n\nif (hero) {\n window.addEventListener('scroll', () => {\n const scrolled = window.pageYOffset;\n const parallaxSpeed = 0.5;\n \n if (scrolled < window.innerHeight) {\n hero.style.transform = `translateY(${scrolled * parallaxSpeed}px)`;\n }\n });\n}\n\n// Add loading animation\nwindow.addEventListener('load', () => {\n document.body.classList.add('loaded');\n \n // Animate hero content on load\n const heroContent = document.querySelector('.hero-content');\n if (heroContent) {\n heroContent.style.opacity = '0';\n heroContent.style.transform = 'translateY(30px)';\n \n setTimeout(() => {\n heroContent.style.transition = 'opacity 0.8s ease, transform 0.8s ease';\n heroContent.style.opacity = '1';\n heroContent.style.transform