/* =====================================================
   BG Remover Pro — Professional Stylesheet
   Design: Modern Glass · Dark/Light · Premium
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --primary: #7c3aed;
  --primary-light: #8b5cf6;
  --primary-dark: #6d28d9;
  --secondary: #06b6d4;
  --accent: #f59e0b;
  --success: #10b981;
  --danger: #ef4444;

  /* Backgrounds */
  --bg-base: #0a0a14;
  --bg-card: #12121e;
  --bg-elevated: #1a1a2e;
  --bg-glass: rgba(255,255,255,0.04);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Borders */
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #7c3aed, #06b6d4);
  --grad-hero: radial-gradient(ellipse at top, rgba(124,58,237,.25) 0%, transparent 70%);

  /* Misc */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  --shadow-md: 0 8px 30px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
  --shadow-glow: 0 0 40px rgba(124,58,237,.3);
  --font-main: 'Inter', -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --transition: all 0.28s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-main); background:var(--bg-base); color:var(--text-primary); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; transition:var(--transition); }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:var(--font-main); border:none; background:none; }
input { font-family:var(--font-main); }

/* ── UTILS ─────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.gradient-text { background:var(--grad-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.d-none { display:none !important; }
.d-flex { display:flex; }

/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--primary-light); border-radius:3px; }

/* ── NAVBAR ────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,10,20,0.8);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  transition:var(--transition);
}
.nav-container {
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem;
  padding:0 24px; height:70px;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:1.2rem;
  flex-shrink:0;
}
.nav-logo .logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:#fff;
  box-shadow:0 4px 14px rgba(124,58,237,.4);
}
.nav-logo em { color:var(--primary-light); font-style:italic; }
.nav-links { list-style:none; display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-links a {
  padding:7px 14px; border-radius:8px; font-size:.875rem;
  font-weight:500; color:var(--text-secondary); transition:var(--transition);
}
.nav-links a:hover,.nav-links a.active { color:var(--text-primary); background:var(--bg-glass); }
.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:10px;
  background:var(--grad-primary); color:#fff;
  font-weight:600; font-size:.875rem;
  box-shadow:0 4px 18px rgba(124,58,237,.4);
  transition:var(--transition); white-space:nowrap;
  flex-shrink:0;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,58,237,.5); }
.hamburger { display:none; flex-direction:column; gap:5px; padding:4px; margin-left:auto; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text-secondary); border-radius:2px; transition:var(--transition); }

/* ── HERO ──────────────────────────────────────────── */
.hero {
  min-height:100vh;
  background:var(--grad-hero);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:100px 24px 60px;
  position:relative; overflow:hidden;
  text-align:center;
}
.hero-bg-orbs { position:absolute; inset:0; pointer-events:none; }
.orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.35;
  animation:float 8s ease-in-out infinite;
}
.orb-1 { width:500px; height:500px; background:radial-gradient(circle,#7c3aed,transparent); top:-100px; left:-100px; }
.orb-2 { width:400px; height:400px; background:radial-gradient(circle,#06b6d4,transparent); bottom:-80px; right:-80px; animation-delay:-4s; }
.orb-3 { width:280px; height:280px; background:radial-gradient(circle,#f59e0b,transparent); top:40%; left:50%; transform:translateX(-50%); opacity:.15; animation-delay:-2s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

.hero-content { position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.3);
  color:#a78bfa; padding:6px 16px; border-radius:100px;
  font-size:.8rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:24px;
}
.badge-dot { width:8px; height:8px; border-radius:50%; background:#10b981; animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }

.hero-title {
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:800; line-height:1.08;
  letter-spacing:-1px; margin-bottom:20px;
}
.hero-subtitle {
  font-size:1.1rem; color:var(--text-secondary);
  max-width:580px; margin:0 auto 36px; line-height:1.7;
}

.hero-actions { margin-bottom:40px; }
.hero-upload-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 36px; border-radius:14px;
  background:var(--grad-primary); color:#fff;
  font-size:1.05rem; font-weight:700;
  box-shadow:0 8px 30px rgba(124,58,237,.5);
  cursor:pointer; transition:var(--transition);
}
.hero-upload-btn:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(124,58,237,.6); }
.hero-formats { font-size:.8rem; color:var(--text-muted); margin-top:10px; }

/* Before/After Demo */
.before-after-demo {
  display:inline-flex; align-items:center; gap:16px;
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); padding:16px 20px;
  box-shadow:var(--shadow-md);
}
.demo-card {
  position:relative; width:120px; height:120px;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--border);
}
.demo-card img { width:100%; height:100%; object-fit:cover; }
.demo-after { background:repeating-conic-gradient(#2a2a3e 0% 25%, #1a1a2e 0% 50%) 0 0/16px 16px; }
.demo-label {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.7); color:#fff; font-size:.65rem; font-weight:600;
  padding:2px 8px; border-radius:100px; text-transform:uppercase;
  letter-spacing:.05em; white-space:nowrap;
}
.demo-label.after { background:rgba(124,58,237,.8); }
.demo-arrow { color:var(--primary-light); font-size:1.5rem; }

/* Hero Stats */
.hero-stats {
  display:flex; align-items:center; gap:24px;
  flex-wrap:wrap; justify-content:center;
  margin-top:48px; position:relative; z-index:1;
}
.stat-item { text-align:center; }
.stat-item strong { display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--text-primary); }
.stat-item span { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-div { width:1px; height:32px; background:var(--border-strong); }

/* ── SECTIONS SHARED ───────────────────────────────── */
section { padding:80px 0; }
.section-header { text-align:center; margin-bottom:56px; }
.eyebrow {
  display:inline-block; color:var(--primary-light);
  font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:12px;
}
.section-header h2 {
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:800; letter-spacing:-.5px;
  margin-bottom:14px; color:var(--text-primary);
}
.section-header p { font-size:1rem; color:var(--text-secondary); max-width:520px; margin:0 auto; }

/* ── TOOL SECTION ──────────────────────────────────── */
.tool-section { background:var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* Upload Zone */
.upload-zone {
  border:2px dashed rgba(124,58,237,.35);
  border-radius:var(--radius-xl); background:var(--bg-card);
  transition:var(--transition); position:relative; overflow:hidden;
  cursor:pointer;
}
.upload-zone:hover,.upload-zone.drag-over {
  border-color:var(--primary); background:rgba(124,58,237,.05);
  box-shadow:0 0 40px rgba(124,58,237,.15);
}
.upload-zone-inner {
  padding:60px 40px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.upload-icon-wrap {
  width:80px; height:80px; border-radius:50%;
  background:rgba(124,58,237,.1);
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.upload-icon { font-size:2.2rem; color:var(--primary-light); }
.upload-zone h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:700; }
.upload-zone p { color:var(--text-secondary); }
.upload-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:10px; cursor:pointer;
  background:var(--grad-primary); color:#fff;
  font-weight:600; font-size:.95rem;
  box-shadow:0 4px 20px rgba(124,58,237,.4);
  transition:var(--transition);
}
.upload-btn-primary:hover { transform:translateY(-2px); }
.upload-hint { font-size:.78rem; color:var(--text-muted); }

/* URL Input */
.url-input-wrap { width:100%; max-width:480px; margin-top:8px; }
.url-input-wrap>span { font-size:.8rem; color:var(--text-muted); }
.url-input-row {
  display:flex; gap:8px; margin-top:6px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-strong);
  border-radius:10px; overflow:hidden; padding:4px 4px 4px 12px;
}
.url-input-row input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text-primary); font-size:.88rem;
}
.url-submit-btn {
  padding:8px 16px; border-radius:8px;
  background:var(--primary); color:#fff; font-size:.9rem;
  transition:var(--transition);
}
.url-submit-btn:hover { background:var(--primary-dark); }

/* Processing State */
.processing-state {
  padding:60px 20px; text-align:center;
  background:var(--bg-card); border-radius:var(--radius-xl);
  border:1px solid var(--border);
}
.ai-scanner {
  position:relative; width:280px; height:280px;
  margin:0 auto 32px; border-radius:var(--radius-lg); overflow:hidden;
}
.ai-scanner img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); }
.scanner-beam {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
  animation:scan 1.5s ease-in-out infinite;
}
@keyframes scan { 0%{top:0} 100%{top:calc(100% - 4px)} }
.processing-info h3 { font-family:var(--font-display); font-size:1.3rem; margin-bottom:8px; }
.processing-info p { color:var(--text-secondary); margin-bottom:20px; }
.progress-wrap {
  width:320px; height:6px; background:rgba(255,255,255,.1);
  border-radius:3px; margin:0 auto 10px; overflow:hidden;
}
.progress-bar {
  height:100%; border-radius:3px;
  background:var(--grad-primary);
  transition:width .4s ease;
  width:0;
}
#progressPct { font-size:.82rem; color:var(--primary-light); }

/* Result State */
.result-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.result-header h3 {
  font-family:var(--font-display); font-size:1.4rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.result-header h3::before { content:'✓'; color:var(--success); }
.new-image-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:9px;
  border:1px solid var(--border-strong); color:var(--text-secondary);
  font-size:.875rem; font-weight:500; transition:var(--transition);
}
.new-image-btn:hover { border-color:var(--primary-light); color:var(--primary-light); }

.result-layout {
  display:grid; grid-template-columns:1fr 360px;
  gap:24px; align-items:start;
}

/* Comparison Slider */
.img-compare {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; cursor:col-resize; user-select:none;
  background:repeating-conic-gradient(#1a1a2e 0% 25%, #12121e 0% 50%) 0 0/20px 20px;
  border:1px solid var(--border-strong);
}
.compare-before,.compare-after {
  position:absolute; inset:0;
}
.compare-after {
  background:repeating-conic-gradient(#1a1a2e 0% 25%, #12121e 0% 50%) 0 0/20px 20px;
}
.compare-after img,.compare-before img {
  width:100%; height:100%; object-fit:contain;
}
.compare-before { clip-path:inset(0 50% 0 0); }
.compare-handle {
  position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%); width:40px; cursor:col-resize;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.handle-line { position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.9); }
.handle-circle {
  position:relative; z-index:1;
  width:36px; height:36px; border-radius:50%;
  background:#fff; color:var(--bg-base);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.compare-labels {
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;
}

/* Control Cards */
.result-controls { display:flex; flex-direction:column; gap:16px; }
.control-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px;
}
.control-card h4 {
  font-size:.88rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-secondary);
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
}

/* Download Buttons */
.download-options { display:flex; flex-direction:column; gap:10px; }
.dl-btn {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); transition:var(--transition);
  color:var(--text-primary); width:100%;
}
.dl-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.dl-hd:hover { border-color:#10b981; background:rgba(16,185,129,.07); }
.dl-fullhd:hover { border-color:#6366f1; background:rgba(99,102,241,.07); }
.dl-original:hover { border-color:var(--accent); background:rgba(245,158,11,.07); }
.dl-icon {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.dl-hd .dl-icon { background:rgba(16,185,129,.12); color:#10b981; }
.dl-fullhd .dl-icon { background:rgba(99,102,241,.12); color:#6366f1; }
.dl-original .dl-icon { background:rgba(245,158,11,.12); color:var(--accent); }
.dl-info { flex:1; text-align:left; }
.dl-info strong { display:block; font-size:.88rem; font-weight:600; }
.dl-info span { font-size:.75rem; color:var(--text-muted); }
.dl-arrow { color:var(--text-muted); font-size:.85rem; }
.dl-crown { color:var(--accent); font-size:.85rem; }

/* Background Controls */
.bg-presets { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-bottom:12px; }
.bg-preset {
  width:100%; aspect-ratio:1; border-radius:8px;
  border:2px solid transparent; transition:var(--transition); cursor:pointer;
}
.bg-preset.active { border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,.3); }
.bg-preset:hover { transform:scale(1.1); }
.checker-mini {
  width:100%; height:100%; border-radius:6px;
  background:repeating-conic-gradient(#4a4a6a 0% 25%, #2a2a4a 0% 50%) 0 0/8px 8px;
}
.bg-custom-row {
  display:flex; gap:10px; margin-bottom:12px;
}
.custom-color-wrap,.custom-image-wrap {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
}
.custom-color-wrap label,.custom-image-wrap label {
  font-size:.72rem; color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; gap:4px;
  padding:7px 12px; border:1px solid var(--border-strong);
  border-radius:8px; width:100%; justify-content:center;
  transition:var(--transition);
}
.custom-color-wrap label:hover,.custom-image-wrap label:hover {
  border-color:var(--primary-light); color:var(--primary-light);
}
input[type="color"] {
  width:100%; height:36px; border:none; border-radius:6px;
  cursor:pointer; background:none; padding:2px;
}

.bg-gallery-title { font-size:.72rem; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em; }
.bg-gallery { display:flex; gap:8px; }
.bg-gallery-item {
  width:60px; height:60px; border-radius:8px; object-fit:cover;
  cursor:pointer; border:2px solid transparent;
  transition:var(--transition);
}
.bg-gallery-item:hover { border-color:var(--primary); transform:scale(1.05); }
.bg-gallery-add {
  width:60px; height:60px; border-radius:8px;
  border:1px dashed var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:.85rem; cursor:pointer;
  transition:var(--transition);
}
.bg-gallery-add:hover { border-color:var(--primary); color:var(--primary); }

.open-editor-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px; border-radius:var(--radius-md);
  background:var(--grad-primary); color:#fff;
  font-weight:700; font-size:.9rem; transition:var(--transition);
  box-shadow:0 4px 20px rgba(124,58,237,.4);
}
.open-editor-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,58,237,.5); }

/* ── FEATURES ──────────────────────────────────────── */
.features-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.feature-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  transition:var(--transition);
}
.feature-card:hover { transform:translateY(-5px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.feature-icon {
  width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:16px;
}
.feature-card h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.feature-card p { font-size:.875rem; color:var(--text-secondary); line-height:1.65; }

/* ── HOW IT WORKS ──────────────────────────────────── */
.how-section { background:var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.steps-grid {
  display:flex; align-items:center; gap:0;
  flex-wrap:wrap; justify-content:center;
}
.step-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px 24px;
  text-align:center; flex:1; min-width:180px; max-width:240px;
  transition:var(--transition); position:relative;
}
.step-card:hover { border-color:var(--primary-light); transform:translateY(-4px); }
.step-num {
  position:absolute; top:16px; right:16px;
  font-family:var(--font-display); font-size:2.5rem; font-weight:900;
  color:rgba(255,255,255,.04); line-height:1;
}
.step-icon {
  width:56px; height:56px; border-radius:14px;
  background:rgba(124,58,237,.12); color:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin:0 auto 14px;
}
.step-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:8px; }
.step-card p { font-size:.83rem; color:var(--text-secondary); }
.step-connector { color:var(--text-muted); font-size:1.2rem; padding:0 8px; }

/* ── USE CASES ─────────────────────────────────────── */
.usecases-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.usecase-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px;
  text-align:center; transition:var(--transition);
}
.usecase-card:hover { border-color:rgba(124,58,237,.4); transform:translateY(-3px); }
.usecase-img { font-size:2.8rem; margin-bottom:12px; }
.usecase-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:6px; }
.usecase-card p { font-size:.83rem; color:var(--text-secondary); }

/* ── FAQ ───────────────────────────────────────────── */
.faq-grid { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.faq-q {
  padding:16px 20px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-weight:600; font-size:.93rem;
  transition:var(--transition); user-select:none;
}
.faq-q:hover { background:rgba(124,58,237,.05); }
.faq-arrow { color:var(--primary-light); font-size:.85rem; transition:var(--transition); flex-shrink:0; }
.faq-q.open .faq-arrow { transform:rotate(180deg); }
.faq-a { display:none; padding:0 20px 16px; font-size:.875rem; color:var(--text-secondary); line-height:1.7; border-top:1px solid var(--border); }
.faq-a.show { display:block; }

/* ── CTA ───────────────────────────────────────────── */
.cta-section { padding:80px 0; }
.cta-box {
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.1));
  border:1px solid rgba(124,58,237,.25);
  border-radius:var(--radius-xl); padding:64px 48px;
  text-align:center; position:relative; overflow:hidden;
}
.cta-orb-1,.cta-orb-2 { position:absolute; border-radius:50%; filter:blur(60px); opacity:.3; }
.cta-orb-1 { width:300px; height:300px; background:var(--primary); top:-100px; right:-50px; }
.cta-orb-2 { width:200px; height:200px; background:var(--secondary); bottom:-60px; left:-30px; }
.cta-box h2 { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; margin-bottom:12px; position:relative; }
.cta-box p { color:var(--text-secondary); margin-bottom:32px; position:relative; }
.cta-upload-btn {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:16px 40px; border-radius:14px;
  background:#fff; color:#0a0a14;
  font-size:1rem; font-weight:700;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
  transition:var(--transition); position:relative;
}
.cta-upload-btn:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.4); }

/* ── FOOTER ────────────────────────────────────────── */
.footer { background:var(--bg-elevated); border-top:1px solid var(--border); padding:64px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand .nav-logo { margin-bottom:16px; }
.footer-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.1rem; }
.footer-brand p { font-size:.85rem; color:var(--text-secondary); line-height:1.65; margin-bottom:16px; }
.social-links { display:flex; gap:10px; }
.social-links a {
  width:36px; height:36px; border-radius:9px;
  background:var(--bg-glass); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); font-size:.9rem; transition:var(--transition);
}
.social-links a:hover { color:var(--primary-light); border-color:var(--primary-light); }
.footer-links h5 { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:16px; }
.footer-links ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:.875rem; color:var(--text-secondary); transition:var(--transition); }
.footer-links a:hover { color:var(--primary-light); }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom p { font-size:.8rem; color:var(--text-muted); }
.footer-badges { display:flex; gap:16px; flex-wrap:wrap; }
.footer-badges span { font-size:.75rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; }
.footer-badges i { color:var(--success); }

/* ── EDITOR PAGE ───────────────────────────────────── */
.editor-page { padding-top:70px; min-height:100vh; background:var(--bg-base); }
.editor-layout { display:grid; grid-template-columns:280px 1fr 280px; height:calc(100vh - 70px); overflow:hidden; }
.editor-sidebar {
  background:var(--bg-card); border-right:1px solid var(--border);
  overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:16px;
}
.editor-main {
  background:repeating-conic-gradient(#1a1a2e 0% 25%, #12121e 0% 50%) 0 0/24px 24px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.editor-canvas-wrap {
  position:relative; max-width:100%; max-height:100%;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}
#editorCanvas {
  max-width:100%; max-height:calc(100vh - 140px);
  display:block;
}
.editor-right-panel {
  background:var(--bg-card); border-left:1px solid var(--border);
  overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:16px;
}

.editor-section-title {
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
  margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

/* Editor tools */
.editor-tools { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.editor-tool-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; border-radius:10px; border:1px solid var(--border);
  color:var(--text-secondary); font-size:.65rem; transition:var(--transition);
  background:var(--bg-base);
}
.editor-tool-btn i { font-size:1rem; }
.editor-tool-btn:hover,.editor-tool-btn.active { border-color:var(--primary-light); color:var(--primary-light); background:rgba(124,58,237,.08); }

/* Sliders */
.editor-slider-group { margin-bottom:14px; }
.editor-slider-group label {
  display:flex; justify-content:space-between;
  font-size:.78rem; color:var(--text-secondary); margin-bottom:6px;
}
.editor-slider-group label span { color:var(--primary-light); font-weight:600; }
input[type="range"].editor-slider {
  width:100%; -webkit-appearance:none; height:4px;
  background:rgba(255,255,255,.1); border-radius:2px; outline:none;
}
input[type="range"].editor-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--grad-primary); cursor:pointer;
  box-shadow:0 2px 8px rgba(124,58,237,.5);
}

/* Editor download btns */
.editor-dl-btns { display:flex; flex-direction:column; gap:8px; }
.editor-dl-btn {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px;
  border:1px solid var(--border-strong); font-size:.82rem; font-weight:600;
  color:var(--text-primary); transition:var(--transition);
}
.editor-dl-btn.primary { background:var(--grad-primary); border-color:transparent; color:#fff; }
.editor-dl-btn.primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,58,237,.4); }
.editor-dl-btn:not(.primary):hover { border-color:var(--primary-light); color:var(--primary-light); }

/* ── RESPONSIVE ────────────────────────────────────── */
@media(max-width:1100px) {
  .result-layout { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .editor-layout { grid-template-columns:240px 1fr 240px; }
}
@media(max-width:900px) {
  .usecases-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid { flex-wrap:wrap; }
  .step-connector { display:none; }
  .step-card { max-width:100%; }
}
@media(max-width:768px) {
  .nav-links { display:none; position:fixed; top:70px; left:0; right:0; background:rgba(10,10,20,.98); backdrop-filter:blur(20px); flex-direction:column; padding:16px; border-bottom:1px solid var(--border); z-index:999; }
  .nav-links.open { display:flex; }
  .nav-links li a { padding:10px 16px; display:block; }
  .nav-cta { display:none; }
  .hamburger { display:flex; }
  .hero-title { font-size:2rem; }
  .features-grid { grid-template-columns:1fr; }
  .usecases-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .before-after-demo { flex-direction:column; }
  .demo-arrow { transform:rotate(90deg); }
  .editor-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; height:auto; }
  .editor-sidebar,.editor-right-panel { max-height:300px; }
  .cta-box { padding:40px 24px; }
}
@media(max-width:480px) {
  .hero { padding:90px 16px 50px; }
  .upload-zone-inner { padding:40px 20px; }
  .bg-presets { grid-template-columns:repeat(4,1fr); }
}