index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://y2kscroll.pub
+ metaTags
+ editButton /edit.html
+ title Y2K Scroll Portal
+ style.css
+ header
+ class hero
+ nav
+ div Y2K
+ class logo
+ div
+ class nav-links
+ a Explore
+ href #explore
+ a Tech
+ href #tech
+ a Matrix
+ href #matrix
+ a Enter
+ class cta-button
+ href #main
+ div
+ class hero-content
+ h1 Welcome to the Digital Frontier
+ p Experience the future as imagined in 2000
+ a Begin Journey
+ class primary-button
+ href #main
+ main
+ section
+ id explore
+ class features
+ h2 Digital Exploration
+ div
+ class feature-grid
+ div
+ class feature-card
+ div
+ class feature-icon
+ svg
+ circle cx 50 cy 50 r 40 fill none stroke #0ff stroke-width 3
+ path d M20,50 Q50,20 80,50 T140,50 fill none stroke #f0f stroke-width 2
+ h3 Cyber Waves
+ p Surf through digital dimensions with our quantum interface.
+ div
+ class feature-card
+ div
+ class feature-icon
+ svg
+ rect x 20 y 20 width 60 height 60 fill none stroke #ff0 stroke-width 3
+ line x1 20 y1 20 x2 80 y2 80 stroke #0f0 stroke-width 2
+ line x1 80 y1 20 x2 20 y2 80 stroke #0f0 stroke-width 2
+ h3 Data Cubes
+ p Encrypted information storage in 4D hypercubes.
+ div
+ class feature-card
+ div
+ class feature-icon
+ svg
+ polygon points 50,5 90,90 10,90 fill none stroke #f80 stroke-width 3
+ circle cx 50 cy 50 r 20 fill none stroke #08f stroke-width 2
+ h3 Quantum Nodes
+ p Instantaneous communication across the metaverse.
+ div
+ class feature-card
+ div
+ class feature-icon
+ svg
+ path d M10,50 Q50,10 90,50 T170,50 fill none stroke #f08 stroke-width 3
+ circle cx 50 cy 50 r 8 fill #0ff
+ circle cx 90 cy 50 r 8 fill #f0f
+ h3 Neural Links
+ p Direct brain-to-web connectivity.
+ section
+ id tech
+ class tech-demo
+ h2 Future Tech Showcase
+ div
+ class tech-container
+ div
+ class matrix-grid
+ div
+ class circuit-animation
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a About
+ href #about
+ a Contact
+ href #contact
+ a Privacy
+ href #privacy
+ p A portal to the digital future, built with pure web tech.
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "7c694a17-8928-4886-aff6-0dad11df9921",
+ "object": "chat.completion",
+ "created": 1749841012,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "I'll create a Y2K-themed website with futuristic vector animations. Here's my suggestion:\n\n---domain---\ny2kscroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://y2kscroll.pub\nmetaTags\neditButton /edit.html\ntitle Y2K Scroll Portal\nstyle.css\nheader\n class hero\n nav\n div Y2K\n class logo\n div\n class nav-links\n a Explore\n href #explore\n a Tech\n href #tech\n a Matrix\n href #matrix\n a Enter\n class cta-button\n href #main\n div\n class hero-content\n h1 Welcome to the Digital Frontier\n p Experience the future as imagined in 2000\n a Begin Journey\n class primary-button\n href #main\nmain\n section\n id explore\n class features\n h2 Digital Exploration\n div\n class feature-grid\n div\n class feature-card\n div\n class feature-icon\n svg\n circle cx 50 cy 50 r 40 fill none stroke #0ff stroke-width 3\n path d M20,50 Q50,20 80,50 T140,50 fill none stroke #f0f stroke-width 2\n h3 Cyber Waves\n p Surf through digital dimensions with our quantum interface.\n div\n class feature-card\n div\n class feature-icon\n svg\n rect x 20 y 20 width 60 height 60 fill none stroke #ff0 stroke-width 3\n line x1 20 y1 20 x2 80 y2 80 stroke #0f0 stroke-width 2\n line x1 80 y1 20 x2 20 y2 80 stroke #0f0 stroke-width 2\n h3 Data Cubes\n p Encrypted information storage in 4D hypercubes.\n div\n class feature-card\n div\n class feature-icon\n svg\n polygon points 50,5 90,90 10,90 fill none stroke #f80 stroke-width 3\n circle cx 50 cy 50 r 20 fill none stroke #08f stroke-width 2\n h3 Quantum Nodes\n p Instantaneous communication across the metaverse.\n div\n class feature-card\n div\n class feature-icon\n svg\n path d M10,50 Q50,10 90,50 T170,50 fill none stroke #f08 stroke-width 3\n circle cx 50 cy 50 r 8 fill #0ff\n circle cx 90 cy 50 r 8 fill #f0f\n h3 Neural Links\n p Direct brain-to-web connectivity.\n section\n id tech\n class tech-demo\n h2 Future Tech Showcase\n div\n class tech-container\n div\n class matrix-grid\n div\n class circuit-animation\nfooter\n div\n class footer-content\n div\n class footer-links\n a About\n href #about\n a Contact\n href #contact\n a Privacy\n href #privacy\n p A portal to the digital future, built with pure web tech.\nscript.js\n---style.css---\n:root {\n --primary: #00ffff;\n --secondary: #ff00ff;\n --accent: #ffff00;\n --bg-dark: #000033;\n --bg-light: #0a0a2a;\n --text: #e0e0ff;\n}\n\nbody {\n font-family: 'Courier New', monospace;\n background: var(--bg-dark);\n color: var(--text);\n margin: 0;\n line-height: 1.6;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--bg-light), var(--bg-dark));\n padding: 2rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.hero::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: \n radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 30%),\n radial-gradient(circle at 80% 70%, var(--secondary) 0%, transparent 30%);\n opacity: 0.1;\n z-index: 0;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary);\n text-shadow: 0 0 10px var(--primary);\n}\n\n.nav-links {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n margin-top: 1rem;\n}\n\n.nav-links a {\n color: var(--text);\n text-decoration: none;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.cta-button {\n background: var(--primary);\n color: var(--bg-dark);\n padding: 0.5rem 1rem;\n border-radius: 4px;\n font-weight: bold;\n}\n\n.hero-content {\n position: relative;\n z-index: 1;\n max-width: 800px;\n margin: 2rem auto;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.primary-button {\n display: inline-block;\n background: var(--accent);\n color: var(--bg-dark);\n padding: 0.8rem 2rem;\n border-radius: 4px;\n text-decoration: none;\n font-weight: bold;\n margin-top: 1rem;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.primary-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(255, 255, 0, 0.4);\n}\n\n.features {\n padding: 4rem 2rem;\n background: var(--bg-light);\n}\n\n.features h2 {\n text-align: center;\n font-size: 2.5rem;\n margin-bottom: 3rem;\n color: var(--primary);\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n background: rgba(0, 0, 51, 0.5);\n border: 1px solid var(--primary);\n border-radius: 8px;\n padding: 2rem;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 255, 255, 0.2);\n}\n\n.feature-icon {\n margin-bottom: 1.5rem;\n}\n\n.feature-icon svg {\n width: 100px;\n height: 100px;\n margin: 0 auto;\n display: block;\n filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));\n}\n\n.feature-card h3 {\n color: var(--accent);\n margin-bottom: 1rem;\n}\n\n.tech-demo {\n padding: 4rem 2rem;\n text-align: center;\n}\n\n.tech-demo h2 {\n font-size: 2.5rem;\n margin-bottom: 2rem;\n color: var(--secondary);\n}\n\n.tech-container {\n max-width: 800px;\n margin: 0 auto;\n height: 300px;\n background: rgba(0, 0, 51, 0.7);\n border: 1px solid var(--secondary);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n}\n\n.matrix-grid {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);\n background-size: 20px 20px;\n}\n\n.circuit-animation {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.footer-content {\n padding: 2rem;\n text-align: center;\n background: var(--bg-light);\n}\n\n.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-bottom: 1rem;\n}\n\n.footer-links a {\n color: var(--text);\n text-decoration: none;\n}\n\n.footer-links a:hover {\n color: var(--primary);\n}\n\n@media (max-width: 768px) {\n .hero-content h1 {\n font-size: 2rem;\n }\n \n .feature-grid {\n grid-template-columns: 1fr;\n }\n \n .nav-links {\n flex-direction: column;\n gap: 0.5rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Animate feature icons\n const featureIcons = document.querySelectorAll('.feature-icon svg');\n \n featureIcons.forEach(icon => {\n const paths = icon.querySelectorAll('path, circle, rect, polygon, line');\n paths.forEach((path, index) => {\n path.style.strokeDasharray = path.getTotalLength();\n path.style.strokeDashoffset = path.getTotalLength();\n path.style.animation = `draw 2s ${index * 0.3}s forwards`;\n });\n });\n\n // Matrix grid animation\n const matrixGrid = document.querySelector('.matrix-grid');\n if (matrixGrid) {\n const columns = Math.floor(matrixGrid.offsetWidth / 20);\n const rows = Math.floor(matrixGrid.offsetHeight / 20);\n \n for (let i = 0; i < columns * rows / 10; i++) {\n const digit = document.createElement('div');\n digit.textContent = Math.random() > 0.5 ? '1' : '0';\n digit.style.position = 'absolute';\n digit.style.left = `${Math.random() * 100}%`;\n digit.style.top = `${Math.random() * 100}%`;\n digit.style.color = `rgba(0, 255, 255, ${Math.random() * 0.5 + 0.1})`;\n digit.style.fontSize = `${Math.random() * 10 + 10}px`;\n digit.style.opacity = '0';\n \n matrixGrid.appendChild(digit);\n \n animateDigit(digit);\n }\n }\n\n // Circuit animation\n const circuit = document.querySelector('.circuit-animation');\n if (circuit) {\n const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('width', '100%');\n svg.setAttribute('height', '100%');\n circuit.appendChild(svg);\n \n const colors = ['#00ffff', '#ff00ff', '#ffff00', '#ff8800'];\n \n for (let i = 0; i < 10; i++) {\n const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n const points = generateRandomPath(\n Math.random() * circuit.offsetWidth,\n Math.random() * circuit.offsetHeight,\n 10\n );\n \n path.setAttribute('d', points);\n path.setAttribute('fill', 'none');\n path.setAttribute('stroke', colors[Math.floor(Math.random() * colors.length)]);\n path.setAttribute('stroke-width', '1');\n path.setAttribute('stroke-dasharray', '5,5');\n \n svg.appendChild(path);\n \n animatePath(path);\n }\n }\n});\n\nfunction animateDigit(digit) {\n let opacity = 0;\n let yPos = parseFloat(digit.style.top);\n \n const fadeIn = setInterval(() => {\n opacity += 0.05;\n digit.style.opacity = opacity;\n \n if (opacity >= 1) {\n clearInterval(fadeIn);\n const fall = setInterval(() => {\n yPos += 0.5;\n digit.style.top = `${yPos}%`;\n \n if (yPos > 100) {\n digit.style.top = '-10%';\n yPos = -10;\n digit.textContent = Math.random() > 0.5 ? '1' : '0';\n }\n }, 50);\n }\n }, 100);\n}\n\nfunction generateRandomPath(startX, startY, segments) {\n let path = `M${startX},${startY}`;\n let x = startX;\n let y = startY;\n \n for (let i = 0; i < segments; i++) {\n const segmentType = Math.random() > 0.5 ? 'L' : 'Q';\n \n if (segmentType === 'L') {\n x += Math.random() * 100 - 50;\n y += Math.random() * 50;\n path += `L${x},${y}`;\n } else {\n const cp1x = x + Math.random() * 100 - 50;\n const cp1y = y + Math.random() * 100 - 50;\n x += Math.random() * 100 - 50;\n y += Math.random() * 100 - 50;\n path += `Q${cp1x},${cp1y} ${x},${y}`;\n }\n }\n \n return path;\n}\n\nfunction animatePath(path) {\n const length = path.getTotalLength();\n path.style.strokeDasharray = length;\n path.style.strokeDashoffset = length;\n \n let offset = length;\n const animation = setInterval(() => {\n offset -= 5;\n path.style.strokeDashoffset = offset;\n \n if (offset <= -length) {\n offset = length;\n }\n }, 50);\n}\n\n// Add CSS animations\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes draw {\n to {\n stroke-dashoffset: 0;\n }\n }\n \n @keyframes pulse {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n }\n`;\ndocument.head.appendChild(style);\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 746,
+ "completion_tokens": 3291,
+ "total_tokens": 4037,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 746
+ },
+ "system_fingerprint": "fp_8802369eaa_prod0425fp8"
+ }
readme.scroll
Changed around line 1
+ # y2kscroll.pub.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ I want an early 2000s style website themed after the y2k aesthetic, with vector animations made with svg that resemble futuristic technology
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "I want an early 2000s style website themed after the y2k aesthetic, with vector animations made with svg that resemble futuristic technology"
+
+ 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() {
+ // Animate feature icons
+ const featureIcons = document.querySelectorAll('.feature-icon svg');
+
+ featureIcons.forEach(icon => {
+ const paths = icon.querySelectorAll('path, circle, rect, polygon, line');
+ paths.forEach((path, index) => {
+ path.style.strokeDasharray = path.getTotalLength();
+ path.style.strokeDashoffset = path.getTotalLength();
+ path.style.animation = `draw 2s ${index * 0.3}s forwards`;
+ });
+ });
+
+ // Matrix grid animation
+ const matrixGrid = document.querySelector('.matrix-grid');
+ if (matrixGrid) {
+ const columns = Math.floor(matrixGrid.offsetWidth / 20);
+ const rows = Math.floor(matrixGrid.offsetHeight / 20);
+
+ for (let i = 0; i < columns * rows / 10; i++) {
+ const digit = document.createElement('div');
+ digit.textContent = Math.random() > 0.5 ? '1' : '0';
+ digit.style.position = 'absolute';
+ digit.style.left = `${Math.random() * 100}%`;
+ digit.style.top = `${Math.random() * 100}%`;
+ digit.style.color = `rgba(0, 255, 255, ${Math.random() * 0.5 + 0.1})`;
+ digit.style.fontSize = `${Math.random() * 10 + 10}px`;
+ digit.style.opacity = '0';
+
+ matrixGrid.appendChild(digit);
+
+ animateDigit(digit);
+ }
+ }
+
+ // Circuit animation
+ const circuit = document.querySelector('.circuit-animation');
+ if (circuit) {
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ svg.setAttribute('width', '100%');
+ svg.setAttribute('height', '100%');
+ circuit.appendChild(svg);
+
+ const colors = ['#00ffff', '#ff00ff', '#ffff00', '#ff8800'];
+
+ for (let i = 0; i < 10; i++) {
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ const points = generateRandomPath(
+ Math.random() * circuit.offsetWidth,
+ Math.random() * circuit.offsetHeight,
+ 10
+ );
+
+ path.setAttribute('d', points);
+ path.setAttribute('fill', 'none');
+ path.setAttribute('stroke', colors[Math.floor(Math.random() * colors.length)]);
+ path.setAttribute('stroke-width', '1');
+ path.setAttribute('stroke-dasharray', '5,5');
+
+ svg.appendChild(path);
+
+ animatePath(path);
+ }
+ }
+ });
+
+ function animateDigit(digit) {
+ let opacity = 0;
+ let yPos = parseFloat(digit.style.top);
+
+ const fadeIn = setInterval(() => {
+ opacity += 0.05;
+ digit.style.opacity = opacity;
+
+ if (opacity >= 1) {
+ clearInterval(fadeIn);
+ const fall = setInterval(() => {
+ yPos += 0.5;
+ digit.style.top = `${yPos}%`;
+
+ if (yPos > 100) {
+ digit.style.top = '-10%';
+ yPos = -10;
+ digit.textContent = Math.random() > 0.5 ? '1' : '0';
+ }
+ }, 50);
+ }
+ }, 100);
+ }
+
+ function generateRandomPath(startX, startY, segments) {
+ let path = `M${startX},${startY}`;
+ let x = startX;
+ let y = startY;
+
+ for (let i = 0; i < segments; i++) {
+ const segmentType = Math.random() > 0.5 ? 'L' : 'Q';
+
+ if (segmentType === 'L') {
+ x += Math.random() * 100 - 50;
+ y += Math.random() * 50;
+ path += `L${x},${y}`;
+ } else {
+ const cp1x = x + Math.random() * 100 - 50;
+ const cp1y = y + Math.random() * 100 - 50;
+ x += Math.random() * 100 - 50;
+ y += Math.random() * 100 - 50;
+ path += `Q${cp1x},${cp1y} ${x},${y}`;
+ }
+ }
+
+ return path;
+ }
+
+ function animatePath(path) {
+ const length = path.getTotalLength();
+ path.style.strokeDasharray = length;
+ path.style.strokeDashoffset = length;
+
+ let offset = length;
+ const animation = setInterval(() => {
+ offset -= 5;
+ path.style.strokeDashoffset = offset;
+
+ if (offset <= -length) {
+ offset = length;
+ }
+ }, 50);
+ }
+
+ // Add CSS animations
+ const style = document.createElement('style');
+ style.textContent = `
+ @keyframes draw {
+ to {
+ stroke-dashoffset: 0;
+ }
+ }
+
+ @keyframes pulse {
+ 0%, 100% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 1;
+ }
+ }
+ `;
+ document.head.appendChild(style);
style.css
Changed around line 1
+ :root {
+ --primary: #00ffff;
+ --secondary: #ff00ff;
+ --accent: #ffff00;
+ --bg-dark: #000033;
+ --bg-light: #0a0a2a;
+ --text: #e0e0ff;
+ }
+
+ body {
+ font-family: 'Courier New', monospace;
+ background: var(--bg-dark);
+ color: var(--text);
+ margin: 0;
+ line-height: 1.6;
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--bg-light), var(--bg-dark));
+ padding: 2rem;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .hero::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 30%),
+ radial-gradient(circle at 80% 70%, var(--secondary) 0%, transparent 30%);
+ opacity: 0.1;
+ z-index: 0;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: bold;
+ color: var(--primary);
+ text-shadow: 0 0 10px var(--primary);
+ }
+
+ .nav-links {
+ display: flex;
+ justify-content: center;
+ gap: 1.5rem;
+ margin-top: 1rem;
+ }
+
+ .nav-links a {
+ color: var(--text);
+ text-decoration: none;
+ transition: color 0.3s;
+ }
+
+ .nav-links a:hover {
+ color: var(--primary);
+ }
+
+ .cta-button {
+ background: var(--primary);
+ color: var(--bg-dark);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+
+ .hero-content {
+ position: relative;
+ z-index: 1;
+ max-width: 800px;
+ margin: 2rem auto;
+ }
+
+ .hero-content h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ }
+
+ .primary-button {
+ display: inline-block;
+ background: var(--accent);
+ color: var(--bg-dark);
+ padding: 0.8rem 2rem;
+ border-radius: 4px;
+ text-decoration: none;
+ font-weight: bold;
+ margin-top: 1rem;
+ transition: transform 0.3s, box-shadow 0.3s;
+ }
+
+ .primary-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(255, 255, 0, 0.4);
+ }
+
+ .features {
+ padding: 4rem 2rem;
+ background: var(--bg-light);
+ }
+
+ .features h2 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+ color: var(--primary);
+ }
+
+ .feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .feature-card {
+ background: rgba(0, 0, 51, 0.5);
+ border: 1px solid var(--primary);
+ border-radius: 8px;
+ padding: 2rem;
+ transition: transform 0.3s, box-shadow 0.3s;
+ }
+
+ .feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 20px rgba(0, 255, 255, 0.2);
+ }
+
+ .feature-icon {
+ margin-bottom: 1.5rem;
+ }
+
+ .feature-icon svg {
+ width: 100px;
+ height: 100px;
+ margin: 0 auto;
+ display: block;
+ filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
+ }
+
+ .feature-card h3 {
+ color: var(--accent);
+ margin-bottom: 1rem;
+ }
+
+ .tech-demo {
+ padding: 4rem 2rem;
+ text-align: center;
+ }
+
+ .tech-demo h2 {
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ color: var(--secondary);
+ }
+
+ .tech-container {
+ max-width: 800px;
+ margin: 0 auto;
+ height: 300px;
+ background: rgba(0, 0, 51, 0.7);
+ border: 1px solid var(--secondary);
+ border-radius: 8px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .matrix-grid {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background:
+ linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
+ background-size: 20px 20px;
+ }
+
+ .circuit-animation {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ .footer-content {
+ padding: 2rem;
+ text-align: center;
+ background: var(--bg-light);
+ }
+
+ .footer-links {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ .footer-links a {
+ color: var(--text);
+ text-decoration: none;
+ }
+
+ .footer-links a:hover {
+ color: var(--primary);
+ }
+
+ @media (max-width: 768px) {
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .feature-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .nav-links {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ }