index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://chatwave.scroll.pub
+ metaTags
+ editButton /edit.html
+ title ChatWave | Modern Web Chat
+ style.css
+ header
+ class hero
+ nav
+ div ChatWave
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a How It Works
+ href #how-it-works
+ a Pricing
+ href #pricing
+ a Sign Up
+ class cta-button
+ href #signup
+ div
+ class hero-content
+ h1 Real-time Chat for the Modern Web
+ p Beautiful, lightning-fast messaging with end-to-end encryption
+ div
+ class hero-buttons
+ a Try Demo
+ class primary-button
+ href #demo
+ a Learn More
+ class secondary-button
+ href #features
+ main
+ section
+ id features
+ class features
+ h2 Why Choose ChatWave?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div 🔒
+ class feature-icon
+ h3 End-to-End Encryption
+ p Your conversations stay private with military-grade encryption.
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Lightning Fast
+ p Real-time messaging with WebSocket technology.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Custom Themes
+ p Personalize your chat experience with beautiful themes.
+ div
+ class feature-card
+ div 📱
+ class feature-icon
+ h3 Cross-Platform
+ p Works seamlessly on all your devices.
+ section
+ id how-it-works
+ class demo-section
+ h2 See It In Action
+ div
+ class chat-demo
+ div
+ class chat-header
+ div
+ class chat-avatar
+ div
+ class chat-info
+ h3 Support Team
+ p Online now
+ div
+ class chat-messages
+ div
+ class message received
+ p Hi there! How can we help you today?
+ div
+ class message sent
+ p I'm interested in learning more about ChatWave.
+ div
+ class message received
+ p Great! We'd love to show you around. What would you like to know first?
+ div
+ class chat-input
+ input
+ type text
+ placeholder Type your message...
+ button
+ class send-button
+ span →
+ section
+ id pricing
+ class pricing
+ h2 Simple, Transparent Pricing
+ div
+ class pricing-grid
+ div
+ class pricing-card
+ h3 Free
+ div
+ class price
+ span $0
+ span /month
+ ul
+ li Up to 5 users
+ li Basic features
+ li 1GB storage
+ a Get Started
+ class pricing-button
+ href #signup
+ div
+ class pricing-card featured
+ div
+ class featured-badge
+ span Most Popular
+ h3 Pro
+ div
+ class price
+ span $9
+ span /month
+ ul
+ li Up to 50 users
+ li All premium features
+ li 10GB storage
+ a Get Started
+ class pricing-button primary
+ href #signup
+ div
+ class pricing-card
+ h3 Enterprise
+ div
+ class price
+ span $29
+ span /month
+ ul
+ li Unlimited users
+ li Advanced admin tools
+ li 100GB storage
+ a Contact Us
+ class pricing-button
+ href #contact
+ footer
+ div
+ class footer-content
+ div
+ class footer-logo
+ h3 ChatWave
+ p Modern web chat for everyone
+ div
+ class footer-links
+ h4 Product
+ a Features
+ href #features
+ a Pricing
+ href #pricing
+ a Demo
+ href #demo
+ div
+ class footer-links
+ h4 Company
+ a About
+ href about.html
+ a Careers
+ href careers.html
+ a Blog
+ href blog.html
+ div
+ class footer-links
+ h4 Legal
+ a Privacy
+ href privacy.html
+ a Terms
+ href terms.html
+ a Security
+ href security.html
+ div
+ class copyright
+ p Made with ❤️ for the web
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "d9b2f2d1-bed4-4ae8-8939-48705baacebe",
+ "object": "chat.completion",
+ "created": 1749373096,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "I'll create a modern, responsive chat application website called \"ChatWave\" with a clean design and advanced CSS.\n\n---domain---\nchatwave.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://chatwave.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ChatWave | Modern Web Chat\nstyle.css\nheader\n class hero\n nav\n div ChatWave\n class logo\n div\n class nav-links\n a Features\n href #features\n a How It Works\n href #how-it-works\n a Pricing\n href #pricing\n a Sign Up\n class cta-button\n href #signup\n div\n class hero-content\n h1 Real-time Chat for the Modern Web\n p Beautiful, lightning-fast messaging with end-to-end encryption\n div\n class hero-buttons\n a Try Demo\n class primary-button\n href #demo\n a Learn More\n class secondary-button\n href #features\nmain\n section\n id features\n class features\n h2 Why Choose ChatWave?\n div\n class feature-grid\n div\n class feature-card\n div 🔒\n class feature-icon\n h3 End-to-End Encryption\n p Your conversations stay private with military-grade encryption.\n div\n class feature-card\n div ⚡\n class feature-icon\n h3 Lightning Fast\n p Real-time messaging with WebSocket technology.\n div\n class feature-card\n div 🎨\n class feature-icon\n h3 Custom Themes\n p Personalize your chat experience with beautiful themes.\n div\n class feature-card\n div 📱\n class feature-icon\n h3 Cross-Platform\n p Works seamlessly on all your devices.\n section\n id how-it-works\n class demo-section\n h2 See It In Action\n div\n class chat-demo\n div\n class chat-header\n div\n class chat-avatar\n div\n class chat-info\n h3 Support Team\n p Online now\n div\n class chat-messages\n div\n class message received\n p Hi there! How can we help you today?\n div\n class message sent\n p I'm interested in learning more about ChatWave.\n div\n class message received\n p Great! We'd love to show you around. What would you like to know first?\n div\n class chat-input\n input\n type text\n placeholder Type your message...\n button\n class send-button\n span →\n section\n id pricing\n class pricing\n h2 Simple, Transparent Pricing\n div\n class pricing-grid\n div\n class pricing-card\n h3 Free\n div\n class price\n span $0\n span /month\n ul\n li Up to 5 users\n li Basic features\n li 1GB storage\n a Get Started\n class pricing-button\n href #signup\n div\n class pricing-card featured\n div\n class featured-badge\n span Most Popular\n h3 Pro\n div\n class price\n span $9\n span /month\n ul\n li Up to 50 users\n li All premium features\n li 10GB storage\n a Get Started\n class pricing-button primary\n href #signup\n div\n class pricing-card\n h3 Enterprise\n div\n class price\n span $29\n span /month\n ul\n li Unlimited users\n li Advanced admin tools\n li 100GB storage\n a Contact Us\n class pricing-button\n href #contact\nfooter\n div\n class footer-content\n div\n class footer-logo\n h3 ChatWave\n p Modern web chat for everyone\n div\n class footer-links\n h4 Product\n a Features\n href #features\n a Pricing\n href #pricing\n a Demo\n href #demo\n div\n class footer-links\n h4 Company\n a About\n href about.html\n a Careers\n href careers.html\n a Blog\n href blog.html\n div\n class footer-links\n h4 Legal\n a Privacy\n href privacy.html\n a Terms\n href terms.html\n a Security\n href security.html\n div\n class copyright\n p Made with ❤️ for the web\nscript.js\n---style.css---\n:root {\n --primary: #4361ee;\n --primary-dark: #3a56d4;\n --secondary: #3f37c9;\n --accent: #4895ef;\n --light: #f8f9fa;\n --dark: #212529;\n --success: #4cc9f0;\n --warning: #f72585;\n --gray: #6c757d;\n --light-gray: #e9ecef;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--dark);\n background-color: #fff;\n overflow-x: hidden;\n}\n\nheader.hero {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n padding: 2rem 0;\n position: relative;\n overflow: hidden;\n}\n\nheader.hero::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%, rgba(255,255,255,0) 70%);\n animation: pulse 15s infinite linear;\n}\n\n@keyframes pulse {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n color: white;\n text-decoration: none;\n}\n\n.nav-links {\n display: flex;\n gap: 1.5rem;\n align-items: center;\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.cta-button {\n background: white;\n color: var(--primary);\n padding: 0.5rem 1.2rem;\n border-radius: 50px;\n font-weight: 600;\n transition: all 0.3s;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.hero-content {\n max-width: 1200px;\n margin: 4rem auto;\n padding: 0 2rem;\n text-align: center;\n position: relative;\n z-index: 1;\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 2.5rem;\n opacity: 0.9;\n}\n\n.hero-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\n.primary-button, .secondary-button {\n padding: 0.8rem 1.8rem;\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}\n\n.primary-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.secondary-button {\n border: 2px solid white;\n color: white;\n}\n\n.secondary-button:hover {\n background: rgba(255,255,255,0.1);\n}\n\nsection {\n padding: 5rem 2rem;\n}\n\n.features {\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.features h2, .demo-section h2, .pricing h2 {\n text-align: center;\n font-size: 2.5rem;\n margin-bottom: 3rem;\n color: var(--dark);\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.feature-card {\n background: white;\n border-radius: 12px;\n padding: 2rem;\n text-align: center;\n transition: transform 0.3s, box-shadow 0.3s;\n border: 1px solid var(--light-gray);\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\n}\n\n.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n}\n\n.feature-card h3 {\n font-size: 1.3rem;\n margin-bottom: 1rem;\n color: var(--dark);\n}\n\n.feature-card p {\n color: var(--gray);\n}\n\n.demo-section {\n background: var(--light);\n}\n\n.chat-demo {\n max-width: 500px;\n margin: 0 auto;\n background: white;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\n.chat-header {\n display: flex;\n align-items: center;\n padding: 1rem;\n background: var(--primary);\n color: white;\n}\n\n.chat-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: white;\n margin-right: 1rem;\n}\n\n.chat-info h3 {\n font-size: 1rem;\n margin-bottom: 0.2rem;\n}\n\n.chat-info p {\n font-size: 0.8rem;\n opacity: 0.8;\n}\n\n.chat-messages {\n padding: 1.5rem;\n height: 300px;\n overflow-y: auto;\n background: #f9f9f9;\n}\n\n.message {\n max-width: 70%;\n padding: 0.8rem 1rem;\n border-radius: 12px;\n margin-bottom: 1rem;\n position: relative;\n}\n\n.message.received {\n background: white;\n border-top-left-radius: 0;\n margin-right: auto;\n box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n}\n\n.message.sent {\n background: var(--primary);\n color: white;\n border-top-right-radius: 0;\n margin-left: auto;\n}\n\n.chat-input {\n display: flex;\n padding: 1rem;\n background: white;\n border-top: 1px solid var(--light-gray);\n}\n\n.chat-input input {\n flex: 1;\n padding: 0.8rem 1rem;\n border: 1px solid var(--light-gray);\n border-radius: 50px;\n outline: none;\n font-size: 1rem;\n}\n\n.send-button {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--primary);\n color: white;\n border: none;\n margin-left: 0.5rem;\n cursor: pointer;\n transition: background 0.3s;\n}\n\n.send-button:hover {\n background: var(--primary-dark);\n}\n\n.pricing {\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.pricing-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.pricing-card {\n background: white;\n border-radius: 12px;\n padding: 2rem;\n text-align: center;\n transition: transform 0.3s, box-shadow 0.3s;\n border: 1px solid var(--light-gray);\n position: relative;\n}\n\n.pricing-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\n}\n\n.pricing-card.featured {\n border: 2px solid var(--primary);\n}\n\n.featured-badge {\n position: absolute;\n top: -12px;\n right: 20px;\n background: var(--primary);\n color: white;\n padding: 0.3rem 1rem;\n border-radius: 50px;\n font-size: 0.8rem;\n font-weight: 600;\n}\n\n.pricing-card h3 {\n font-size: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.price {\n margin-bottom: 1.5rem;\n}\n\n.price span:first-child {\n font-size: 2.5rem;\n font-weight: 700;\n color: var(--dark);\n}\n\n.price span:last-child {\n color: var(--gray);\n font-size: 1rem;\n}\n\n.pricing-card ul {\n list-style: none;\n margin-bottom: 2rem;\n}\n\n.pricing-card ul li {\n padding: 0.5rem 0;\n color: var(--gray);\n}\n\n.pricing-button {\n display: inline-block;\n padding: 0.8rem 1.8rem;\n border-radius: 50px;\n font-weight: 600;\n text-decoration: none;\n transition: all 0.3s;\n background: var(--light);\n color: var(--dark);\n border: 1px solid var(--light-gray);\n}\n\n.pricing-button.primary {\n background: var(--primary);\n color: white;\n}\n\n.pricing-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\nfooter {\n background: var(--dark);\n color: white;\n padding: 4rem 2rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n.footer-logo h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n}\n\n.footer-logo p {\n opacity: 0.7;\n}\n\n.footer-links h4 {\n font-size: 1.1rem;\n margin-bottom: 1.5rem;\n}\n\n.footer-links a {\n display: block;\n color: white;\n opacity: 0.7;\n text-decoration: none;\n margin-bottom: 0.8rem;\n transition: opacity 0.3s;\n}\n\n.footer-links a:hover {\n opacity: 1;\n}\n\n.copyright {\n max-width: 1200px;\n margin: 3rem auto 0;\n padding-top: 2rem;\n border-top: 1px solid rgba(255,255,255,0.1);\n text-align: center;\n opacity: 0.7;\n}\n\n@media (max-width: 768px) {\n .hero-content h1 {\n font-size: 2.5rem;\n }\n \n .hero-buttons {\n flex-direction: column;\n align-items: center;\n }\n \n .nav-links {\n display: none;\n }\n \n .feature-grid, .pricing-grid {\n grid-template-columns: 1fr;\n }\n \n .message {\n max-width: 85%;\n }\n}\n\n@media (max-width: 480px) {\n .hero-content h1 {\n font-size: 2rem;\n }\n \n .hero-content p {\n font-size: 1rem;\n }\n \n section {\n padding: 3rem 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 });\n });\n\n // Chat demo animation\n const chatDemo = document.querySelector('.chat-demo');\n if (chatDemo) {\n const messages = [\n { text: \"Hi there! How can we help you today?\", type: \"received\" },\n { text: \"I'm interested in learning more about ChatWave.\", type: \"sent\" },\n { text: \"Great! We'd love to show you around. What would you like to know first?\", type: \"received\" }\n ];\n \n const messagesContainer = chatDemo.querySelector('.chat-messages');\n messagesContainer.innerHTML = '';\n \n messages.forEach((message, index) => {\n setTimeout(() => {\n const messageElement = document.createElement('div');\n messageElement.className = `message ${message.type}`;\n messageElement.innerHTML = `
${message.text}
`;\n messagesContainer.appendChild(messageElement);\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n }, index * 1000);\n });\n }\n\n // Scroll animation for feature cards\n const featureCards = document.querySelectorAll('.feature-card');\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n"+ },
+ "logprobs": null,
+ "finish_reason": "length"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 718,
+ "completion_tokens": 4096,
+ "total_tokens": 4814,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 718
+ },
+ "system_fingerprint": "fp_8802369eaa_prod0425fp8"
+ }
readme.scroll
Changed around line 1
+ # chatwave.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ chatwave
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "chatwave"
+
+ 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---
style.css
Changed around line 1
+ :root {
+ --primary: #4361ee;
+ --primary-dark: #3a56d4;
+ --secondary: #3f37c9;
+ --accent: #4895ef;
+ --light: #f8f9fa;
+ --dark: #212529;
+ --success: #4cc9f0;
+ --warning: #f72585;
+ --gray: #6c757d;
+ --light-gray: #e9ecef;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ background-color: #fff;
+ overflow-x: hidden;
+ }
+
+ header.hero {
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+ padding: 2rem 0;
+ position: relative;
+ overflow: hidden;
+ }
+
+ header.hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+ animation: pulse 15s infinite linear;
+ }
+
+ @keyframes pulse {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ }
+
+ .logo {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: white;
+ text-decoration: none;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ font-weight: 500;
+ transition: opacity 0.3s;
+ }
+
+ .nav-links a:hover {
+ opacity: 0.8;
+ }
+
+ .cta-button {
+ background: white;
+ color: var(--primary);
+ padding: 0.5rem 1.2rem;
+ border-radius: 50px;
+ font-weight: 600;
+ transition: all 0.3s;
+ }
+
+ .cta-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ }
+
+ .hero-content {
+ max-width: 1200px;
+ margin: 4rem auto;
+ padding: 0 2rem;
+ text-align: center;
+ position: relative;
+ z-index: 1;
+ }
+
+ .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 2.5rem;
+ opacity: 0.9;
+ }
+
+ .hero-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ }
+
+ .primary-button, .secondary-button {
+ padding: 0.8rem 1.8rem;
+ border-radius: 50px;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.3s;
+ }
+
+ .primary-button {
+ background: white;
+ color: var(--primary);
+ }
+
+ .primary-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ }
+
+ .secondary-button {
+ border: 2px solid white;
+ color: white;
+ }
+
+ .secondary-button:hover {
+ background: rgba(255,255,255,0.1);
+ }
+
+ section {
+ padding: 5rem 2rem;
+ }
+
+ .features {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .features h2, .demo-section h2, .pricing h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+ color: var(--dark);
+ }
+
+ .feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ }
+
+ .feature-card {
+ background: white;
+ border-radius: 12px;
+ padding: 2rem;
+ text-align: center;
+ transition: transform 0.3s, box-shadow 0.3s;
+ border: 1px solid var(--light-gray);
+ }
+
+ .feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+ }
+
+ .feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .feature-card h3 {
+ font-size: 1.3rem;
+ margin-bottom: 1rem;
+ color: var(--dark);
+ }
+
+ .feature-card p {
+ color: var(--gray);
+ }
+
+ .demo-section {
+ background: var(--light);
+ }
+
+ .chat-demo {
+ max-width: 500px;
+ margin: 0 auto;
+ background: white;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ }
+
+ .chat-header {
+ display: flex;
+ align-items: center;
+ padding: 1rem;
+ background: var(--primary);
+ color: white;
+ }
+
+ .chat-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: white;
+ margin-right: 1rem;
+ }
+
+ .chat-info h3 {
+ font-size: 1rem;
+ margin-bottom: 0.2rem;
+ }
+
+ .chat-info p {
+ font-size: 0.8rem;
+ opacity: 0.8;
+ }
+
+ .chat-messages {
+ padding: 1.5rem;
+ height: 300px;
+ overflow-y: auto;
+ background: #f9f9f9;
+ }
+
+ .message {
+ max-width: 70%;
+ padding: 0.8rem 1rem;
+ border-radius: 12px;
+ margin-bottom: 1rem;
+ position: relative;
+ }
+
+ .message.received {
+ background: white;
+ border-top-left-radius: 0;
+ margin-right: auto;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+ }
+
+ .message.sent {
+ background: var(--primary);
+ color: white;
+ border-top-right-radius: 0;
+ margin-left: auto;
+ }
+
+ .chat-input {
+ display: flex;
+ padding: 1rem;
+ background: white;
+ border-top: 1px solid var(--light-gray);
+ }
+
+ .chat-input input {
+ flex: 1;
+ padding: 0.8rem 1rem;
+ border: 1px solid var(--light-gray);
+ border-radius: 50px;
+ outline: none;
+ font-size: 1rem;
+ }
+
+ .send-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: var(--primary);
+ color: white;
+ border: none;
+ margin-left: 0.5rem;
+ cursor: pointer;
+ transition: background 0.3s;
+ }
+
+ .send-button:hover {
+ background: var(--primary-dark);
+ }
+
+ .pricing {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .pricing-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ }
+
+ .pricing-card {
+ background: white;
+ border-radius: 12px;
+ padding: 2rem;
+ text-align: center;
+ transition: transform 0.3s, box-shadow 0.3s;
+ border: 1px solid var(--light-gray);
+ position: relative;
+ }
+
+ .pricing-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+ }
+
+ .pricing-card.featured {
+ border: 2px solid var(--primary);
+ }
+
+ .featured-badge {
+ position: absolute;
+ top: -12px;
+ right: 20px;
+ background: var(--primary);
+ color: white;
+ padding: 0.3rem 1rem;
+ border-radius: 50px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ }
+
+ .pricing-card h3 {
+ font-size: 1.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .price {
+ margin-bottom: 1.5rem;
+ }
+
+ .price span:first-child {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: var(--dark);
+ }
+
+ .price span:last-child {
+ color: var(--gray);
+ font-size: 1rem;
+ }
+
+ .pricing-card ul {
+ list-style: none;
+ margin-bottom: 2rem;
+ }
+
+ .pricing-card ul li {
+ padding: 0.5rem 0;
+ color: var(--gray);
+ }
+
+ .pricing-button {
+ display: inline-block;
+ padding: 0.8rem 1.8rem;
+ border-radius: 50px;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.3s;
+ background: var(--light);
+ color: var(--dark);
+ border: 1px solid var(--light-gray);
+ }
+
+ .pricing-button.primary {
+ background: var(--primary);
+ color: white;
+ }
+
+ .pricing-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ }
+
+ footer {
+ background: var(--dark);
+ color: white;
+ padding: 4rem 2rem 2rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ }
+
+ .footer-logo h3 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .footer-logo p {
+ opacity: 0.7;
+ }
+
+ .footer-links h4 {
+ font-size: 1.1rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .footer-links a {
+ display: block;
+ color: white;
+ opacity: 0.7;
+ text-decoration: none;
+ margin-bottom: 0.8rem;
+ transition: opacity 0.3s;
+ }
+
+ .footer-links a:hover {
+ opacity: 1;
+ }
+
+ .copyright {
+ max-width: 1200px;
+ margin: 3rem auto 0;
+ padding-top: 2rem;
+ border-top: 1px solid rgba(255,255,255,0.1);
+ text-align: center;
+ opacity: 0.7;
+ }
+
+ @media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .feature-grid, .pricing-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .message {
+ max-width: 85%;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .hero-content p {
+ font-size: 1rem;
+ }
+
+ section {
+ padding: 3rem 1rem;
+ }
+ }