:root{
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  --font-heading:'Outfit',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  --bg-primary:#0a0c13;
  --bg-secondary:#121622;
  --bg-tertiary:#1a2030;
  --bg-card:rgba(22,28,44,0.75);
  --bg-glass:rgba(22,28,44,0.65);
  --border-subtle:rgba(255,255,255,0.08);
  --border-active:rgba(99,102,241,0.5);
  --text-primary:#f8fafc;
  --text-secondary:#94a3b8;
  --text-muted:#64748b;
  --accent-primary:#6366f1;
  --accent-primary-hover:#4f46e5;
  --accent-secondary:#06b6d4;
  --accent-gradient:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
  --accent-gradient-glow:linear-gradient(135deg,rgba(99,102,241,0.3) 0%,rgba(139,92,246,0.3) 50%,rgba(236,72,153,0.3) 100%);
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.5);
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-full:9999px;
  --transition-fast:0.18s cubic-bezier(0.16,1,0.3,1);
  --transition-smooth:0.3s cubic-bezier(0.16,1,0.3,1);
}

[data-theme="light"]{
  --bg-primary:#f8fafc;
  --bg-secondary:#ffffff;
  --bg-tertiary:#f1f5f9;
  --bg-card:rgba(255,255,255,0.85);
  --bg-glass:rgba(255,255,255,0.8);
  --border-subtle:rgba(0,0,0,0.08);
  --border-active:rgba(99,102,241,0.6);
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-muted:#94a3b8;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.12);
}

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  background-color:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  transition:background-color var(--transition-smooth),color var(--transition-smooth);
}

img,video,canvas{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color var(--transition-fast);
}

button,input,select,textarea{
  font-family:inherit;
  font-size:inherit;
  border:none;
  outline:none;
  background:none;
}

button{
  cursor:pointer;
}

.container{
  width:100%;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}

/* Header & Navbar */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background-color:rgba(10,12,19,0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-subtle);
  transition:background-color var(--transition-smooth),border-color var(--transition-smooth);
}

[data-theme="light"] .site-header{
  background-color:rgba(248,250,252,0.88);
}

.nav-wrapper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}

.brand-logo{
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:-0.02em;
}

.logo-icon-svg{
  width:36px;
  height:36px;
  flex-shrink:0;
}

.logo-gradient-text{
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:1.75rem;
  list-style:none;
}

.nav-item{
  position:relative;
}

.nav-link{
  font-size:0.925rem;
  font-weight:500;
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.5rem 0.25rem;
  transition:color var(--transition-fast);
}

.nav-link:hover,.nav-link:focus-visible{
  color:var(--text-primary);
}

.dropdown-arrow{
  width:14px;
  height:14px;
  transition:transform var(--transition-fast);
}

.nav-item.has-dropdown:hover .dropdown-arrow,
.nav-item.has-dropdown:focus-within .dropdown-arrow{
  transform:rotate(180deg);
}

/* Dropdown strictly top: 100% */
.dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(4px);
  min-width:380px;
  background-color:var(--bg-secondary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:1rem;
  display:none;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);
  z-index:100;
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu{
  display:block;
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.dropdown-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0.75rem;
}

.dropdown-card{
  display:flex;
  flex-direction:column;
  padding:0.75rem;
  border-radius:var(--radius-sm);
  background:var(--bg-tertiary);
  border:1px solid transparent;
  transition:all var(--transition-fast);
}

.dropdown-card:hover{
  background:rgba(99,102,241,0.12);
  border-color:var(--border-active);
  transform:translateY(-2px);
}

.dropdown-card-title{
  font-weight:600;
  font-size:0.875rem;
  color:var(--text-primary);
  margin-bottom:0.25rem;
}

.dropdown-card-desc{
  font-size:0.75rem;
  color:var(--text-muted);
  line-height:1.3;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.theme-toggle-btn{
  width:40px;
  height:40px;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-tertiary);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
  transition:all var(--transition-fast);
}

.theme-toggle-btn:hover{
  background:var(--accent-primary);
  color:#ffffff;
  border-color:var(--accent-primary);
}

.theme-toggle-btn svg{
  width:20px;
  height:20px;
}

[data-theme="dark"] .icon-moon{display:none;}
[data-theme="dark"] .icon-sun{display:block;}
[data-theme="light"] .icon-sun{display:none;}
[data-theme="light"] .icon-moon{display:block;}

.mobile-menu-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--bg-tertiary);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
  align-items:center;
  justify-content:center;
}

/* Mobile Nav Drawer */
.mobile-nav-drawer{
  position:fixed;
  top:72px;
  left:0;
  width:100%;
  height:calc(100vh - 72px);
  background:var(--bg-secondary);
  padding:1.5rem;
  display:none;
  flex-direction:column;
  gap:1rem;
  overflow-y:auto;
  z-index:999;
}

.mobile-nav-drawer.open{
  display:flex;
}

.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:1rem;
  list-style:none;
}

.mobile-dropdown-links{
  padding-left:1rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  margin-top:0.5rem;
}

/* Breadcrumb Navigation */
.breadcrumb-nav{
  padding:1rem 0;
  font-size:0.85rem;
}

.breadcrumb-list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.5rem;
  list-style:none;
  color:var(--text-muted);
}

.breadcrumb-item a{
  color:var(--text-secondary);
}

.breadcrumb-item a:hover{
  color:var(--accent-primary);
}

.breadcrumb-separator{
  opacity:0.5;
  font-size:0.75rem;
}

.breadcrumb-item.active{
  color:var(--text-primary);
  font-weight:600;
}

/* Hero Section */
.hero-section{
  padding:2.5rem 0 3.5rem;
  text-align:center;
  position:relative;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.35rem 1rem;
  border-radius:var(--radius-full);
  background:rgba(99,102,241,0.12);
  border:1px solid var(--border-active);
  font-size:0.825rem;
  font-weight:600;
  color:var(--accent-secondary);
  margin-bottom:1.25rem;
}

.hero-badge-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-secondary);
  box-shadow:0 0 10px var(--accent-secondary);
  animation:pulseDot 2s infinite;
}

@keyframes pulseDot{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.4;transform:scale(0.8);}
}

.hero-title{
  font-family:var(--font-heading);
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.03em;
  margin-bottom:1.25rem;
}

.hero-description{
  font-size:clamp(1rem,2vw,1.2rem);
  color:var(--text-secondary);
  max-width:760px;
  margin:0 auto 2rem;
  line-height:1.6;
}

.hero-stats{
  display:flex;
  justify-content:center;
  gap:2.5rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}

.hero-stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-stat-val{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-primary);
}

.hero-stat-lbl{
  font-size:0.8rem;
  color:var(--text-muted);
}

/* Studio Application Workspace */
.studio-section{
  padding:1rem 0 4rem;
}

.studio-container{
  background:var(--bg-secondary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Studio Header / Action Bar */
.studio-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.85rem 1.25rem;
  background:var(--bg-tertiary);
  border-bottom:1px solid var(--border-subtle);
  flex-wrap:wrap;
  gap:0.75rem;
}

.studio-title-group{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.studio-app-badge{
  background:var(--accent-gradient);
  color:#fff;
  font-size:0.75rem;
  font-weight:700;
  padding:0.25rem 0.6rem;
  border-radius:var(--radius-sm);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.studio-title-text{
  font-weight:700;
  font-size:1.05rem;
}

.studio-actions-group{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.55rem 1.15rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:0.875rem;
  transition:all var(--transition-fast);
  white-space:nowrap;
}

.btn-sm{
  padding:0.4rem 0.8rem;
  font-size:0.8rem;
}

.btn-secondary{
  background:var(--bg-primary);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
}

.btn-secondary:hover{
  background:var(--bg-card);
  border-color:var(--border-active);
}

.btn-primary{
  background:var(--accent-gradient);
  color:#ffffff;
  box-shadow:0 4px 14px rgba(99,102,241,0.4);
}

.btn-primary:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(99,102,241,0.5);
}

.btn-danger-outline{
  background:transparent;
  color:var(--danger);
  border:1px solid rgba(239,68,68,0.3);
}

.btn-danger-outline:hover{
  background:rgba(239,68,68,0.1);
  border-color:var(--danger);
}

.btn svg{
  width:16px;
  height:16px;
}

/* Studio Layout (Sidebar + Canvas + Inspector) */
.studio-workspace{
  display:grid;
  grid-template-columns:320px 1fr 300px;
  min-height:580px;
  background:var(--bg-secondary);
}

@media(max-width:1100px){
  .studio-workspace{
    grid-template-columns:280px 1fr;
  }
  .studio-inspector-panel{
    grid-column:1 / -1;
  }
}

@media(max-width:768px){
  .studio-workspace{
    grid-template-columns:1fr;
  }
}

/* Left Sidebar Controls */
.studio-sidebar{
  background:var(--bg-secondary);
  border-right:1px solid var(--border-subtle);
  display:flex;
  flex-direction:column;
}

.sidebar-tabs{
  display:flex;
  background:var(--bg-tertiary);
  border-bottom:1px solid var(--border-subtle);
  overflow-x:auto;
}

.sidebar-tab-btn{
  flex:1;
  padding:0.75rem 0.5rem;
  font-size:0.8rem;
  font-weight:600;
  color:var(--text-muted);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.3rem;
  border-bottom:2px solid transparent;
  transition:all var(--transition-fast);
  white-space:nowrap;
}

.sidebar-tab-btn svg{
  width:18px;
  height:18px;
}

.sidebar-tab-btn.active{
  color:var(--accent-primary);
  border-bottom-color:var(--accent-primary);
  background:var(--bg-secondary);
}

.sidebar-content{
  padding:1.25rem;
  overflow-y:auto;
  max-height:520px;
  flex:1;
}

.tab-pane{
  display:none;
}

.tab-pane.active{
  display:block;
  animation:fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}

.control-group{
  margin-bottom:1.25rem;
}

.control-label{
  display:block;
  font-size:0.825rem;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:0.5rem;
}

.control-input,.control-select,.control-textarea{
  width:100%;
  background:var(--bg-tertiary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:0.55rem 0.75rem;
  color:var(--text-primary);
  font-size:0.875rem;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}

.control-input:focus,.control-select:focus,.control-textarea:focus{
  border-color:var(--accent-primary);
  box-shadow:0 0 0 3px rgba(99,102,241,0.2);
}

.control-row{
  display:flex;
  gap:0.5rem;
  align-items:center;
}

.control-range{
  width:100%;
  accent-color:var(--accent-primary);
  cursor:pointer;
}

.control-range-val{
  font-size:0.8rem;
  font-weight:600;
  min-width:38px;
  text-align:right;
  color:var(--text-muted);
}

/* Preset Cards Grid */
.preset-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0.5rem;
}

.preset-card{
  padding:0.6rem;
  border-radius:var(--radius-sm);
  background:var(--bg-tertiary);
  border:1px solid var(--border-subtle);
  text-align:center;
  font-size:0.75rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition-fast);
}

.preset-card:hover{
  border-color:var(--accent-primary);
  background:rgba(99,102,241,0.1);
  transform:translateY(-1px);
}

.preset-card.active{
  border-color:var(--accent-primary);
  background:rgba(99,102,241,0.2);
  color:var(--accent-primary);
}

.preset-thumb{
  height:44px;
  border-radius:4px;
  margin-bottom:0.35rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
}

/* Upload Dropzone */
.upload-dropzone{
  border:2px dashed var(--border-subtle);
  border-radius:var(--radius-md);
  padding:1.5rem 1rem;
  text-align:center;
  cursor:pointer;
  background:rgba(255,255,255,0.02);
  transition:all var(--transition-fast);
}

.upload-dropzone:hover,.upload-dropzone.dragover{
  border-color:var(--accent-primary);
  background:rgba(99,102,241,0.05);
}

.upload-dropzone svg{
  width:32px;
  height:32px;
  color:var(--accent-primary);
  margin:0 auto 0.5rem;
}

.upload-dropzone-text{
  font-size:0.825rem;
  font-weight:600;
  color:var(--text-primary);
}

.upload-dropzone-sub{
  font-size:0.725rem;
  color:var(--text-muted);
  margin-top:0.25rem;
}

/* Center Canvas Viewport */
.studio-center-stage{
  display:flex;
  flex-direction:column;
  background:var(--bg-primary);
  position:relative;
  overflow:hidden;
}

.stage-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.6rem 1rem;
  background:rgba(18,22,34,0.7);
  border-bottom:1px solid var(--border-subtle);
  font-size:0.8rem;
  flex-wrap:wrap;
  gap:0.5rem;
}

.ratio-selector{
  display:flex;
  gap:0.35rem;
}

.ratio-btn{
  padding:0.25rem 0.55rem;
  border-radius:var(--radius-sm);
  background:var(--bg-tertiary);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  font-size:0.75rem;
  font-weight:600;
  transition:all var(--transition-fast);
}

.ratio-btn:hover,.ratio-btn.active{
  background:var(--accent-primary);
  color:#ffffff;
  border-color:var(--accent-primary);
}

.timecode-display{
  font-family:monospace;
  font-weight:700;
  font-size:0.875rem;
  color:var(--accent-secondary);
  background:var(--bg-tertiary);
  padding:0.25rem 0.6rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
}

.canvas-viewport-wrapper{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  position:relative;
  min-height:360px;
  background:radial-gradient(circle at center, rgba(30,41,59,0.5) 0%, rgba(10,12,19,0.9) 100%);
}

.canvas-frame{
  position:relative;
  box-shadow:0 12px 36px rgba(0,0,0,0.6);
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  background:#000000;
}

#animationCanvas{
  display:block;
  width:100%;
  height:100%;
}

/* Right Inspector Panel */
.studio-inspector-panel{
  background:var(--bg-secondary);
  border-left:1px solid var(--border-subtle);
  padding:1.25rem;
  overflow-y:auto;
  max-height:520px;
}

.inspector-header{
  font-size:0.9rem;
  font-weight:700;
  color:var(--text-primary);
  padding-bottom:0.75rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Multi-Track Interactive Timeline */
.studio-timeline{
  background:var(--bg-tertiary);
  border-top:1px solid var(--border-subtle);
  padding:0.85rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.timeline-controls-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.5rem;
}

.playback-controls{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.play-toggle-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--accent-gradient);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 10px rgba(99,102,241,0.4);
  transition:transform var(--transition-fast);
}

.play-toggle-btn:hover{
  transform:scale(1.08);
}

.play-toggle-btn svg{
  width:18px;
  height:18px;
}

.timeline-track-area{
  position:relative;
  background:var(--bg-secondary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:0.5rem;
  min-height:90px;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}

.timeline-ruler{
  height:20px;
  border-bottom:1px solid var(--border-subtle);
  position:relative;
  display:flex;
  justify-content:space-between;
  font-size:0.65rem;
  color:var(--text-muted);
  font-family:monospace;
  padding:0 0.25rem;
}

.timeline-scrubber-track{
  position:relative;
  height:28px;
  background:rgba(255,255,255,0.03);
  border-radius:4px;
  cursor:pointer;
}

.timeline-progress-bar{
  height:100%;
  background:rgba(99,102,241,0.25);
  border-radius:4px;
  width:0%;
  pointer-events:none;
}

.timeline-playhead{
  position:absolute;
  top:-4px;
  left:0%;
  width:12px;
  height:36px;
  transform:translateX(-50%);
  cursor:ew-resize;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:20;
}

.playhead-handle{
  width:12px;
  height:12px;
  background:var(--accent-secondary);
  border-radius:2px;
  box-shadow:0 0 6px var(--accent-secondary);
}

.playhead-line{
  width:2px;
  height:24px;
  background:var(--accent-secondary);
}

.timeline-track-row{
  display:flex;
  align-items:center;
  height:26px;
  background:var(--bg-tertiary);
  border-radius:4px;
  padding:0 0.5rem;
  font-size:0.75rem;
  gap:0.5rem;
}

.track-label{
  width:65px;
  font-weight:600;
  color:var(--text-muted);
  flex-shrink:0;
}

.track-clip{
  flex:1;
  height:18px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);
  opacity:0.8;
  display:flex;
  align-items:center;
  padding:0 0.4rem;
  color:#ffffff;
  font-size:0.65rem;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Validation Feedback & Alert Toasts */
.validation-feedback{
  padding:0.75rem 1.25rem;
  background:rgba(16,185,129,0.1);
  border-top:1px solid rgba(16,185,129,0.25);
  color:var(--success);
  font-size:0.825rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
  transition:all var(--transition-fast);
}

.validation-feedback.error{
  background:rgba(239,68,68,0.1);
  border-top-color:rgba(239,68,68,0.25);
  color:var(--danger);
}

.validation-feedback.warning{
  background:rgba(245,158,11,0.1);
  border-top-color:rgba(245,158,11,0.25);
  color:var(--warning);
}

/* Modal Windows (Export Progress, Clear Confirmation) */
.modal-backdrop{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.modal-backdrop.show{
  display:flex;
}

.modal-box{
  background:var(--bg-secondary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  width:100%;
  max-width:480px;
  padding:1.75rem;
  position:relative;
  animation:modalSlide 0.25s cubic-bezier(0.16,1,0.3,1);
}

@keyframes modalSlide{
  from{opacity:0;transform:scale(0.92);}
  to{opacity:1;transform:scale(1);}
}

.modal-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:0.75rem;
}

.modal-desc{
  font-size:0.875rem;
  color:var(--text-secondary);
  margin-bottom:1.25rem;
  line-height:1.5;
}

.export-progress-bar-wrap{
  background:var(--bg-tertiary);
  border-radius:var(--radius-full);
  height:12px;
  overflow:hidden;
  margin:1.25rem 0 0.5rem;
  border:1px solid var(--border-subtle);
}

.export-progress-fill{
  height:100%;
  width:0%;
  background:var(--accent-gradient);
  transition:width 0.1s linear;
}

.export-status-text{
  font-size:0.8rem;
  color:var(--text-muted);
  display:flex;
  justify-content:space-between;
}

/* Video Tools Showcase Section (Before Features, No Scroll / Full Grid) */
.video-tools-section{
  padding:3.5rem 0;
  background:var(--bg-secondary);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}

.section-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 2.5rem;
}

.section-tag{
  display:inline-block;
  font-size:0.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--accent-secondary);
  margin-bottom:0.5rem;
}

.section-title{
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,3.5vw,2.5rem);
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:0.75rem;
}

.section-desc{
  font-size:0.95rem;
  color:var(--text-secondary);
  line-height:1.6;
}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1rem;
}

.tool-link-card{
  display:flex;
  align-items:center;
  gap:0.85rem;
  padding:0.9rem 1.15rem;
  background:var(--bg-tertiary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  transition:all var(--transition-fast);
  color:var(--text-primary);
}

.tool-link-card:hover{
  background:rgba(99,102,241,0.1);
  border-color:var(--border-active);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

.tool-icon-wrapper{
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  background:rgba(99,102,241,0.15);
  color:var(--accent-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.tool-icon-wrapper svg{
  width:20px;
  height:20px;
}

.tool-info{
  flex:1;
  min-width:0;
}

.tool-name{
  font-weight:600;
  font-size:0.875rem;
  margin-bottom:0.15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tool-category{
  font-size:0.725rem;
  color:var(--text-muted);
}

/* Features Section */
.features-section{
  padding:4.5rem 0;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.5rem;
}

.feature-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:1.85rem;
  position:relative;
  transition:all var(--transition-smooth);
}

.feature-card:hover{
  border-color:var(--border-active);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.feature-icon-box{
  width:52px;
  height:52px;
  border-radius:var(--radius-md);
  background:var(--accent-gradient);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.25rem;
  box-shadow:0 4px 14px rgba(99,102,241,0.3);
}

.feature-icon-box svg{
  width:26px;
  height:26px;
}

.feature-title{
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:0.6rem;
}

.feature-text{
  font-size:0.875rem;
  color:var(--text-secondary);
  line-height:1.6;
}

/* How It Works Section */
.how-it-works-section{
  padding:4.5rem 0;
  background:var(--bg-secondary);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  position:relative;
}

.step-card{
  background:var(--bg-tertiary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  position:relative;
}

.step-number{
  font-family:var(--font-heading);
  font-size:2.5rem;
  font-weight:800;
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;
  margin-bottom:0.75rem;
}

.step-title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:0.5rem;
}

.step-desc{
  font-size:0.85rem;
  color:var(--text-secondary);
  line-height:1.5;
}

/* SEO Content Section (~400 words) */
.seo-content-section{
  padding:4.5rem 0;
}

.seo-article-card{
  background:var(--bg-secondary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  line-height:1.8;
  color:var(--text-secondary);
}

.seo-article-title{
  font-family:var(--font-heading);
  font-size:1.85rem;
  font-weight:800;
  color:var(--text-primary);
  margin-bottom:1.25rem;
}

.seo-article-card p{
  margin-bottom:1.25rem;
  font-size:0.95rem;
}

.seo-article-card strong{
  color:var(--text-primary);
}

.seo-highlights-box{
  background:var(--bg-tertiary);
  border-left:4px solid var(--accent-primary);
  padding:1.25rem 1.5rem;
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  margin:1.5rem 0;
}

.seo-highlights-title{
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:0.5rem;
  font-size:1rem;
}

/* FAQ Section */
.faq-section{
  padding:4rem 0;
  background:var(--bg-secondary);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}

.faq-container{
  max-width:860px;
  margin:0 auto;
}

.faq-item{
  background:var(--bg-tertiary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  margin-bottom:1rem;
  overflow:hidden;
  transition:border-color var(--transition-fast);
}

.faq-item:hover{
  border-color:var(--border-active);
}

.faq-question{
  width:100%;
  text-align:left;
  padding:1.25rem 1.5rem;
  font-family:var(--font-heading);
  font-size:1.05rem;
  font-weight:700;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.faq-toggle-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  transition:transform var(--transition-fast);
}

.faq-item.open .faq-toggle-icon{
  transform:rotate(180deg);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--transition-smooth),padding var(--transition-smooth);
  padding:0 1.5rem;
  font-size:0.9rem;
  color:var(--text-secondary);
  line-height:1.65;
}

.faq-item.open .faq-answer{
  max-height:350px;
  padding:0 1.5rem 1.25rem;
}

/* CTA Section */
.cta-section{
  padding:5rem 0;
  position:relative;
  text-align:center;
}

.cta-box{
  background:radial-gradient(ellipse at top,#2e1065 0%,#1e1b4b 50%,#0f172a 100%);
  border:1px solid rgba(139,92,246,0.3);
  border-radius:var(--radius-lg);
  padding:3.5rem 2rem;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}

.cta-title{
  font-family:var(--font-heading);
  font-size:clamp(1.85rem,4vw,2.75rem);
  font-weight:800;
  margin-bottom:1rem;
  color:#ffffff;
}

.cta-desc{
  font-size:1.05rem;
  color:rgba(255,255,255,0.8);
  max-width:640px;
  margin:0 auto 2rem;
}

.cta-buttons-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.cta-btn-glow{
  background:#ffffff;
  color:#0f172a;
  font-weight:700;
  padding:0.75rem 1.75rem;
  border-radius:var(--radius-sm);
  box-shadow:0 0 24px rgba(255,255,255,0.3);
  transition:all var(--transition-fast);
}

.cta-btn-glow:hover{
  background:#f1f5f9;
  transform:translateY(-2px);
  box-shadow:0 0 32px rgba(255,255,255,0.5);
}

.cta-btn-outline{
  background:rgba(255,255,255,0.1);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.25);
  font-weight:700;
  padding:0.75rem 1.75rem;
  border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
}

.cta-btn-outline:hover{
  background:rgba(255,255,255,0.2);
  border-color:#ffffff;
}

/* Footer & Multi-column links */
.site-footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border-subtle);
  padding:4rem 0 2rem;
  color:var(--text-secondary);
  font-size:0.875rem;
}

.footer-top-grid{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:2.5rem;
  margin-bottom:3rem;
}

@media(max-width:900px){
  .footer-top-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:560px){
  .footer-top-grid{
    grid-template-columns:1fr;
  }
}

.footer-col-title{
  font-family:var(--font-heading);
  font-size:0.95rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:1rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.footer-links-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}

.footer-links-list a{
  color:var(--text-muted);
  transition:color var(--transition-fast);
}

.footer-links-list a:hover{
  color:var(--accent-primary);
}

.footer-bottom-bar{
  border-top:1px solid var(--border-subtle);
  padding-top:2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
  font-size:0.8rem;
  color:var(--text-muted);
}

.trademark-disclaimer{
  font-size:0.75rem;
  max-width:800px;
  line-height:1.5;
}

.footer-legal-links{
  display:flex;
  gap:1.5rem;
}

.footer-legal-links a:hover{
  color:var(--text-primary);
}

/* Cookie Consent Banner */
.cookie-banner{
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 2rem);
  max-width:680px;
  background:var(--bg-secondary);
  border:1px solid var(--border-active);
  box-shadow:var(--shadow-lg);
  border-radius:var(--radius-md);
  padding:1.25rem 1.5rem;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  animation:slideUp 0.3s ease-out forwards;
}

.cookie-banner.show{
  display:flex;
}

@keyframes slideUp{
  from{transform:translateX(-50%) translateY(50px);opacity:0;}
  to{transform:translateX(-50%) translateY(0);opacity:1;}
}

.cookie-text{
  font-size:0.825rem;
  color:var(--text-secondary);
  line-height:1.45;
}

.cookie-text a{
  color:var(--accent-primary);
  text-decoration:underline;
}

.cookie-actions{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-shrink:0;
}

@media(max-width:640px){
  .cookie-banner{
    flex-direction:column;
    align-items:flex-start;
  }
  .cookie-actions{
    width:100%;
    justify-content:flex-end;
  }
  .nav-links{
    display:none;
  }
  .mobile-menu-toggle{
    display:flex;
  }
}