:root{
  --bg:#0b1120;
  --surface:#111827;
  --surface-2:#151e2f;
  --surface-3:#0f1726;
  --text:#f7f9fc;
  --muted:#98a6ba;
  --muted-2:#6f7e92;
  --accent:#5aa7ff;
  --accent-hover:#76b6ff;
  --border:#243044;
  --border-soft:#1b2638;
  --success:#58d6a1;
  --shadow:0 20px 55px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

.topbar{
  width:min(1180px,calc(100% - 48px));
  height:76px;
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--border-soft);
}
.brand{
  text-decoration:none;
  font-size:1.46rem;
  font-weight:850;
  letter-spacing:-.035em;
  color:#fff;
}
.brand span{color:var(--accent)}
nav{display:flex;align-items:center;gap:26px;margin-left:auto}
nav a,.footer-links a{
  color:#b7c2d2;
  text-decoration:none;
  font-size:.94rem;
  font-weight:550;
  transition:color .18s ease;
}
nav a:hover,.footer-links a:hover{color:#fff}

.nav-cta,.cta,.download,.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  background:var(--accent);
  color:#07111e;
  border-radius:10px;
  padding:12px 17px;
  font-weight:800;
  text-decoration:none;
  box-shadow:none;
  transition:background .18s ease,transform .18s ease;
}
.nav-cta:hover,.cta:hover,.download:hover,.primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.ghost-btn,.secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:transparent;
  color:#dce5f1;
  border-radius:10px;
  padding:12px 17px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.ghost-btn:hover,.secondary:hover{border-color:#3a4a63;background:#111a2a}

.hero{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:72px 0 48px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(330px,.94fr);
  gap:52px;
  align-items:center;
}
.hero-copy{max-width:680px}
.badge,.eyebrow,.panel-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid #2b3a50;
  background:#101827;
  color:#a9bdd5;
  border-radius:8px;
  padding:7px 10px;
  font-size:.78rem;
  font-weight:760;
  letter-spacing:.015em;
}
.hero h1{
  margin:20px 0 18px;
  max-width:720px;
  font-size:clamp(2.7rem,5.8vw,4.75rem);
  line-height:1.01;
  letter-spacing:-.055em;
  font-weight:820;
}
.hero h1 span{color:#a9d4ff}
.hero p{
  margin:0;
  max-width:650px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.75;
}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.trust-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.trust-row span{
  color:#9facbd;
  font-size:.86rem;
  padding:6px 9px;
  border-left:2px solid #2d3a50;
}

.hero-panel{display:flex;flex-direction:column;gap:14px}
.hero-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-panel-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  box-shadow:none;
}
.hero-panel-card.highlight{padding:22px}
.hero-panel-card strong{display:block;font-size:1.02rem;line-height:1.45}
.hero-panel-card p,.hero-panel-card span{color:var(--muted);line-height:1.6}
.panel-kicker{
  margin-bottom:10px;
  color:#7fc0ff;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mini-progress{
  display:grid;
  grid-template-columns:64px 1fr 62px;
  align-items:center;
  gap:10px;
  margin-top:15px;
  color:#aab5c5;
  font-size:.84rem;
}
.mini-progress div{height:7px;background:#0a1220;border-radius:999px;overflow:hidden}
.mini-progress b{display:block;height:100%;border-radius:999px;background:#4f7fb8}
.mini-progress.success b{background:#4dbd8a}

.tool-section,.features-section,.steps-section,.seo-links-section,.faq{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:34px 0;
}
.section-heading{max-width:730px;margin:0 auto 26px;text-align:center}
.section-heading.compact{max-width:none;text-align:left;margin:0 0 18px}
.section-heading h2,.faq h2{
  margin:12px 0 10px;
  font-size:clamp(1.8rem,3.7vw,2.75rem);
  line-height:1.1;
  letter-spacing:-.035em;
}
.section-heading p{margin:0;color:var(--muted);line-height:1.7;font-size:1rem}

.tool-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
}
.dropzone{
  border:1px dashed #34445e;
  border-radius:13px;
  padding:56px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:9px;
  cursor:pointer;
  background:var(--surface-3);
  transition:border-color .18s ease,background .18s ease;
}
.dropzone:hover,.dropzone.drag{border-color:#5a8fc7;background:#111b2b}
.drop-icon{
  width:48px;height:48px;
  margin:0 auto 6px;
  display:grid;place-items:center;
  border-radius:10px;
  border:1px solid #2f4059;
  background:#121c2d;
  color:#8cc7ff;
  font-size:1.35rem;
  font-weight:700;
}
.dropzone strong{font-size:1.06rem}
.dropzone span,.dropzone small,.control-hint,.result span,.file-info,.features p,.step-card p,.faq p{color:var(--muted)}

.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.82fr);gap:18px}
.preview-wrap,.controls-wrap,.features article,.step-card,.seo-grid a,.faq details{
  background:var(--surface-3);
  border:1px solid var(--border-soft);
  border-radius:13px;
}
.preview-wrap,.controls-wrap{padding:16px}
.preview-wrap img{
  display:block;
  max-width:100%;
  max-height:430px;
  margin:auto;
  border-radius:10px;
  background:#09111e;
}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel-title-row h3{margin:0;font-size:1rem}
.panel-chip{padding:6px 9px;font-size:.72rem;color:#97a9bf;background:#111a29}
.file-info{display:flex;justify-content:space-between;gap:10px;padding-top:12px;font-size:.88rem}
.controls{display:flex;flex-direction:column;gap:14px}
.controls label{display:flex;flex-direction:column;gap:7px;color:#cbd6e5;font-size:.9rem}
.controls input,.controls select{
  width:100%;
  background:#0c1422;
  color:#f5f8fc;
  border:1px solid #29374b;
  border-radius:9px;
  padding:11px 12px;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.controls input:focus,.controls select:focus{border-color:#4b78a7;box-shadow:0 0 0 3px rgba(90,167,255,.08)}
input[type="range"]{padding:0;height:7px;accent-color:var(--accent)}
.checkbox-row{
  flex-direction:row!important;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid #263449;
  border-radius:9px;
  background:#101827;
}
.checkbox-row input{width:auto;margin:0}
.actions{display:flex;gap:9px}
.primary,.secondary{border-radius:9px;padding:11px 14px}
.result{
  grid-column:1/-1;
  margin-top:2px;
  padding-top:16px;
  border-top:1px solid var(--border-soft);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.result strong{font-size:1rem}
.result div{display:flex;flex-direction:column;gap:5px}
.download{min-width:170px}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.features article,.step-card{padding:20px}
.feature-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  margin-bottom:15px;
  border:1px solid #2b3a4f;
  border-radius:8px;
  color:#80bdff;
  background:#101827;
  font-size:.76rem;
  font-weight:850;
}
.features h3,.step-card h3{margin:0 0 9px;font-size:1rem}
.features p,.step-card p{margin:0;line-height:1.65}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step-num{
  display:inline-flex;
  margin-bottom:13px;
  color:#78b7f7;
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.08em;
}
.seo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.seo-grid a{
  color:#cbd6e5;
  text-decoration:none;
  padding:14px;
  text-align:center;
  font-size:.9rem;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.seo-grid a:hover{border-color:#344963;background:#111a29;color:#fff}

.faq{max-width:900px}
.faq details{padding:17px 18px;margin-bottom:9px;background:#0f1726}
.faq summary{cursor:pointer;font-weight:720;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{line-height:1.7;margin:11px 0 0}

footer{
  width:min(1180px,calc(100% - 48px));
  margin:28px auto 36px;
  padding:24px 0 0;
  border-top:1px solid var(--border-soft);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  color:#7f8da2;
}
footer strong{display:block;color:#eaf0f7;margin-bottom:4px}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.hidden{display:none!important}
.result-suggestion{display:flex;align-items:center;gap:10px;margin-top:6px;color:#92dcb9;font-size:.84rem}
.text-button{background:transparent;border:0;color:#75b7f6;font-weight:750;padding:0;cursor:pointer;text-decoration:underline}
.primary:disabled{opacity:.62;cursor:wait}
.control-hint{font-size:.78rem;line-height:1.5}

@media(max-width:980px){
  .hero-grid,.editor{grid-template-columns:1fr}
  .hero-panel{max-width:760px}
  .hero-panel-grid,.features{grid-template-columns:1fr 1fr}
  .steps-grid{grid-template-columns:1fr}
  .seo-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  .topbar{width:calc(100% - 28px);height:68px}
  nav{display:none}
  .hero,.tool-section,.features-section,.steps-section,.seo-links-section,.faq,footer{width:calc(100% - 28px)}
  .hero{padding-top:46px}
  .result{flex-direction:column;align-items:stretch}
  .download{width:100%}
  .file-info{flex-direction:column}
}
@media(max-width:640px){
  .hero-panel-grid,.features,.seo-grid{grid-template-columns:1fr}
  .actions,.hero-actions{flex-direction:column}
  .cta,.ghost-btn,.download,.primary,.secondary{width:100%}
  .hero h1{font-size:2.35rem}
  .hero{padding-top:38px}
  .tool-card{padding:12px}
  .dropzone{padding:42px 16px}
  .nav-cta{display:none}
}