diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a1b6b4a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,237 @@
+// State
+let currentSlideIndex = 0;
+let presentationSlides = [];
+
+// Demo presentation data
+const demoSlides = [
+  {
+    title: "AI Video Analytics — B2B Product",
+    bullets: ["Transforming video data into actionable business insights", "Powered by advanced computer vision and machine learning", "Built for enterprise-scale deployments"]
+  },
+  {
+    title: "Business Problem",
+    bullets: ["Organizations generate 1000s of hours of video footage daily", "Manual review is time-consuming and error-prone", "Critical insights remain hidden in unstructured data", "Security and operational teams lack real-time visibility"]
+  },
+  {
+    title: "Our Solution",
+    bullets: ["AI-powered video analytics platform", "Real-time object detection and behavior analysis", "Automated alerting and reporting", "Seamless integration with existing camera infrastructure"]
+  },
+  {
+    title: "How It Works",
+    bullets: ["Connect existing IP cameras to our platform", "AI models process video streams in real-time", "Detect anomalies, track objects, recognize patterns", "Dashboard provides instant insights and alerts"]
+  },
+  {
+    title: "Business Benefits",
+    bullets: ["Reduce manual monitoring costs by 70%", "Faster incident response time (from hours to seconds)", "Data-driven decision making", "Scalable from 10 to 10,000+ cameras"]
+  },
+  {
+    title: "Next Steps",
+    bullets: ["Schedule a live demo of the platform", "Discuss your specific use cases", "Pilot program: 30-day free trial", "ROI analysis for your organization"]
+  }
+];
+
+// Navigation
+function navigateTo(page) {
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
+  
+  document.getElementById('page-' + page).classList.add('active');
+  const navLink = document.querySelector('.nav-link[data-page="' + page + '"]');
+  if (navLink) navLink.classList.add('active');
+  
+  window.scrollTo(0, 0);
+}
+
+// Form submission
+document.getElementById('create-form').addEventListener('submit', function(e) {
+  e.preventDefault();
+  
+  const topic = document.getElementById('topic').value;
+  const audience = document.querySelector('input[name="audience"]:checked').value;
+  const style = document.querySelector('input[name="style"]:checked').value;
+  const slides = document.querySelector('input[name="slides"]:checked').value;
+  
+  // Show loading
+  document.getElementById('loading').classList.add('active');
+  
+  // Simulate AI generation (2 seconds)
+  setTimeout(function() {
+    document.getElementById('loading').classList.remove('active');
+    
+    // Use demo slides (in real app, this would be AI-generated)
+    presentationSlides = demoSlides.slice(0, Math.min(slides, demoSlides.length));
+    currentSlideIndex = 0;
+    
+    // Navigate to editor
+    navigateTo('editor');
+    renderEditor();
+  }, 1500);
+});
+
+// Render editor
+function renderEditor() {
+  renderThumbnails();
+  renderSlidePreview();
+  updateSlideCounter();
+}
+
+// Render thumbnails
+function renderThumbnails() {
+  const container = document.getElementById('slide-thumbnails');
+  container.innerHTML = presentationSlides.map(function(slide, index) {
+    return '<div class="thumbnail' + (index === currentSlideIndex ? ' active' : '') + '" onclick="goToSlide(' + index + ')">' +
+      '<div class="thumbnail-number">Slide ' + (index + 1) + '</div>' +
+      '<div class="thumbnail-title">' + escapeHtml(slide.title) + '</div>' +
+    '</div>';
+  }).join('');
+}
+
+// Render slide preview
+function renderSlidePreview() {
+  const container = document.getElementById('slide-preview');
+  const slide = presentationSlides[currentSlideIndex];
+  
+  container.innerHTML = '<div class="slide-content">' +
+    '<h2>' + escapeHtml(slide.title) + '</h2>' +
+    '<ul>' + slide.bullets.map(function(bullet) {
+      return '<li>' + escapeHtml(bullet) + '</li>';
+    }).join('') + '</ul>' +
+  '</div>';
+}
+
+// Update counter
+function updateSlideCounter() {
+  document.getElementById('slide-counter').textContent = (currentSlideIndex + 1) + ' / ' + presentationSlides.length;
+}
+
+// Navigation
+function goToSlide(index) {
+  if (index >= 0 && index < presentationSlides.length) {
+    currentSlideIndex = index;
+    renderThumbnails();
+    renderSlidePreview();
+    updateSlideCounter();
+  }
+}
+
+function prevSlide() {
+  goToSlide(currentSlideIndex - 1);
+}
+
+function nextSlide() {
+  goToSlide(currentSlideIndex + 1);
+}
+
+// Editor actions
+function editSlide() {
+  const slide = presentationSlides[currentSlideIndex];
+  const newTitle = prompt('Edit slide title:', slide.title);
+  if (newTitle && newTitle.trim()) {
+    slide.title = newTitle.trim();
+    renderEditor();
+  }
+}
+
+function regenerateSlide() {
+  // Simulate regeneration
+  const loading = document.getElementById('loading');
+  loading.classList.add('active');
+  loading.querySelector('p').textContent = 'Regenerating slide...';
+  
+  setTimeout(function() {
+    loading.classList.remove('active');
+    loading.querySelector('p').textContent = 'Generating your presentation...';
+    
+    // For demo, just shuffle bullets slightly
+    const slide = presentationSlides[currentSlideIndex];
+    if (slide.bullets.length > 1) {
+      const temp = slide.bullets[0];
+      slide.bullets[0] = slide.bullets[1];
+      slide.bullets[1] = temp;
+      renderSlidePreview();
+      renderThumbnails();
+    }
+  }, 1000);
+}
+
+function addSlide() {
+  const newSlide = {
+    title: 'New Slide',
+    bullets: ['Add your content here', 'Click Edit to modify']
+  };
+  presentationSlides.splice(currentSlideIndex + 1, 0, newSlide);
+  currentSlideIndex++;
+  renderEditor();
+}
+
+function deleteSlide() {
+  if (presentationSlides.length <= 1) {
+    alert('Cannot delete the last slide');
+    return;
+  }
+  
+  if (confirm('Delete this slide?')) {
+    presentationSlides.splice(currentSlideIndex, 1);
+    if (currentSlideIndex >= presentationSlides.length) {
+      currentSlideIndex = presentationSlides.length - 1;
+    }
+    renderEditor();
+  }
+}
+
+// Download presentation
+function downloadPresentation() {
+  if (!window.PptxGenJS) {
+    alert('PPTX library not loaded');
+    return;
+  }
+  
+  const pptx = new PptxGenJS();
+  pptx.defineLayout({ name: 'W', width: 13.33, height: 7.5 });
+  pptx.layout = 'W';
+  
+  presentationSlides.forEach(function(slide) {
+    const sl = pptx.addSlide();
+    sl.background = { color: 'FFFFFF' };
+    sl.addText(slide.title, { 
+      x: 0.7, 
+      y: 0.5, 
+      w: 12, 
+      h: 1.2, 
+      fontSize: 32, 
+      bold: true, 
+      color: '1A1A1A' 
+    });
+    
+    if (slide.bullets && slide.bullets.length > 0) {
+      sl.addText(slide.bullets.map(function(bullet) {
+        return { text: bullet, options: { bullet: true, breakLine: true } };
+      }), {
+        x: 0.9,
+        y: 2.0,
+        w: 11.5,
+        h: 4.8,
+        fontSize: 18,
+        color: '495057',
+        lineSpacingMultiple: 1.4
+      });
+    }
+  });
+  
+  pptx.writeFile({ fileName: 'AI-Presentation.pptx' });
+}
+
+// Utility
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// Keyboard navigation
+document.addEventListener('keydown', function(e) {
+  if (document.getElementById('page-editor').classList.contains('active')) {
+    if (e.key === 'ArrowRight') nextSlide();
+    if (e.key === 'ArrowLeft') prevSlide();
+  }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..05c2892
--- /dev/null
+++ b/style.css
@@ -0,0 +1,594 @@
+/* CSS Variables - Modern AI SaaS Theme */
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #f1f3f5;
+  --text-primary: #1a1a1a;
+  --text-secondary: #495057;
+  --text-muted: #868e96;
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --accent-light: #eef2ff;
+  --danger: #ef4444;
+  --danger-hover: #dc2626;
+  --border: #e9ecef;
+  --shadow: 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-lg: 0 10px 40px rgba(0,0,0,0.1);
+  --radius: 12px;
+  --radius-sm: 8px;
+}
+
+/* Reset & Base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.container-narrow {
+  max-width: 680px;
+}
+
+/* Header */
+.header {
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border);
+  padding: 16px 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  font-size: 18px;
+}
+
+.logo-icon {
+  font-size: 24px;
+}
+
+.logo-text {
+  color: var(--text-primary);
+}
+
+.nav {
+  display: flex;
+  gap: 24px;
+}
+
+.nav-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 8px 0;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* Main Content */
+.main {
+  min-height: calc(100vh - 70px);
+}
+
+.page {
+  display: none;
+  padding: 60px 0;
+}
+
+.page.active {
+  display: block;
+}
+
+/* Hero Section */
+.hero {
+  text-align: center;
+  padding: 80px 0;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  font-size: clamp(36px, 5vw, 56px);
+  font-weight: 700;
+  line-height: 1.1;
+  margin-bottom: 20px;
+  color: var(--text-primary);
+}
+
+.hero-subtitle {
+  font-size: clamp(18px, 2vw, 22px);
+  color: var(--text-secondary);
+  margin-bottom: 40px;
+  line-height: 1.5;
+}
+
+/* Features */
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 32px;
+  margin-top: 60px;
+}
+
+.feature-card {
+  background: var(--bg-secondary);
+  padding: 32px;
+  border-radius: var(--radius);
+  text-align: center;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.feature-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.feature-card h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.feature-card p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+}
+
+.btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+  background: var(--border);
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+}
+
+.btn-danger:hover {
+  background: var(--danger-hover);
+}
+
+.btn-lg {
+  padding: 16px 32px;
+  font-size: 18px;
+}
+
+.btn-sm {
+  padding: 8px 16px;
+  font-size: 14px;
+}
+
+.btn-block {
+  width: 100%;
+}
+
+/* Forms */
+.form-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 40px;
+  box-shadow: var(--shadow);
+}
+
+.form-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 32px;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 24px;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 10px;
+  color: var(--text-primary);
+}
+
+.form-group textarea {
+  width: 100%;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 16px;
+  font-family: inherit;
+  resize: vertical;
+  transition: border-color 0.2s;
+}
+
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* Radio Groups */
+.radio-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.radio-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 20px;
+  background: var(--bg-secondary);
+  border: 2px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.radio-card:hover {
+  border-color: var(--accent);
+  background: var(--accent-light);
+}
+
+.radio-card input[type="radio"] {
+  display: none;
+}
+
+.radio-card:has(input:checked) {
+  border-color: var(--accent);
+  background: var(--accent-light);
+  color: var(--accent);
+}
+
+/* Slide Selector */
+.slide-selector {
+  display: flex;
+  gap: 12px;
+}
+
+.slide-option {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border: 2px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 600;
+  font-size: 18px;
+}
+
+.slide-option:hover {
+  border-color: var(--accent);
+}
+
+.slide-option input[type="radio"] {
+  display: none;
+}
+
+.slide-option:has(input:checked) {
+  border-color: var(--accent);
+  background: var(--accent-light);
+  color: var(--accent);
+}
+
+/* Editor Layout */
+.editor-container {
+  display: grid;
+  grid-template-columns: 280px 1fr 300px;
+  gap: 24px;
+  height: calc(100vh - 130px);
+  min-height: 600px;
+}
+
+.editor-sidebar,
+.editor-settings {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header,
+.settings-header {
+  padding: 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h3,
+.settings-header h3 {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.slide-thumbnails {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.thumbnail {
+  background: var(--bg-primary);
+  border: 2px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.thumbnail:hover {
+  border-color: var(--accent);
+}
+
+.thumbnail.active {
+  border-color: var(--accent);
+  background: var(--accent-light);
+}
+
+.thumbnail-number {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.thumbnail-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Slide Preview */
+.editor-main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.slide-preview-container {
+  flex: 1;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  overflow: auto;
+}
+
+.slide-preview {
+  background: white;
+  width: 100%;
+  max-width: 900px;
+  aspect-ratio: 16/9;
+  border-radius: 8px;
+  box-shadow: var(--shadow-lg);
+  padding: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.slide-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.slide-content h2 {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 24px;
+  line-height: 1.2;
+}
+
+.slide-content ul {
+  list-style: none;
+}
+
+.slide-content li {
+  font-size: 20px;
+  color: var(--text-secondary);
+  padding: 12px 0;
+  padding-left: 28px;
+  position: relative;
+  line-height: 1.5;
+}
+
+.slide-content li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: var(--accent);
+  font-size: 24px;
+  line-height: 1.4;
+}
+
+.editor-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  padding: 16px;
+}
+
+.slide-counter {
+  font-weight: 600;
+  color: var(--text-secondary);
+  min-width: 80px;
+  text-align: center;
+}
+
+/* Settings Panel */
+.settings-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 8px 0;
+}
+
+/* Loading Overlay */
+.loading-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(255,255,255,0.95);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-overlay.active {
+  display: flex;
+}
+
+.loading-content {
+  text-align: center;
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 20px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-content p {
+  font-size: 18px;
+  color: var(--text-secondary);
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .editor-container {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .editor-sidebar,
+  .editor-settings {
+    display: none;
+  }
+
+  .slide-preview-container {
+    min-height: 400px;
+  }
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .nav {
+    gap: 16px;
+  }
+
+  .hero {
+    padding: 40px 0;
+  }
+
+  .features {
+    grid-template-columns: 1fr;
+  }
+
+  .form-card {
+    padding: 24px;
+  }
+
+  .radio-group {
+    grid-template-columns: 1fr;
+  }
+}