guitar legends fx

core/admin.py

@@ -1,3 +1,27 @@
 from django.contrib import admin
+from .models import Artist, EffectModule, Preset, SignalChainStep, AudioEngineSettings
 
-# Register your models here.
+class SignalChainStepInline(admin.TabularInline):
+    model = SignalChainStep
+    extra = 3
+
+@admin.register(Artist)
+class ArtistAdmin(admin.ModelAdmin):
+    list_display = ('name', 'style')
+    prepopulated_fields = {'slug': ('name',)}
+
+@admin.register(EffectModule)
+class EffectModuleAdmin(admin.ModelAdmin):
+    list_display = ('name', 'category')
+    list_filter = ('category',)
+
+@admin.register(Preset)
+class PresetAdmin(admin.ModelAdmin):
+    list_display = ('title', 'artist', 'is_featured')
+    list_filter = ('artist', 'is_featured')
+    prepopulated_fields = {'slug': ('title',)}
+    inlines = [SignalChainStepInline]
+
+@admin.register(AudioEngineSettings)
+class AudioEngineSettingsAdmin(admin.ModelAdmin):
+    list_display = ('driver_type', 'sample_rate', 'buffer_size')

core/migrations/0001_initial.py

@@ -0,0 +1,59 @@
+# Generated by Django 5.2.7 on 2026-02-02 00:51
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Artist',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('slug', models.SlugField(unique=True)),
+                ('description', models.TextField()),
+                ('image_url', models.URLField(blank=True, null=True)),
+                ('style', models.CharField(help_text='e.g. Rock, Metal, Blues', max_length=100)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='EffectModule',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('category', models.CharField(choices=[('pedal', 'Pedal'), ('amp', 'Amplifier'), ('cab', 'Cabinet'), ('rack', 'Rack Effect')], max_length=50)),
+                ('description', models.TextField(blank=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Preset',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=255)),
+                ('slug', models.SlugField(unique=True)),
+                ('description', models.TextField()),
+                ('is_featured', models.BooleanField(default=False)),
+                ('artist', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='presets', to='core.artist')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='SignalChainStep',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('order', models.PositiveIntegerField(default=0)),
+                ('settings_summary', models.CharField(blank=True, help_text='e.g. Gain: 8, Bass: 4', max_length=255)),
+                ('module', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.effectmodule')),
+                ('preset', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='steps', to='core.preset')),
+            ],
+            options={
+                'ordering': ['order'],
+            },
+        ),
+    ]

core/migrations/0002_audioenginesettings_effectmodule_icon_class_and_more.py

@@ -0,0 +1,35 @@
+# Generated by Django 5.2.7 on 2026-02-02 03:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='AudioEngineSettings',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('driver_type', models.CharField(choices=[('asio', 'ASIO'), ('wasapi', 'WASAPI'), ('directsound', 'DirectSound')], default='asio', max_length=20)),
+                ('buffer_size', models.IntegerField(default=128)),
+                ('sample_rate', models.IntegerField(default=44100)),
+                ('input_device', models.CharField(default='Default Input', max_length=255)),
+                ('output_device', models.CharField(default='Default Output', max_length=255)),
+                ('is_standalone_mode', models.BooleanField(default=True)),
+            ],
+        ),
+        migrations.AddField(
+            model_name='effectmodule',
+            name='icon_class',
+            field=models.CharField(default='bi-cpu', help_text='Bootstrap Icon class', max_length=50),
+        ),
+        migrations.AlterField(
+            model_name='effectmodule',
+            name='category',
+            field=models.CharField(choices=[('dynamics', 'Dynamics (Gate/Comp)'), ('drive', 'Drive/Overdrive'), ('amp', 'Amplifier'), ('modulation', 'Modulation (Chorus/Flanger)'), ('delay_reverb', 'Delay/Reverb'), ('utility', 'Utility (IR Loader/Wah)'), ('cab', 'Cabinet')], max_length=50),
+        ),
+    ]

core/models.py

@@ -1,3 +1,68 @@
 from django.db import models
+from django.urls import reverse
 
-# Create your models here.
+class Artist(models.Model):
+    name = models.CharField(max_length=255)
+    slug = models.SlugField(unique=True)
+    description = models.TextField()
+    image_url = models.URLField(blank=True, null=True)
+    style = models.CharField(max_length=100, help_text="e.g. Rock, Metal, Blues")
+
+    def __str__(self):
+        return self.name
+
+class EffectModule(models.Model):
+    CATEGORY_CHOICES = [
+        ('dynamics', 'Dynamics (Gate/Comp)'),
+        ('drive', 'Drive/Overdrive'),
+        ('amp', 'Amplifier'),
+        ('modulation', 'Modulation (Chorus/Flanger)'),
+        ('delay_reverb', 'Delay/Reverb'),
+        ('utility', 'Utility (IR Loader/Wah)'),
+        ('cab', 'Cabinet'),
+    ]
+    name = models.CharField(max_length=255)
+    category = models.CharField(max_length=50, choices=CATEGORY_CHOICES)
+    description = models.TextField(blank=True)
+    icon_class = models.CharField(max_length=50, default='bi-cpu', help_text="Bootstrap Icon class")
+
+    def __str__(self):
+        return self.name
+
+class Preset(models.Model):
+    artist = models.ForeignKey(Artist, on_delete=models.CASCADE, related_name='presets')
+    title = models.CharField(max_length=255)
+    slug = models.SlugField(unique=True)
+    description = models.TextField()
+    is_featured = models.BooleanField(default=False)
+
+    def __str__(self):
+        return f"{self.artist.name} - {self.title}"
+
+class SignalChainStep(models.Model):
+    preset = models.ForeignKey(Preset, on_delete=models.CASCADE, related_name='steps')
+    module = models.ForeignKey(EffectModule, on_delete=models.CASCADE)
+    order = models.PositiveIntegerField(default=0)
+    settings_summary = models.CharField(max_length=255, blank=True, help_text="e.g. Gain: 8, Bass: 4")
+
+    class Meta:
+        ordering = ['order']
+
+    def __str__(self):
+        return f"{self.preset.title} - {self.module.name} (Step {self.order})"
+
+class AudioEngineSettings(models.Model):
+    DRIVER_CHOICES = [
+        ('asio', 'ASIO'),
+        ('wasapi', 'WASAPI'),
+        ('directsound', 'DirectSound'),
+    ]
+    driver_type = models.CharField(max_length=20, choices=DRIVER_CHOICES, default='asio')
+    buffer_size = models.IntegerField(default=128)
+    sample_rate = models.IntegerField(default=44100)
+    input_device = models.CharField(max_length=255, default='Default Input')
+    output_device = models.CharField(max_length=255, default='Default Output')
+    is_standalone_mode = models.BooleanField(default=True)
+
+    def __str__(self):
+        return f"Settings ({self.driver_type})"

core/templates/base.html

@@ -1,25 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
-  {% if project_description %}
-  <meta name="description" content="{{ project_description }}">
-  <meta property="og:description" content="{{ project_description }}">
-  <meta property="twitter:description" content="{{ project_description }}">
-  {% endif %}
-  {% if project_image_url %}
-  <meta property="og:image" content="{{ project_image_url }}">
-  <meta property="twitter:image" content="{{ project_image_url }}">
-  {% endif %}
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  {% block head %}{% endblock %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Master of Tones - 64-bit Multi-Effects{% endblock %}</title>
+    {% if project_description %}
+    <meta name="description" content="{{ project_description }}">
+    {% endif %}
+    {% load static %}
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+    {% block head %}{% endblock %}
 </head>
+<body class="bg-black text-light">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-black border-bottom border-secondary sticky-top py-3">
+        <div class="container">
+            <a class="navbar-brand fw-bold d-flex align-items-center" href="{% url 'index' %}">
+                <i class="bi bi-soundwave text-warning me-2 fs-3"></i>
+                <span class="text-uppercase tracking-wider">Master of <span class="text-warning">Tones</span></span>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto align-items-center">
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="{% url 'index' %}">EXPLORE</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="{% url 'audio_settings' %}"><i class="bi bi-cpu me-1"></i>ENGINE</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link px-3" href="/admin/"><i class="bi bi-shield-lock me-1"></i>ADMIN</a>
+                    </li>
+                    <li class="nav-item ms-lg-3">
+                        <a class="btn btn-warning fw-bold px-4 rounded-pill" href="{% url 'standalone_download' %}">
+                            <i class="bi bi-download me-2"></i>STANDALONE 64-BIT
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
 
-<body>
-  {% block content %}{% endblock %}
+    <main>
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="bg-black py-5 border-top border-secondary mt-5">
+        <div class="container text-center">
+            <div class="mb-4">
+                <i class="bi bi-soundwave text-warning display-4"></i>
+            </div>
+            <p class="text-secondary small mb-0">© 2026 MASTER OF TONES ENGINE. ALL RIGHTS RESERVED.</p>
+            <p class="text-secondary small">ENGINEERED FOR HIGH-FIDELITY PERFORMANCE & LOW LATENCY.</p>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-
-</html>
+</html>

core/templates/core/artist_detail.html

@@ -0,0 +1,92 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="artist-header py-5 bg-black border-bottom border-secondary position-relative">
+    <div class="container py-4">
+        <div class="row align-items-center">
+            <div class="col-md-3 text-center text-md-start mb-4 mb-md-0">
+                <div class="rounded-circle overflow-hidden border border-warning border-3 shadow-lg" style="width: 200px; height: 200px; margin: 0 auto;">
+                    {% if artist.image_url %}
+                    <img src="{{ artist.image_url }}" alt="{{ artist.name }}" class="img-fluid h-100 w-100 object-fit-cover">
+                    {% else %}
+                    <div class="h-100 w-100 bg-dark d-flex align-items-center justify-content-center">
+                        <i class="bi bi-person-fill display-1 text-secondary"></i>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="col-md-9 text-center text-md-start">
+                <span class="badge bg-dark border border-warning text-warning px-3 py-2 mb-2">FEATURED ARTIST</span>
+                <h1 class="display-3 fw-bold text-white mb-2">{{ artist.name }}</h1>
+                <p class="h4 text-warning mb-3 fw-light">{{ artist.style }} Master</p>
+                <p class="text-secondary mb-0 lead col-lg-10">{{ artist.description }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container py-5">
+    <div class="d-flex justify-content-between align-items-end mb-4">
+        <div>
+            <h2 class="fw-bold text-white mb-0">SIGNATURE <span class="text-warning">BANK</span></h2>
+            <p class="text-secondary mb-0">Choose a preset to explore the 64-bit signal chain.</p>
+        </div>
+        <div class="text-end d-none d-md-block">
+            <span class="badge bg-black border border-secondary text-secondary">BANK_ID: {{ artist.id|add:100 }}</span>
+        </div>
+    </div>
+
+    <div class="row g-4">
+        {% for preset in presets %}
+        <div class="col-md-4">
+            <div class="card bg-dark border-secondary h-100 transition-all hover-glow overflow-hidden">
+                <div class="card-body p-4">
+                    <div class="d-flex justify-content-between align-items-start mb-3">
+                        <h4 class="text-white mb-0">{{ preset.title }}</h4>
+                        <i class="bi bi-soundwave text-warning fs-4"></i>
+                    </div>
+                    <p class="text-secondary small mb-4">{{ preset.description|truncatewords:25 }}</p>
+                    
+                    <div class="mb-4">
+                        <div class="d-flex flex-wrap gap-1">
+                            {% for step in preset.steps.all|slice:":3" %}
+                            <span class="badge bg-black border border-secondary text-secondary" style="font-size: 0.6rem;">{{ step.module.name }}</span>
+                            {% endfor %}
+                            {% if preset.steps.count > 3 %}
+                            <span class="badge bg-black border border-secondary text-secondary" style="font-size: 0.6rem;">+{{ preset.steps.count|add:"-3" }}</span>
+                            {% endif %}
+                        </div>
+                    </div>
+
+                    <a href="{% url 'preset_detail' preset.slug %}" class="btn btn-warning w-100 fw-bold stretched-link">VIEW CHAIN</a>
+                </div>
+                <div class="card-footer bg-black border-secondary py-2">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <small class="text-secondary fw-bold" style="font-size: 0.7rem;">STATUS: READY</small>
+                        <small class="text-info fw-bold" style="font-size: 0.7rem;">LATENCY: 2.9ms</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% empty %}
+        <div class="col-12">
+            <div class="text-center py-5 bg-dark border border-secondary rounded">
+                <p class="text-secondary mb-0">No presets found for this artist.</p>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+.hover-glow:hover {
+    border-color: #FFD700 !important;
+    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
+    transform: translateY(-5px);
+}
+.transition-all {
+    transition: all 0.3s ease;
+}
+</style>
+{% endblock %}

core/templates/core/index.html

@@ -1,145 +1,157 @@
-{% extends "base.html" %}
-
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% extends 'base.html' %}
+{% load static %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<div class="hero-section position-relative py-5 overflow-hidden">
+    <!-- Background Decoration -->
+    <div class="position-absolute top-50 start-50 translate-middle w-100 h-100" style="background: radial-gradient(circle at center, rgba(255, 215, 0, 0.05) 0%, rgba(0, 0, 0, 0) 70%); z-index: -1;"></div>
+    
+    <div class="container py-5">
+        <div class="row align-items-center">
+            <div class="col-lg-7 text-center text-lg-start">
+                <span class="badge bg-warning text-black fw-bold mb-3 px-3 py-2">NEW ENGINE v2.0</span>
+                <h1 class="display-1 fw-bold text-white mb-3 tracking-tighter" style="font-family: 'Oswald', sans-serif;">LEGENDARY <span class="text-warning">TONES</span></h1>
+                <p class="lead text-secondary mb-5 pe-lg-5">
+                    The most powerful multi-effects suite for guitarists. 70+ Signature presets from 14 icons. 
+                    Optimized for <span class="text-white">ASIO/WASAPI</span> with a native <span class="text-white">64-bit architecture</span>.
+                </p>
+                <div class="d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start">
+                    <a href="{% url 'standalone_download' %}" class="btn btn-warning btn-lg px-5 fw-bold rounded-pill">GET STANDALONE</a>
+                    <a href="#artists" class="btn btn-outline-light btn-lg px-5 fw-bold rounded-pill">EXPLORE ARTISTS</a>
+                </div>
+            </div>
+            <div class="col-lg-5 d-none d-lg-block">
+                <div class="engine-preview bg-dark p-4 rounded-4 border border-secondary shadow-lg rotate-3">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <div class="d-flex gap-2">
+                            <div class="bg-danger rounded-circle" style="width: 10px; height: 10px;"></div>
+                            <div class="bg-warning rounded-circle" style="width: 10px; height: 10px;"></div>
+                            <div class="bg-success rounded-circle" style="width: 10px; height: 10px;"></div>
+                        </div>
+                        <small class="text-secondary fw-bold">MASTER_ENGINE_X64</small>
+                    </div>
+                    <div class="p-3 bg-black rounded border border-secondary mb-3">
+                        <div class="d-flex justify-content-between mb-2">
+                            <span class="small text-secondary">LATENCY</span>
+                            <span class="small text-info">2.9ms</span>
+                        </div>
+                        <div class="progress bg-dark" style="height: 4px;">
+                            <div class="progress-bar bg-info" style="width: 15%"></div>
+                        </div>
+                    </div>
+                    <div class="p-3 bg-black rounded border border-secondary">
+                        <div class="d-flex justify-content-between mb-2">
+                            <span class="small text-secondary">DSP LOAD</span>
+                            <span class="small text-warning">0.03%</span>
+                        </div>
+                        <div class="progress bg-dark" style="height: 4px;">
+                            <div class="progress-bar bg-warning" style="width: 5%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
-  </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
+</div>
+
+<section id="artists" class="py-5 bg-black">
+    <div class="container">
+        <div class="d-flex justify-content-between align-items-end mb-5">
+            <div>
+                <h2 class="display-5 fw-bold text-white mb-0">THE <span class="text-warning">ROSTER</span></h2>
+                <p class="text-secondary mb-0">Explore the signature chains of guitar legends.</p>
+            </div>
+            <div class="text-end">
+                <span class="h4 text-warning mb-0">14</span>
+                <p class="text-secondary small text-uppercase fw-bold mb-0">Icons</p>
+            </div>
+        </div>
+
+        <div class="row g-4">
+            {% for artist in artists %}
+            <div class="col-6 col-md-4 col-lg-3">
+                <a href="{% url 'artist_detail' artist.slug %}" class="text-decoration-none">
+                    <div class="artist-card bg-dark border border-secondary p-4 text-center h-100 transition-all hover-glow">
+                        <div class="mb-3 position-relative d-inline-block">
+                            <div class="rounded-circle overflow-hidden border border-secondary" style="width: 100px; height: 100px; margin: 0 auto;">
+                                {% if artist.image_url %}
+                                <img src="{{ artist.image_url }}" alt="{{ artist.name }}" class="img-fluid h-100 w-100 object-fit-cover">
+                                {% else %}
+                                <div class="h-100 w-100 bg-black d-flex align-items-center justify-content-center">
+                                    <i class="bi bi-person-fill display-4 text-secondary"></i>
+                                </div>
+                                {% endif %}
+                            </div>
+                            <span class="position-absolute bottom-0 end-0 badge rounded-pill bg-warning text-black fw-bold" style="transform: translate(25%, 25%); border: 2px solid #000;">5+</span>
+                        </div>
+                        <h5 class="text-white mb-1">{{ artist.name }}</h5>
+                        <p class="small text-secondary mb-0">{{ artist.style }}</p>
+                    </div>
+                </a>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+
+<section class="py-5 bg-dark border-top border-secondary">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-6">
+                <h2 class="display-5 fw-bold text-white mb-4">64-BIT <span class="text-info">ACCELERATION</span></h2>
+                <p class="text-secondary lead">
+                    Our proprietary engine leverages native 64-bit processing for maximum dynamic range and zero audible distortion. 
+                    Whether you use <span class="text-white">ASIO</span> on Windows or <span class="text-white">Core Audio</span> on macOS, 
+                    the latency remains imperceptible.
+                </p>
+            </div>
+            <div class="col-lg-6">
+                <div class="row g-3">
+                    <div class="col-6">
+                        <div class="p-4 bg-black border border-secondary rounded">
+                            <i class="bi bi-lightning-fill text-warning fs-3 mb-2 d-block"></i>
+                            <h6 class="text-white">Ultra Low Latency</h6>
+                            <p class="small text-secondary mb-0">Sub 3ms processing with WASAPI/ASIO.</p>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="p-4 bg-black border border-secondary rounded">
+                            <i class="bi bi-layers-fill text-info fs-3 mb-2 d-block"></i>
+                            <h6 class="text-white">Dual IR Loader</h6>
+                            <p class="small text-secondary mb-0">Blend two impulses for massive space.</p>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="p-4 bg-black border border-secondary rounded">
+                            <i class="bi bi-shield-check text-success fs-3 mb-2 d-block"></i>
+                            <h6 class="text-white">Noise Gate</h6>
+                            <p class="small text-secondary mb-0">Advanced algorithms for dead silence.</p>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="p-4 bg-black border border-secondary rounded">
+                            <i class="bi bi-cpu text-danger fs-3 mb-2 d-block"></i>
+                            <h6 class="text-white">64-Bit Core</h6>
+                            <p class="small text-secondary mb-0">Optimized for high-performance DSP.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<style>
+.hover-glow:hover {
+    border-color: #FFD700 !important;
+    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
+    transform: translateY(-5px);
+}
+.rotate-3 {
+    transform: perspective(1000px) rotateY(-10deg) rotateX(10deg);
+}
+.transition-all {
+    transition: all 0.3s ease;
+}
+</style>
 {% endblock %}

core/templates/core/preset_detail.html

@@ -0,0 +1,146 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="preset-header py-5 bg-black border-bottom border-secondary">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-md-8">
+                <nav aria-label="breadcrumb">
+                    <ol class="breadcrumb mb-2">
+                        <li class="breadcrumb-item"><a href="{% url 'index' %}" class="text-warning text-decoration-none">Home</a></li>
+                        <li class="breadcrumb-item"><a href="{% url 'artist_detail' preset.artist.slug %}" class="text-warning text-decoration-none">{{ preset.artist.name }}</a></li>
+                        <li class="breadcrumb-item active text-secondary" aria-current="page">{{ preset.title }}</li>
+                    </ol>
+                </nav>
+                <h1 class="display-4 fw-bold text-white mb-2">{{ preset.title }}</h1>
+                <p class="lead text-secondary">{{ preset.description }}</p>
+                <div class="d-flex gap-2 mt-3">
+                    <span class="badge bg-dark border border-warning text-warning">Artist: {{ preset.artist.name }}</span>
+                    <span class="badge bg-dark border border-info text-info">Style: {{ preset.artist.style }}</span>
+                    <span class="badge bg-dark border border-danger text-danger">64-bit Ready</span>
+                </div>
+            </div>
+            <div class="col-md-4 text-end">
+                <button class="btn btn-warning btn-lg fw-bold px-5 rounded-pill shadow-sm">
+                    <i class="bi bi-play-fill me-2"></i>LOAD PRESET
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container py-5">
+    <h3 class="text-white mb-4"><i class="bi bi-diagram-3 me-2 text-warning"></i>Signal Chain Architecture</h3>
+    
+    <div class="signal-chain-wrapper overflow-auto pb-4">
+        <div class="d-flex align-items-center gap-3" style="min-width: 1200px;">
+            <div class="input-node text-center">
+                <div class="rounded-circle bg-success mb-2" style="width: 15px; height: 15px; margin: 0 auto; box-shadow: 0 0 10px #198754;"></div>
+                <small class="text-uppercase text-secondary fw-bold" style="font-size: 0.7rem;">Input</small>
+            </div>
+
+            <div class="flex-grow-1 border-top border-secondary border-2" style="min-width: 30px;"></div>
+
+            {% for step in steps %}
+            <div class="module-card">
+                <div class="card bg-dark border-secondary shadow-sm" style="width: 180px;">
+                    <div class="card-header bg-black py-1 px-2 border-secondary d-flex justify-content-between align-items-center">
+                        <small class="text-secondary fw-bold" style="font-size: 0.6rem;">#{{ forloop.counter }}</small>
+                        <i class="bi {{ step.module.icon_class }} text-warning" style="font-size: 0.8rem;"></i>
+                    </div>
+                    <div class="card-body p-3 text-center">
+                        <div class="mb-2">
+                            <i class="bi {{ step.module.icon_class }} display-6 text-white"></i>
+                        </div>
+                        <h6 class="text-white mb-1" style="font-size: 0.9rem;">{{ step.module.name }}</h6>
+                        <span class="badge bg-black text-secondary small border border-secondary" style="font-size: 0.6rem;">{{ step.module.get_category_display }}</span>
+                    </div>
+                    <div class="card-footer bg-black border-secondary p-2">
+                        <div class="settings-visual bg-dark rounded p-1" style="font-size: 0.65rem;">
+                            <p class="text-info mb-0 text-truncate">{{ step.settings_summary }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {% if not forloop.last %}
+            <div class="flex-grow-1 border-top border-secondary border-2" style="min-width: 30px;"></div>
+            {% endif %}
+            {% endfor %}
+
+            <div class="flex-grow-1 border-top border-secondary border-2" style="min-width: 30px;"></div>
+
+            <div class="output-node text-center">
+                <div class="rounded-circle bg-danger mb-2" style="width: 15px; height: 15px; margin: 0 auto; box-shadow: 0 0 10px #dc3545;"></div>
+                <small class="text-uppercase text-secondary fw-bold" style="font-size: 0.7rem;">Output</small>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mt-5">
+        <div class="col-md-6">
+            <div class="card bg-dark border-secondary">
+                <div class="card-header bg-black border-secondary">
+                    <h5 class="mb-0 text-white">Module Technical Specs</h5>
+                </div>
+                <div class="card-body">
+                    <ul class="list-group list-group-flush bg-transparent">
+                        {% for step in steps %}
+                        <li class="list-group-item bg-transparent text-secondary border-secondary px-0">
+                            <div class="d-flex justify-content-between">
+                                <span class="text-white">{{ step.module.name }}</span>
+                                <span class="badge bg-secondary">{{ step.module.get_category_display }}</span>
+                            </div>
+                            <small class="d-block text-muted mt-1">{{ step.settings_summary }}</small>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card bg-dark border-secondary">
+                <div class="card-header bg-black border-secondary">
+                    <h5 class="mb-0 text-white">Engine Performance</h5>
+                </div>
+                <div class="card-body text-center py-5">
+                    <div class="mb-4">
+                        <div class="display-4 text-warning">0.03%</div>
+                        <small class="text-secondary text-uppercase fw-bold">CPU Usage (64-bit Core)</small>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 border-end border-secondary">
+                            <div class="h3 text-info">2.9 ms</div>
+                            <small class="text-secondary">Latency (ASIO)</small>
+                        </div>
+                        <div class="col-6">
+                            <div class="h3 text-info">48 kHz</div>
+                            <small class="text-secondary">Sample Rate</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.signal-chain-wrapper::-webkit-scrollbar {
+    height: 8px;
+}
+.signal-chain-wrapper::-webkit-scrollbar-track {
+    background: #000;
+}
+.signal-chain-wrapper::-webkit-scrollbar-thumb {
+    background: #FFD700;
+    border-radius: 4px;
+}
+.module-card {
+    transition: transform 0.2s;
+}
+.module-card:hover {
+    transform: translateY(-5px);
+}
+</style>
+{% endblock %}

core/templates/core/settings.html

@@ -0,0 +1,89 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="container py-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card bg-dark text-light border-secondary shadow-lg">
+                <div class="card-header border-secondary bg-black d-flex justify-content-between align-items-center">
+                    <h3 class="mb-0"><i class="bi bi-cpu text-warning me-2"></i>Audio Engine Settings</h3>
+                    <span class="badge bg-danger">64-BIT STANDALONE MODE</span>
+                </div>
+                <div class="card-body p-4">
+                    <form method="post">
+                        {% csrf_token %}
+                        <div class="row mb-4">
+                            <div class="col-md-6">
+                                <label class="form-label text-secondary small text-uppercase fw-bold">Audio Driver</label>
+                                <select name="driver_type" class="form-select bg-black text-white border-secondary">
+                                    <option value="asio" {% if settings.driver_type == 'asio' %}selected{% endif %}>ASIO (Low Latency)</option>
+                                    <option value="wasapi" {% if settings.driver_type == 'wasapi' %}selected{% endif %}>WASAPI (Windows Audio)</option>
+                                    <option value="directsound" {% if settings.driver_type == 'directsound' %}selected{% endif %}>DirectSound</option>
+                                </select>
+                                <div class="form-text text-muted">ASIO is recommended for professional audio interfaces.</div>
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label text-secondary small text-uppercase fw-bold">Sample Rate</label>
+                                <select name="sample_rate" class="form-select bg-black text-white border-secondary">
+                                    <option value="44100" {% if settings.sample_rate == 44100 %}selected{% endif %}>44100 Hz</option>
+                                    <option value="48000" {% if settings.sample_rate == 48000 %}selected{% endif %}>48000 Hz</option>
+                                    <option value="96000" {% if settings.sample_rate == 96000 %}selected{% endif %}>96000 Hz</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="row mb-4">
+                            <div class="col-md-6">
+                                <label class="form-label text-secondary small text-uppercase fw-bold">Buffer Size (Samples)</label>
+                                <select name="buffer_size" class="form-select bg-black text-white border-secondary">
+                                    <option value="64" {% if settings.buffer_size == 64 %}selected{% endif %}>64 (Ultra Low)</option>
+                                    <option value="128" {% if settings.buffer_size == 128 %}selected{% endif %}>128 (Recommended)</option>
+                                    <option value="256" {% if settings.buffer_size == 256 %}selected{% endif %}>256</option>
+                                    <option value="512" {% if settings.buffer_size == 512 %}selected{% endif %}>512</option>
+                                </select>
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label text-secondary small text-uppercase fw-bold">Latency Info</label>
+                                <div class="bg-black p-2 border border-secondary rounded text-info font-monospace">
+                                    Estimated: <span id="latency-val">2.9</span> ms
+                                </div>
+                            </div>
+                        </div>
+
+                        <hr class="border-secondary">
+
+                        <div class="d-flex justify-content-between">
+                            <button type="button" class="btn btn-outline-secondary">Reset Defaults</button>
+                            <button type="submit" class="btn btn-warning px-5 fw-bold">Apply Changes</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <div class="mt-4 text-center">
+                <p class="text-muted small">
+                    <i class="bi bi-info-circle me-1"></i> These settings apply to the local audio engine proxy. Ensure your audio interface is connected.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    const bufferSelect = document.querySelector('select[name="buffer_size"]');
+    const rateSelect = document.querySelector('select[name="sample_rate"]');
+    const latencyVal = document.getElementById('latency-val');
+
+    function updateLatency() {
+        const buffer = parseInt(bufferSelect.value);
+        const rate = parseInt(rateSelect.value);
+        const ms = ((buffer / rate) * 1000).toFixed(1);
+        latencyVal.textContent = ms;
+    }
+
+    bufferSelect.addEventListener('change', updateLatency);
+    rateSelect.addEventListener('change', updateLatency);
+    updateLatency();
+</script>
+{% endblock %}

core/templates/core/standalone.html

@@ -0,0 +1,45 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="container py-5 text-center">
+    <div class="row justify-content-center">
+        <div class="col-lg-8">
+            <h1 class="display-3 fw-bold text-white mb-4">Master of Tones <span class="text-warning">v2.0</span></h1>
+            <p class="lead text-secondary mb-5">
+                Experience the ultimate multi-effects suite as a standalone 64-bit application. 
+                Full ASIO/WASAPI support, zero-latency monitoring, and dual-IR loader integration.
+            </p>
+
+            <div class="row g-4 mb-5">
+                <div class="col-md-6">
+                    <div class="card bg-dark border-secondary h-100 p-4 shadow">
+                        <i class="bi bi-windows display-4 text-info mb-3"></i>
+                        <h3>Windows 64-bit</h3>
+                        <p class="text-muted">Standalone & VST3 Included</p>
+                        <button class="btn btn-info fw-bold w-100 mt-auto">DOWNLOAD (.exe)</button>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="card bg-dark border-secondary h-100 p-4 shadow">
+                        <i class="bi bi-apple display-4 text-white mb-3"></i>
+                        <h3>macOS (Silicon/Intel)</h3>
+                        <p class="text-muted">Standalone & AU/VST3</p>
+                        <button class="btn btn-light fw-bold w-100 mt-auto">DOWNLOAD (.dmg)</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="p-4 bg-black border border-warning rounded shadow-sm text-start">
+                <h5 class="text-warning mb-3"><i class="bi bi-gear-fill me-2"></i>Minimum Requirements</h5>
+                <ul class="text-secondary small">
+                    <li>Windows 10/11 64-bit or macOS 11+</li>
+                    <li>Intel Core i5 / Apple M1 or better</li>
+                    <li>8GB RAM</li>
+                    <li>ASIO compatible audio interface (recommended)</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

core/urls.py

@@ -1,7 +1,10 @@
 from django.urls import path
-
-from .views import home
+from . import views
 
 urlpatterns = [
-    path("", home, name="home"),
-]
+    path('', views.index, name='index'),
+    path('artist/<slug:slug>/', views.artist_detail, name='artist_detail'),
+    path('preset/<slug:slug>/', views.preset_detail, name='preset_detail'),
+    path('settings/', views.audio_settings, name='audio_settings'),
+    path('standalone/', views.standalone_download, name='standalone_download'),
+]

core/views.py

@@ -1,25 +1,42 @@
-import os
-import platform
+from django.shortcuts import render, get_object_or_404, redirect
+from .models import Artist, Preset, EffectModule, AudioEngineSettings
 
-from django import get_version as django_version
-from django.shortcuts import render
-from django.utils import timezone
+def index(request):
+    featured_presets = Preset.objects.filter(is_featured=True)[:6]
+    artists = Artist.objects.all()
+    return render(request, 'core/index.html', {
+        'featured_presets': featured_presets,
+        'artists': artists
+    })
 
+def artist_detail(request, slug):
+    artist = get_object_or_404(Artist, slug=slug)
+    presets = artist.presets.all()
+    return render(request, 'core/artist_detail.html', {
+        'artist': artist,
+        'presets': presets
+    })
 
-def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
+def preset_detail(request, slug):
+    preset = get_object_or_404(Preset, slug=slug)
+    steps = preset.steps.all().select_related('module')
+    return render(request, 'core/preset_detail.html', {
+        'preset': preset,
+        'steps': steps
+    })
 
-    context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
-    }
-    return render(request, "core/index.html", context)
+def audio_settings(request):
+    settings, created = AudioEngineSettings.objects.get_or_create(pk=1)
+    if request.method == 'POST':
+        settings.driver_type = request.POST.get('driver_type')
+        settings.buffer_size = int(request.POST.get('buffer_size', 128))
+        settings.sample_rate = int(request.POST.get('sample_rate', 44100))
+        settings.save()
+        return redirect('audio_settings')
+    
+    return render(request, 'core/settings.html', {
+        'settings': settings
+    })
+
+def standalone_download(request):
+    return render(request, 'core/standalone.html')

seed_presets.py

@@ -0,0 +1,66 @@
+from core.models import Artist, EffectModule, Preset, SignalChainStep
+from django.utils.text import slugify
+
+# 1. Create Effect Modules
+modules_data = [
+    ('Noise Gate', 'dynamics', 'bi-shield-shaded'),
+    ('Compressor', 'dynamics', 'bi-input-cursor'),
+    ('Overdrive TS-808', 'drive', 'bi-lightning-charge'),
+    ('High Gain Amp', 'amp', 'bi-speaker'),
+    ('Clean Tube Amp', 'amp', 'bi-speaker'),
+    ('Dual IR Loader', 'utility', 'bi-file-earmark-music'),
+    ('Stereo Chorus', 'modulation', 'bi-water'),
+    ('Classic Flanger', 'modulation', 'bi-wind'),
+    ('Analog Delay', 'delay_reverb', 'bi-hourglass-split'),
+    ('Wah Wah Pedal', 'utility', 'bi-reception-4'),
+]
+
+created_modules = {}
+for name, cat, icon in modules_data:
+    mod, _ = EffectModule.objects.get_or_create(
+        name=name, 
+        defaults={'category': cat, 'icon_class': icon}
+    )
+    created_modules[name] = mod
+
+# 2. Get Artists
+artists = Artist.objects.all()
+
+# 3. Create 5 Presets per Artist
+for artist in artists:
+    for i in range(1, 6):
+        title = f"{artist.name} Signature {i}"
+        slug = slugify(f"{artist.name}-{i}-{title}")
+        
+        preset, created = Preset.objects.get_or_create(
+            artist=artist,
+            slug=slug,
+            defaults={
+                'title': title,
+                'description': f"A signature tone for {artist.name}, optimized for {artist.style} style."
+            }
+        )
+        
+        if created:
+            # Build a typical signal chain
+            # Order: Gate -> Comp -> Wah -> Drive -> Amp -> IR -> Mod -> Delay
+            steps = [
+                ('Noise Gate', 'Threshold: -40dB'),
+                ('Compressor', 'Ratio: 4:1'),
+                ('Wah Wah Pedal', 'Auto-sweep'),
+                ('Overdrive TS-808', 'Drive: 4, Tone: 6'),
+                ('High Gain Amp', 'Gain: 7, Bass: 5, Mid: 6, Treble: 7'),
+                ('Dual IR Loader', 'Cab A: 4x12 SM57, Cab B: 4x12 R121'),
+                ('Stereo Chorus', 'Rate: 0.5Hz, Depth: 40%'),
+                ('Analog Delay', 'Time: 450ms, Feedback: 30%'),
+            ]
+            
+            for idx, (mod_name, settings) in enumerate(steps):
+                SignalChainStep.objects.create(
+                    preset=preset,
+                    module=created_modules[mod_name],
+                    order=idx,
+                    settings_summary=settings
+                )
+
+print("Successfully seeded 5 presets per artist.")

static/css/custom.css

@@ -1,4 +1,144 @@
-/* Custom styles for the application */
-body {
-    font-family: system-ui, -apple-system, sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Oswald:wght@500;700&display=swap');
+
+:root {
+    --bg-dark: #0A0A0B;
+    --card-bg: #161618;
+    --accent-gold: #FFD700;
+    --accent-cyan: #00E5FF;
+    --text-main: #E1E1E1;
+    --text-muted: #A0A0A0;
+    --border-color: #2D2D30;
 }
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+}
+
+h1, h2, h3, h4, .brand-font {
+    font-family: 'Oswald', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* Navbar */
+.navbar {
+    background-color: rgba(10, 10, 11, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.navbar-brand {
+    font-family: 'Oswald', sans-serif;
+    color: var(--accent-gold) !important;
+    font-weight: 700;
+    font-size: 1.5rem;
+}
+
+/* Hero Section */
+.hero-section {
+    padding: 100px 0;
+    background: radial-gradient(circle at center, #1a1a1c 0%, #0A0A0B 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+}
+
+.hero-title {
+    font-size: 4rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 1rem;
+}
+
+.hero-accent {
+    color: var(--accent-gold);
+}
+
+/* Cards */
+.card-tone {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.card-tone:hover {
+    transform: translateY(-5px);
+    border-color: var(--accent-gold);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+
+.card-tone .card-body {
+    padding: 1.5rem;
+}
+
+.card-tone .artist-name {
+    color: var(--accent-gold);
+    margin-bottom: 0.5rem;
+}
+
+/* Signal Chain Widget */
+.signal-chain {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 20px;
+    background: #000;
+    border-radius: 8px;
+    overflow-x: auto;
+}
+
+.module-box {
+    min-width: 120px;
+    padding: 15px;
+    background: var(--card-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 6px;
+    text-align: center;
+    position: relative;
+}
+
+.module-box.active {
+    border-color: var(--accent-cyan);
+    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
+}
+
+.chain-arrow {
+    color: var(--text-muted);
+}
+
+/* Buttons */
+.btn-primary-tone {
+    background-color: var(--accent-gold);
+    color: #000;
+    font-family: 'Oswald', sans-serif;
+    font-weight: 600;
+    border: none;
+    padding: 12px 25px;
+    transition: all 0.2s;
+}
+
+.btn-primary-tone:hover {
+    background-color: #fff;
+    color: #000;
+    transform: scale(1.05);
+}
+
+/* Utility */
+.text-muted {
+    color: var(--text-muted) !important;
+}

staticfiles/css/custom.css

@@ -1,21 +1,144 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Oswald:wght@500;700&display=swap');
 
 :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
+    --bg-dark: #0A0A0B;
+    --card-bg: #161618;
+    --accent-gold: #FFD700;
+    --accent-cyan: #00E5FF;
+    --text-main: #E1E1E1;
+    --text-muted: #A0A0A0;
+    --border-color: #2D2D30;
 }
+
 body {
-    margin: 0;
+    background-color: var(--bg-dark);
+    color: var(--text-main);
     font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
+    line-height: 1.6;
+}
+
+h1, h2, h3, h4, .brand-font {
+    font-family: 'Oswald', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* Navbar */
+.navbar {
+    background-color: rgba(10, 10, 11, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.navbar-brand {
+    font-family: 'Oswald', sans-serif;
+    color: var(--accent-gold) !important;
+    font-weight: 700;
+    font-size: 1.5rem;
+}
+
+/* Hero Section */
+.hero-section {
+    padding: 100px 0;
+    background: radial-gradient(circle at center, #1a1a1c 0%, #0A0A0B 100%);
+    position: relative;
     overflow: hidden;
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+}
+
+.hero-title {
+    font-size: 4rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 1rem;
+}
+
+.hero-accent {
+    color: var(--accent-gold);
+}
+
+/* Cards */
+.card-tone {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.card-tone:hover {
+    transform: translateY(-5px);
+    border-color: var(--accent-gold);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+
+.card-tone .card-body {
+    padding: 1.5rem;
+}
+
+.card-tone .artist-name {
+    color: var(--accent-gold);
+    margin-bottom: 0.5rem;
+}
+
+/* Signal Chain Widget */
+.signal-chain {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 20px;
+    background: #000;
+    border-radius: 8px;
+    overflow-x: auto;
+}
+
+.module-box {
+    min-width: 120px;
+    padding: 15px;
+    background: var(--card-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 6px;
+    text-align: center;
     position: relative;
 }
+
+.module-box.active {
+    border-color: var(--accent-cyan);
+    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
+}
+
+.chain-arrow {
+    color: var(--text-muted);
+}
+
+/* Buttons */
+.btn-primary-tone {
+    background-color: var(--accent-gold);
+    color: #000;
+    font-family: 'Oswald', sans-serif;
+    font-weight: 600;
+    border: none;
+    padding: 12px 25px;
+    transition: all 0.2s;
+}
+
+.btn-primary-tone:hover {
+    background-color: #fff;
+    color: #000;
+    transform: scale(1.05);
+}
+
+/* Utility */
+.text-muted {
+    color: var(--text-muted) !important;
+}