index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://kmetco.scroll.pub
+ metaTags
+ editButton /edit.html
+ title KMetco | Modern Web Solutions
+ style.css
+
+ header
+ class hero
+ nav
+ div KMetco
+ class logo
+ div
+ class nav-links
+ a Services
+ href #services
+ a Work
+ href #work
+ a About
+ href #about
+ a Contact
+ class cta-button
+ href #contact
+ div
+ class hero-content
+ h1 Crafting Digital Excellence
+ p We build beautiful, performant websites with cutting-edge technology
+ a Get Started
+ class primary-button
+ href #contact
+ main
+ section
+ id services
+ class services
+ h2 Our Services
+ div
+ class service-grid
+ div
+ class service-card
+ div 🖥️
+ class service-icon
+ h3 Web Development
+ p Custom websites built with modern standards and best practices.
+ div
+ class service-card
+ div 📱
+ class service-icon
+ h3 Mobile Optimization
+ p Flawless experiences on any device.
+ div
+ class service-card
+ div 🚀
+ class service-icon
+ h3 Performance
+ p Lightning fast load times and smooth interactions.
+ div
+ class service-card
+ div 🎨
+ class service-icon
+ h3 UI/UX Design
+ p Beautiful interfaces that delight users.
+ section
+ id work
+ class work
+ h2 Our Work
+ div
+ class work-gallery
+ div
+ class work-item
+ div
+ class work-image
+ style background-image:url('/placeholder-1.jpg')
+ h3 Elegant Solutions
+ p Modern design meets functionality
+ div
+ class work-item
+ div
+ class work-image
+ style background-image:url('/placeholder-2.jpg')
+ h3 Performance Focused
+ p Built for speed and reliability
+ div
+ class work-item
+ div
+ class work-image
+ style background-image:url('/placeholder-3.jpg')
+ h3 Innovative Approach
+ p Pushing boundaries with technology
+ section
+ id about
+ class about
+ h2 About Us
+ div
+ class about-content
+ p KMetco is a boutique web development studio focused on creating exceptional digital experiences. We combine technical expertise with creative vision to deliver solutions that stand out.
+ p Our team of passionate developers and designers work closely with clients to understand their needs and bring their ideas to life.
+ section
+ id contact
+ class contact
+ h2 Get In Touch
+ form
+ class contact-form
+ div
+ class form-group
+ label Name
+ input
+ type text
+ name name
+ required
+ div
+ class form-group
+ label Email
+ input
+ type email
+ name email
+ required
+ div
+ class form-group
+ label Message
+ textarea
+ name message
+ required
+ button
+ type submit
+ class submit-button
+ Send Message
+ footer
+ div
+ class footer-content
+ div KMetco
+ class footer-logo
+ div
+ class footer-links
+ a Services
+ href #services
+ a Work
+ href #work
+ a About
+ href #about
+ a Contact
+ href #contact
+ p Creating digital experiences that inspire
+
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "b6fe0904-d6d6-40cc-bb81-f77d63a85e49",
+ "object": "chat.completion",
+ "created": 1746076510,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "Here's my suggestion for the KMetco website:\n\n---domain---\nkmetco.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://kmetco.scroll.pub\nmetaTags\neditButton /edit.html\ntitle KMetco | Modern Web Solutions\nstyle.css\n\nheader\n class hero\n nav\n div KMetco\n class logo\n div\n class nav-links\n a Services\n href #services\n a Work\n href #work\n a About\n href #about\n a Contact\n class cta-button\n href #contact\n div\n class hero-content\n h1 Crafting Digital Excellence\n p We build beautiful, performant websites with cutting-edge technology\n a Get Started\n class primary-button\n href #contact\nmain\n section\n id services\n class services\n h2 Our Services\n div\n class service-grid\n div\n class service-card\n div 🖥️\n class service-icon\n h3 Web Development\n p Custom websites built with modern standards and best practices.\n div\n class service-card\n div 📱\n class service-icon\n h3 Mobile Optimization\n p Flawless experiences on any device.\n div\n class service-card\n div 🚀\n class service-icon\n h3 Performance\n p Lightning fast load times and smooth interactions.\n div\n class service-card\n div 🎨\n class service-icon\n h3 UI/UX Design\n p Beautiful interfaces that delight users.\n section\n id work\n class work\n h2 Our Work\n div\n class work-gallery\n div\n class work-item\n div\n class work-image\n style background-image:url('/placeholder-1.jpg')\n h3 Elegant Solutions\n p Modern design meets functionality\n div\n class work-item\n div\n class work-image\n style background-image:url('/placeholder-2.jpg')\n h3 Performance Focused\n p Built for speed and reliability\n div\n class work-item\n div\n class work-image\n style background-image:url('/placeholder-3.jpg')\n h3 Innovative Approach\n p Pushing boundaries with technology\n section\n id about\n class about\n h2 About Us\n div\n class about-content\n p KMetco is a boutique web development studio focused on creating exceptional digital experiences. We combine technical expertise with creative vision to deliver solutions that stand out.\n p Our team of passionate developers and designers work closely with clients to understand their needs and bring their ideas to life.\n section\n id contact\n class contact\n h2 Get In Touch\n form\n class contact-form\n div\n class form-group\n label Name\n input\n type text\n name name\n required\n div\n class form-group\n label Email\n input\n type email\n name email\n required\n div\n class form-group\n label Message\n textarea\n name message\n required\n button\n type submit\n class submit-button\n Send Message\nfooter\n div\n class footer-content\n div KMetco\n class footer-logo\n div\n class footer-links\n a Services\n href #services\n a Work\n href #work\n a About\n href #about\n a Contact\n href #contact\n p Creating digital experiences that inspire\n\nscript.js\n---style.css---\n:root {\n --primary: #4a6bff;\n --primary-dark: #3a56cc;\n --secondary: #ff6b6b;\n --dark: #2d3748;\n --light: #f7fafc;\n --gray: #e2e8f0;\n --dark-gray: #718096;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--dark);\n background-color: var(--light);\n}\n\nheader.hero {\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n color: white;\n padding: 2rem 1rem;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n transition: opacity 0.3s;\n}\n\n.nav-links a:hover {\n opacity: 0.8;\n}\n\n.hero-content {\n max-width: 1200px;\n margin: auto;\n text-align: center;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 2rem 1rem;\n}\n\n.hero-content h1 {\n font-size: 3.5rem;\n margin-bottom: 1.5rem;\n line-height: 1.2;\n}\n\n.hero-content p {\n font-size: 1.2rem;\n max-width: 700px;\n margin: 0 auto 2rem;\n}\n\n.primary-button, .cta-button {\n display: inline-block;\n padding: 0.8rem 2rem;\n border-radius: 50px;\n font-weight: 600;\n text-decoration: none;\n transition: all 0.3s;\n}\n\n.primary-button {\n background: white;\n color: var(--primary);\n align-self: center;\n}\n\n.primary-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n}\n\n.cta-button {\n background: var(--secondary);\n color: white;\n}\n\n.cta-button:hover {\n background: #e05555;\n}\n\nsection {\n padding: 5rem 1rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n font-size: 2.5rem;\n margin-bottom: 3rem;\n text-align: center;\n position: relative;\n}\n\nh2::after {\n content: '';\n display: block;\n width: 80px;\n height: 4px;\n background: var(--primary);\n margin: 1rem auto 0;\n}\n\n.service-grid, .work-gallery {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.service-card, .work-item {\n background: white;\n border-radius: 10px;\n padding: 2rem;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.service-card:hover, .work-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\n.service-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.work-image {\n height: 200px;\n background-size: cover;\n background-position: center;\n border-radius: 8px;\n margin-bottom: 1rem;\n}\n\n.about-content {\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto;\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\n.form-group input, .form-group textarea {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid var(--gray);\n border-radius: 5px;\n font-family: inherit;\n}\n\n.form-group textarea {\n min-height: 150px;\n}\n\n.submit-button {\n background: var(--primary);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 50px;\n font-weight: 600;\n cursor: pointer;\n transition: background 0.3s;\n width: 100%;\n}\n\n.submit-button:hover {\n background: var(--primary-dark);\n}\n\nfooter {\n background: var(--dark);\n color: white;\n padding: 3rem 1rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2rem;\n}\n\n.footer-logo {\n font-size: 1.8rem;\n font-weight: 700;\n}\n\n.footer-links {\n display: flex;\n gap: 2rem;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n transition: opacity 0.3s;\n}\n\n.footer-links a:hover {\n opacity: 0.8;\n}\n\n@media (max-width: 768px) {\n .hero-content h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n gap: 1rem;\n }\n \n section {\n padding: 3rem 1rem;\n }\n \n .service-grid, .work-gallery {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 480px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n .hero-content h1 {\n font-size: 2rem;\n }\n \n .hero-content p {\n font-size: 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n \n const targetId = this.getAttribute('href');\n if (targetId === '#') return;\n \n const targetElement = document.querySelector(targetId);\n if (targetElement) {\n window.scrollTo({\n top: targetElement.offsetTop - 80,\n behavior: 'smooth'\n });\n \n // Update URL without page jump\n if (history.pushState) {\n history.pushState(null, null, targetId);\n } else {\n location.hash = targetId;\n }\n }\n });\n });\n \n // Add scroll animation class to sections\n const sections = document.querySelectorAll('section');\n \n function checkScroll() {\n sections.forEach(section => {\n const sectionTop = section.getBoundingClientRect().top;\n const windowHeight = window.innerHeight;\n \n if (sectionTop < windowHeight * 0.75) {\n section.classList.add('animate');\n }\n });\n }\n \n // Initial check\n checkScroll();\n \n // Check on scroll\n window.addEventListener('scroll', checkScroll);\n \n // Form submission\n const contactForm = document.querySelector('.contact-form');\n if (contactForm) {\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n \n // Simple form validation\n const name = this.elements.name.value.trim();\n const email = this.elements.email.value.trim();\n const message = this.elements.message.value.trim();\n \n if (!name || !email || !message) {\n alert('Please fill in all fields');\n return;\n }\n \n // In a real implementation, you would send this data to a server\n console.log('Form submitted:', { name, email, message });\n \n // Show success message\n alert('Thank you for your message! We will get back to you soon.');\n this.reset();\n });\n }\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 719,
+ "completion_tokens": 2791,
+ "total_tokens": 3510,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 719
+ },
+ "system_fingerprint": "fp_8802369eaa_prod0425fp8"
+ }
readme.scroll
Changed around line 1
+ # kmetco.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ KMetco
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "KMetco "
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ // Smooth scrolling for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ e.preventDefault();
+
+ const targetId = this.getAttribute('href');
+ if (targetId === '#') return;
+
+ const targetElement = document.querySelector(targetId);
+ if (targetElement) {
+ window.scrollTo({
+ top: targetElement.offsetTop - 80,
+ behavior: 'smooth'
+ });
+
+ // Update URL without page jump
+ if (history.pushState) {
+ history.pushState(null, null, targetId);
+ } else {
+ location.hash = targetId;
+ }
+ }
+ });
+ });
+
+ // Add scroll animation class to sections
+ const sections = document.querySelectorAll('section');
+
+ function checkScroll() {
+ sections.forEach(section => {
+ const sectionTop = section.getBoundingClientRect().top;
+ const windowHeight = window.innerHeight;
+
+ if (sectionTop < windowHeight * 0.75) {
+ section.classList.add('animate');
+ }
+ });
+ }
+
+ // Initial check
+ checkScroll();
+
+ // Check on scroll
+ window.addEventListener('scroll', checkScroll);
+
+ // Form submission
+ const contactForm = document.querySelector('.contact-form');
+ if (contactForm) {
+ contactForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ // Simple form validation
+ const name = this.elements.name.value.trim();
+ const email = this.elements.email.value.trim();
+ const message = this.elements.message.value.trim();
+
+ if (!name || !email || !message) {
+ alert('Please fill in all fields');
+ return;
+ }
+
+ // In a real implementation, you would send this data to a server
+ console.log('Form submitted:', { name, email, message });
+
+ // Show success message
+ alert('Thank you for your message! We will get back to you soon.');
+ this.reset();
+ });
+ }
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #4a6bff;
+ --primary-dark: #3a56cc;
+ --secondary: #ff6b6b;
+ --dark: #2d3748;
+ --light: #f7fafc;
+ --gray: #e2e8f0;
+ --dark-gray: #718096;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ background-color: var(--light);
+ }
+
+ header.hero {
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+ color: white;
+ padding: 2rem 1rem;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ .logo {
+ font-size: 1.8rem;
+ font-weight: 700;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ font-weight: 500;
+ transition: opacity 0.3s;
+ }
+
+ .nav-links a:hover {
+ opacity: 0.8;
+ }
+
+ .hero-content {
+ max-width: 1200px;
+ margin: auto;
+ text-align: center;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 2rem 1rem;
+ }
+
+ .hero-content h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1.5rem;
+ line-height: 1.2;
+ }
+
+ .hero-content p {
+ font-size: 1.2rem;
+ max-width: 700px;
+ margin: 0 auto 2rem;
+ }
+
+ .primary-button, .cta-button {
+ display: inline-block;
+ padding: 0.8rem 2rem;
+ border-radius: 50px;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.3s;
+ }
+
+ .primary-button {
+ background: white;
+ color: var(--primary);
+ align-self: center;
+ }
+
+ .primary-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+ }
+
+ .cta-button {
+ background: var(--secondary);
+ color: white;
+ }
+
+ .cta-button:hover {
+ background: #e05555;
+ }
+
+ section {
+ padding: 5rem 1rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ h2 {
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+ text-align: center;
+ position: relative;
+ }
+
+ h2::after {
+ content: '';
+ display: block;
+ width: 80px;
+ height: 4px;
+ background: var(--primary);
+ margin: 1rem auto 0;
+ }
+
+ .service-grid, .work-gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .service-card, .work-item {
+ background: white;
+ border-radius: 10px;
+ padding: 2rem;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ transition: transform 0.3s, box-shadow 0.3s;
+ }
+
+ .service-card:hover, .work-item:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+ }
+
+ .service-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .work-image {
+ height: 200px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ }
+
+ .about-content {
+ max-width: 800px;
+ margin: 0 auto;
+ text-align: center;
+ }
+
+ .contact-form {
+ max-width: 600px;
+ margin: 0 auto;
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ }
+
+ .form-group {
+ margin-bottom: 1.5rem;
+ }
+
+ .form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+ }
+
+ .form-group input, .form-group textarea {
+ width: 100%;
+ padding: 0.8rem;
+ border: 1px solid var(--gray);
+ border-radius: 5px;
+ font-family: inherit;
+ }
+
+ .form-group textarea {
+ min-height: 150px;
+ }
+
+ .submit-button {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 50px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.3s;
+ width: 100%;
+ }
+
+ .submit-button:hover {
+ background: var(--primary-dark);
+ }
+
+ footer {
+ background: var(--dark);
+ color: white;
+ padding: 3rem 1rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+ }
+
+ .footer-logo {
+ font-size: 1.8rem;
+ font-weight: 700;
+ }
+
+ .footer-links {
+ display: flex;
+ gap: 2rem;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .footer-links a {
+ color: white;
+ text-decoration: none;
+ transition: opacity 0.3s;
+ }
+
+ .footer-links a:hover {
+ opacity: 0.8;
+ }
+
+ @media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ gap: 1rem;
+ }
+
+ section {
+ padding: 3rem 1rem;
+ }
+
+ .service-grid, .work-gallery {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ @media (max-width: 480px) {
+ nav {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .hero-content p {
+ font-size: 1rem;
+ }
+ }