/* ===== Tokens ===== */
:root{
  --bg:#F6F5FB;
  --surface:#FFFFFF;
  --border:#E7E4F0;
  --ink:#1C1730;
  --ink-soft:#5B5770;
  --primary:#5B3DF5;
  --primary-dark:#4429D6;
  --accent:#FF6B4A;
  --accent-dark:#E5522F;
  --success-bg:#EAF7EE;
  --success-ink:#1E7A3D;
  --error-bg:#FDECEB;
  --error-ink:#B3261E;
  --radius:14px;
  --max:640px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.5;
}
h1,h2,h3,.brand{font-family:'Sora',sans-serif}
a{color:var(--primary)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ===== Header ===== */
.site-header{
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand__dot{width:9px;height:9px;border-radius:50%;background:var(--primary);display:inline-block}

/* ===== Hero ===== */
.hero{padding:44px 0 8px}
.hero h1{font-size:28px;line-height:1.25;margin:0 0 10px;font-weight:700;letter-spacing:-.01em}
.hero p.lede{color:var(--ink-soft);font-size:15px;margin:0 0 26px}

.download-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:8px;
  box-shadow:0 12px 30px -18px rgba(28,23,48,.28);
}
.download-form{display:flex;flex-direction:column;gap:8px}
.download-form input[type=url]{
  flex:1;
  padding:15px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:16px;
  font-family:inherit;
  color:var(--ink);
  background:#FCFBFF;
}
.download-form input[type=url]:focus{border-color:var(--primary);background:#fff}
.download-form button{
  padding:15px 18px;
  border:none;
  border-radius:10px;
  background:var(--primary);
  color:#fff;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
}
.download-form button:hover{background:var(--primary-dark)}
.download-form button:disabled{opacity:.65;cursor:wait}
@media(min-width:520px){
  .download-form{flex-direction:row}
  .download-form button{flex:0 0 auto;min-width:140px}
}

.hint{font-size:12.5px;color:var(--ink-soft);margin:12px 4px 0}

/* ===== Result / alerts ===== */
.alert{border-radius:10px;padding:14px 16px;margin-top:16px;font-size:14.5px}
.alert-error{background:var(--error-bg);color:var(--error-ink)}
.alert-success{background:var(--success-bg);color:var(--success-ink)}
.result-file{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;
}
.result-file span{font-size:13.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-save{
  flex:0 0 auto;background:var(--accent);color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;font-family:'Sora',sans-serif;
}
.btn-save:hover{background:var(--accent-dark)}
.preview{margin-top:12px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.preview video, .preview img{width:100%;display:block}

/* ===== What it supports ===== */
.supports{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.supports li{
  font-size:13px;color:var(--ink-soft);background:#fff;border:1px solid var(--border);
  padding:7px 12px;border-radius:100px;
}

/* ===== Steps ===== */
.steps{padding:38px 0 8px}
.steps h2{font-size:20px;margin:0 0 22px}
.step-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:16px;position:relative;padding-bottom:26px}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:15px;top:34px;bottom:0;width:1px;background:var(--border);
}
.step:last-child::before{display:none}
.step__num{
  flex:0 0 auto;width:31px;height:31px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:600;font-size:13px;
  z-index:1;
}
.step__body h3{margin:2px 0 4px;font-size:15.5px}
.step__body p{margin:0;color:var(--ink-soft);font-size:14px}

/* ===== FAQ ===== */
.faq{padding:36px 0 8px}
.faq h2{font-size:20px;margin:0 0 16px}
.faq details{border-bottom:1px solid var(--border);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:14.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--primary);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--ink-soft);font-size:14px}

/* ===== Ads ===== */
.ad-slot{
  margin:30px 0;background:#F0EEFA;border:1px dashed var(--border);border-radius:10px;
  padding:10px;text-align:center;
}
.ad-slot__label{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:6px}
.ad-slot__placeholder{
  min-height:90px;display:flex;align-items:center;justify-content:center;color:#8A86A0;font-size:13px;
}
.ad-slot__banner img{margin:0 auto;border-radius:6px}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);margin-top:20px;padding:26px 0 40px}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--ink-soft);font-size:13px}
.site-footer a{color:var(--ink-soft);text-decoration:none}
.site-footer a:hover{color:var(--primary)}
.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}