:root{
  --bg:#08090d;
  --bg-2:#0d0f15;
  --panel:#10131c;
  --line:#1d2230;
  --ink:#e9edf6;
  --mute:#8a92a6;
  --accent:#7c5cff;
  --accent-2:#22d3ee;
  --grad:linear-gradient(135deg,#7c5cff 0%,#22d3ee 60%,#a3e635 120%);
  --shadow:0 30px 80px -30px rgba(124,92,255,.45);
  --radius:16px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(34,211,238,.12), transparent 60%),
    var(--bg);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.02em;margin:0}
section{padding:96px 32px;max-width:1180px;margin:0 auto}

/* nav */
.nav{
  position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:rgba(8,9,13,.6);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{
  width:22px;height:22px;border-radius:7px;background:var(--grad);
  box-shadow:0 0 24px rgba(124,92,255,.6);
}
.brand-dot{color:var(--accent-2)}
.links{display:flex;gap:24px;align-items:center}
.links a{color:var(--mute);font-size:14px}
.links a:hover{color:var(--ink)}

/* buttons */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:12px;font-weight:600;font-size:14px;
  cursor:pointer;border:1px solid transparent;transition:.2s ease;
}
.btn-primary{background:var(--grad);color:#0a0a12;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#2a3147;background:#10131c}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed}

/* hero */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding-top:64px;
}
.pill{
  display:inline-block;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--mute);font-size:12px;letter-spacing:.04em;
  margin-bottom:20px;
}
.hero h1{font-size:clamp(36px,6vw,68px);line-height:1.04;font-weight:800}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mute);font-size:18px;line-height:1.6;margin:18px 0 28px;max-width:560px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:32px;margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:24px}
.stats span{color:var(--mute);font-size:12px;margin-top:4px}

.hero-art{
  position:relative;display:flex;align-items:center;justify-content:center;gap:18px;
  height:380px;
}
.card{
  width:160px;height:200px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,#10131c,#0a0c12);
  display:flex;align-items:flex-end;justify-content:center;padding:14px;
  font-size:12px;color:var(--mute);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:14px;border-radius:12px;
  background:
    repeating-linear-gradient(45deg,#1a2030 0 6px,#0e1320 6px 12px);
  filter:blur(.5px);
}
.card.before::before{filter:blur(2.5px) saturate(.6)}
.card.after{
  width:220px;height:280px;
  box-shadow:0 40px 90px -30px rgba(124,92,255,.5);
  border-color:#2a2350;
}
.card.after::before{
  background:
    radial-gradient(120px 80px at 30% 30%, rgba(124,92,255,.55), transparent 60%),
    radial-gradient(120px 80px at 70% 70%, rgba(34,211,238,.55), transparent 60%),
    linear-gradient(135deg,#1a1530,#0a1a22);
  filter:none;
}
.arrow{font-size:28px;color:var(--mute)}

/* app */
.app{padding-top:24px}
.app-head h2{font-size:32px}
.app-head p{color:var(--mute);margin-top:8px}
.dropzone{
  margin-top:24px;border:1.5px dashed #2a3147;border-radius:var(--radius);
  background:linear-gradient(180deg,#0c0f17,#0a0c12);
  padding:56px 24px;text-align:center;transition:.2s;
  cursor:pointer;
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:#0d1124}
.dz-icon{
  width:54px;height:54px;border-radius:14px;margin:0 auto 14px;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  color:#0a0a12;font-weight:800;font-size:24px;
}
.dz-inner small{display:block;color:var(--mute);margin-top:8px}
.link{background:none;border:0;color:var(--accent-2);cursor:pointer;font:inherit;padding:0}

.controls{
  margin-top:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;
}
.row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.row + .row{margin-top:14px}
.row label{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:13px}
.row label.toggle{cursor:pointer}
.row label.toggle input{accent-color:var(--accent)}
.row select,.row input[type=range]{
  background:#0a0c12;border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;border-radius:10px;font:inherit;
}
.row input[type=range]{padding:0;width:140px}
.actions{justify-content:space-between}
.status{color:var(--mute);font-size:13px}

/* preview */
.preview{margin-top:18px}
.compare{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius);
  overflow:hidden;background:#0a0c12;border:1px solid var(--line);user-select:none;
}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0a0c12}
.before-wrap{position:absolute;inset:0;width:50%;overflow:hidden}
.before-wrap img{width:200%;}
.handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);
  transform:translateX(-1px);cursor:ew-resize;
}
.handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--accent);color:#0a0a12;font-weight:700;border-radius:999px;
  padding:6px 10px;font-size:12px;letter-spacing:2px;white-space:nowrap;
}
.meta{display:flex;gap:32px;margin-top:14px}
.meta div{display:flex;flex-direction:column}
.meta b{font-size:16px}
.meta span{color:var(--mute);font-size:12px}

/* features */
.features h2,.how h2,.faq h2{font-size:32px;margin-bottom:28px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;
}
.feat h3{font-size:16px;margin-bottom:8px}
.feat p{color:var(--mute);font-size:14px;line-height:1.6;margin:0}

/* how */
.how ol{padding-left:20px;color:var(--mute);line-height:1.9;font-size:15px}
.how ol b{color:var(--ink)}

/* faq */
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;margin-bottom:10px;
}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--mute);margin:8px 0 0;line-height:1.6}

footer{
  display:flex;justify-content:space-between;color:var(--mute);
  padding:32px;border-top:1px solid var(--line);font-size:13px;
  max-width:1180px;margin:0 auto;
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-art{display:none}
  .grid{grid-template-columns:1fr}
  .links a:not(.btn-ghost){display:none}
}